body{
width:1000px;
margin:0 auto;
background-image: url("../IMG/bgIMG.jpg")
}

#headerIMG{
width:950px;
border-radius:8px;
}

#pizzaBody{
overflow:hidden;
}

#pizzaMenu{
width: 350px;
float:left;
background-color: rgba(185,185,185, 0.95);
border-radius:10px;
}

#personalPizza{
width:400px;
height:1000px;
float:left;
background-color:#E62EB8;
border-radius:10px;
position:relative;

background: -moz-linear-gradient(top,  rgba(230,46,184,1) 55%, rgba(230,46,184,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(55%,rgba(230,46,184,1)), color-stop(100%,rgba(230,46,184,0)));
background: -webkit-linear-gradient(top,  rgba(230,46,184,1) 55%,rgba(230,46,184,0) 100%);
background: -o-linear-gradient(top,  rgba(230,46,184,1) 55%,rgba(230,46,184,0) 100%);
background: -ms-linear-gradient(top,  rgba(230,46,184,1) 55%,rgba(230,46,184,0) 100%);
background: linear-gradient(to bottom,  rgba(230,46,184,1) 55%,rgba(230,46,184,0) 100%);
}

/*http://jsfiddle.net/gionaf/m5A83/ (found linear-gradient code here posted on this thread
http://stackoverflow.com/questions/12664132/is-it-possible-to-graduate-the-opacity-of-an-html-element*/

#initPie{
position:absolute;
margin-left: 15px;
margin-top: 100px;

-webkit-animation-name: spinPizza;
	-webkit-animation-duration: 750ms;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spinPizza;
	-moz-animation-duration: 750ms;
	-moz-animation-iteration-count: 4;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spinPizza;
	-ms-animation-duration: 750ms;
	-ms-animation-iteration-count: 4;
	-ms-animation-timing-function: linear;

animation-name: spinPizza;
animation-duration: 750ms;
animation-iteration-count: 4;
animation-timing-function: linear;
}

.visualToppings{
position:absolute;
margin-left: 15px;
margin-top: 100px;
}

.visualTopsL{
position:absolute;
margin-left: 50px;
margin-top: 125px;
}
.visualTopsR{
position:absolute;
margin-left: 188px;
margin-top: 125px;
}

#pizzaCalcBody{
float:left;
height:400px;
width:190px;
background-color:#8A8A8A;
border-radius: 10px;
margin: 5px;
}

#calcHead{
width: 190px;
margin: 0 0 0 10px;
font-family: "Pacifico", serif;
font-size: 25px;
color:#FFFF00;
}

#pizzaCalc{
width: 180px;
height: 250px;
overflow:auto;
margin: 0 auto;
background-color: rgba(0,0,0,0.5);
border-radius: 7px;
}

.removeMe{
background-color: rgba(255,255,255,0.3);
color:#FFDAF3;
border-radius:50%;
font-size:8pt;
height:20px;
width:20px;
margin:3px;
margin-left:10px;
}
#totalP {
margin-left: 9px;
color:#FFFF00;
display:inline;
}
#pizzaTotal{
color:#FFFF00;
font-family:"Exo 2", serif;
display:inline;
}

#endOfMyRope{
display:block;
margin-top:25px;
}

#scratch{
width:80px;
height:50px;
margin-left:9px;
margin-top:3px;
border-radius:10px;
background-color: rgba(255,255,255,0.3);
font-family:"Exo 2", serif;
font-size:9pt;

}
#oven{
width:80px;
height:50px;
margin-left:9px;
margin-top:3px;
border-radius:10px;
background-color: rgba(255,255,255,0.3);
font-family:"Exo 2", serif;
font-size:9pt;
}

#scratch:hover{
color:white;
background-color: black;
}
#oven:hover{
color:white;
background-color: black;
}

h3{
font-family: "Pacifico", serif;
font-size: 30px;
color:#FFDAF3;
text-align:center;
background-color:#E62EB8;
padding:15px;
margin:5px;
border-radius: 8px;
}

h3:hover{
background-color:#FFDAF3;
color:#E62EB8;
}

p{
font-family: "Exo 2", serif;
}

.pizzaChoice{
display:block;
width: 350px;
overflow:hidden;
}

.size{
text-align:center;
overflow:hidden;
margin: 0 15px;
}

.size img{
width: 250px;
margin: 0 auto;
float:left;
}

.size p{
float:left;
text-align:center;
font-size: 11pt;
margin-left:5px;
}

.smll p{
margin-top:35px;
}
.medd p{
margin-top:50px;
}
.lrgg p{
margin-top:80px;
}
.xlrgg p{
margin-top:105px;
}

#sml{
width: 100px;
height: 100px;
margin-left: 80px;
margin-bottom:10px;
}

#sml:hover{
-webkit-animation-name: spinPizza;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spinPizza;
	-moz-animation-duration: 2000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spinPizza;
	-ms-animation-duration: 2000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

animation-name: spinPizza;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#med{
width:150px;
height:150px;
margin-left: 55px;
}
#med:hover{
-webkit-animation-name: spinPizza;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spinPizza;
	-moz-animation-duration: 2000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spinPizza;
	-ms-animation-duration: 2000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

animation-name: spinPizza;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#lrg{
width:200px;
height:200px;
margin-left: 35px;
margin-top:10px;
}
#lrg:hover{
-webkit-animation-name: spinPizza;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spinPizza;
	-moz-animation-duration: 2000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spinPizza;
	-ms-animation-duration: 2000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

animation-name: spinPizza;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

#xl{
width:250px;
height:250px;
margin-left: 15px;
margin-top:10px;
}
#xl:hover{-webkit-animation-name: spinPizza;
	-webkit-animation-duration: 2000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spinPizza;
	-moz-animation-duration: 2000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spinPizza;
	-ms-animation-duration: 2000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

animation-name: spinPizza;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes spinPizza {
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spinPizza {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spinPizza {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@keyframes spinPizza {
from{transform:rotate(0deg);}
to{transform: rotate(360deg);}
}

.crust{
text-align:center;
overflow:hidden;
margin: 0 15px;
}

.crust img{
width: 200px;
float:left;
}
#oreo:hover{
content: url(../IMG/crust/oreoBite.png);
}

#brownie:hover{
content: url(../IMG/crust/brownieBite.png);
}

#pbc:hover{
content: url(../IMG/crust/pbcBite.png);
}

#fryday:hover{
content: url(../IMG/crust/frydayBite.png);
}

#vickie:hover{
content: url(../IMG/crust/vickiesBite.png);
}

.crust p{
float:left;
text-align:center;
font-size: 11pt;
margin-top:30px;
}
.special p{
margin-top: 5px;
font-size: 8pt;
}

.sauce{
text-align:center;
overflow:hidden;
margin: 0 15px;
}

.sauce img{
float:left;
width: 100px;
padding:22px;
margin-left:30px;
}

.sauce img:hover{
-webkit-animation-name: heartThrob;
	-webkit-animation-duration: 800ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: heartThrob;
	-moz-animation-duration: 800ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: heartThrob;
	-ms-animation-duration: 800ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

animation-name: heartThrob;
animation-duration: 800ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@-webkit-keyframes heartThrob{
from{-webkit-transform:scale(1);}
to{-webkit-transform: scale(1.5);}
}
@-moz-keyframes heartThrob{
from{-webkit-transform:scale(1);}
to{-webkit-transform: scale(1.5);}
}
@-ms-keyframes heartThrob{
from{-webkit-transform:scale(1);}
to{-webkit-transform: scale(1.5);}
}
@keyframes heartThrob{
from{-webkit-transform:scale(1);}
to{-webkit-transform: scale(1.5);}
}

.sauce p{
float:left;
text-align:center;
font-size: 11pt;
margin-top:35px;
}
.special p{
margin-top: 5px;
font-size: 8pt;
}

table{
width: 320px;
margin: 0 auto;
margin-bottom:10px;
background-color: rgba(230, 46, 184, 0.1);
padding:5px;
border-collapse:collapse;
border: 5px solid rgba(230, 46, 184, 0.5);
border-radius:8px;
}

.toppings p{
font-family: "Exo 2", serif;
font-size: 8pt;
text-align:center;
}

td{
border: 5px solid rgba(230, 46, 184, 0.2);
border-radius:8px;
width:100px;
height:100px;
}
.topPurch{
background-color: #E62EB8;
color: #FFDAF3;
margin-bottom:0px;
width:100px;
height:80px;
padding:5px 0 0 0;
border-radius:3px;
overflow:hidden;
}
td p{
padding:5px;
margin-top:-5px;
}
.topImg{
width:80px;
height:80px;
margin-left: 10px;
margin-top: 10px;
}
td:hover{
background-color: rgba(230, 46, 184, 0.2);
}

.topPurch:hover{
background-color: #FFDAF3;
color: #E62EB8;
}
.topPurch:hover .left{
background-color: #E62EB8;
}
.topPurch:hover .full{
background-color: #E62EB8;
}
.topPurch:hover .right{
background-color: #E62EB8;
}

.left{
 height:30px;
 width:15px;
 border-radius: 15px 0 0 15px;
 background-color: #FFDAF3;
 float:left;
 margin-left:10px;
 margin-right:5px;
 margin-top:3px;
}

.long{
 margin-top:-9px;
}

.full{
 height:30px;
 width:30px;
 border-radius: 50%;
 background-color: #FFDAF3;
 float:left;
  margin-left:5px;
 margin-right:5px;
 margin-top:3px;
}

.long{
 margin-top:-9px;
 }
 
.right{
 height:30px;
 width:15px;
 border-radius: 0 15px 15px 0;
 background-color: #FFDAF3;
 float:left;
  margin-left:5px;
 margin-right:5px;
 margin-top:3px;
}

.long{
 margin-top:-9px;
 }

.left:hover{
transform:scale(1.2);
}
.full:hover{
transform:scale(1.2);
}
.right:hover{
transform:scale(1.2);
}