/*
   New Perspectives on HTML and CSS
   Tutorial 6
   Review Assignment

   Pizza Order Style Sheet
   Author: David Katelansky
   Date:   06/17/2015

   Filename:         pizza.css
   Supporting Files: delivery.png, okay.png, warning.png

*/

fieldset
{
   background-color: rgb(255, 246, 205);
   border: 1px solid rgb(233, 69, 0);
   float: left;
   margin: 1%;
   display:inline-block;
}

fieldset legend
{
   0.9em;
}

fieldset.custInfo
{
   width: 35%;
}

fieldset.buildPizza
{
   width: 60%;
}

#meat
{
   width: 47%;
   background-color: rgb(237, 178, 74);
   height: 240px;
}

#vegetables
{
   width: 47%;
   background-color: rgb(237, 178, 74);
   height: 240px;
}

fieldset label
{
   display: block;
   font-size: 0.8em;
   clear: left;
   float: left;
   width: 40%;   
   margin-bottom: 5%;
   padding-left: 5px;
}

input
{
   display: block;
   float: left;
   font-size: 0.8em;
   margin-top: 5px;
   margin-bottom: 5px;   
}

#instructions
{   
   display: block;
   float: left;
   font-size: 0.8em;
   width: 50%;
   margin-top: 5px;
   margin-bottom: 5px;   
   height: 100px;
}

form img
{
   float: left;
   margin-top: 5px;
   margin-bottom: 5px;
}

#delTime
{
   width: 150px;
}

#sizeImage
{
   margin-left: 40%;
}

#size
{
   width: 200px;
   opacity: 1.0;
}

#crust
{
   float: left;
   font-size: 0.8em;
   margin-top: 5px;
   margin-bottom: 5px;
   width: 150px;
}

#quantity
{
   width: 40px;
}

fieldset.optionGroup
{
   width: 95%;
   border: none;    
   background-color: transparent;
}

input.radio
{
   width: 31px;   
}

input.checkbox
{
   width: 20px;
}

input.submit
{
   width: 150px;
   float: none;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
}

input:focus
{
   background-color: rgb(220, 255, 220);
}

select:focus
{
   background-color: rgb(220, 255, 220);
}

textarea:focus
{
   background-color: rgb(220, 255, 220);
}

input:focus:valid
{
   background: rgb(220, 255, 220) url('okay.png') bottom right no-repeat;
   
   -o-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
}

input:focus:invalid
{
   background: rgb(255, 232, 233) url('warning.png') bottom right no-repeat;
   
   -o-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
}