/* CSS Document */
#container h4{
			width: 600px;
			text-align: center;
			position: absolute;
			top: -62px;
			/* using the custom font family provided by google */
			font-family: 'Cabin Sketch', cursive;
			color: white;
			font-size: 50px;
			text-transform: uppercase;
		}
		
#container h5 {font-family: 'Cabin Sketch', cursive;
font-size: 20px;
text-align: center;}		
		
		/* the fieldsets' legends */
		#container legend{
			font-family: 'Cabin Sketch', cursive;
			display: block;
			color: #444;
			font-size: 25px;
			padding-bottom: 10px;
		}
		
		.label{
			display: block;
			font-family: 'Special Elite', cursive;
			font-size: 20px;
		}
		
		.genre{
		width: 350px;
		margin-left: 10px auto;	
		padding-left: 5px;
		border-radius: 0px 0;
		}
		
		/* positioning the submit button */
	/*	input[type=submit]{
			display:inline;
			width: 100px;
			
		}	
		input[type=reset]{
			display:inline;
			width: 100px;
			
		}	*/
		
		/* align texts input on the right ppf no */
		input[type=text]{
			
			width: 350px;
			
			padding-left: 5px;
		}
		
		input[type=text], input[type=email], .label{
			/*margin: 2px 0px 2px 20px;*/
			line-height: 30px;
			height: 30px;
		}
		
		
		input[type=select]{
			margin: 2px 0px 2px 20px;
			line-height: 30px;
			height: 30px;
		}
		
		/* due to float: right the radio just after span or legend is the last
		   in the row, so add clear:right
		*/
		span + input[type=radio], legend + input[type=radio]{
			clear: right
		}
		
		/* size of the small labels linked to each radio */
		.preferences label.people{
			width: 60px;
			background-image: none;
		}
		
		input[type="radio"]{
			padding-right: 4px;
		}
				
		input[type="radio"],.preferences label{
			float: right;
			line-height: 30px;
			height: 30px;
		}
		
		/* --- [END] STYLING --- */
		
		/* --- [BEGIN] SHOW REQUIRED --- */ 

				
		input:required + * + .label:after,
		input:required + .label:after{
			content: '*';
		}
								
		/* --- [END] SHOW REQUIRED  --- */
		
		/* --- [BEGIN] CHECKBOX TRICK --- */
				

		/* if the browser supports mediaqueries then supports this part */
		
		@media all and (min-device-width: 1024px) {
			input[type=radio]{
				position: absolute;
				right: 225px;			
				margin-top: 10px;
			}
		
			
		
			.preferences label{
				float: right;
				text-indent: -100px;
				width: 40px !important;
				line-height: normal;
				height: 30px;
				overflow: hidden;
				cursor: pointer;
			}
		
			span + input[type=radio] + label, 
			legend + input[type=radio] + label{
				clear: right;
				margin-right: 80px;
				counter-reset: checkbox;
			}
		
			.preferences input[type="radio"]:required + label:after{
				content: '';
				position: absolute;
				right: 225px;
				min-height: 10px;
				margin-top: -22px;
				text-align: right;
				background: #eaeaea;
				padding: 10px 10px;
				display: block;
			}
		
			/* beers */
			.preferences label.people{
				background: transparent url('../_images/personA.png') no-repeat center center;
			}
		
			.preferences label.people:hover ~ label.people, 
			.preferences label.people:hover, 
			.preferences input[type=radio][name=people]:checked ~ label.people {
				background-image: url('../_images/personB.png');
				counter-increment: checkbox;
			}
		
			.preferences input[type=radio][name=people]:required + label.people:after{
				content: counter(checkbox) " People";
			}
		
		
		}
				
		/* --- [END] CHECKBOX TRICK --- */
		
		/* --- [BEGIN] VALID/INVALID COUNTER --*/
		
		fieldset{
			counter-reset: invalid fields;
		}
				
		input:not([type=submit]):not([type=radio]):invalid, input[type=radio]:required:invalid{
			counter-increment: invalid fields;
			border-left: 5px solid #ff4900;
		}
		
		input:not([type=submit]):not([type=radio]):valid, input[type=radio]:required{
			counter-increment: fields;
			border-left: 5px solid #116300;
		}
				
		fieldset footer{
			clear: both;
			position: relative;
		}
		
		fieldset:not([fake]) footer:after{
			content: 'section completed!';
			text-align: right;
			display: block;
			font-size: 13px;
			padding-top: 10px;
		}
		
		fieldset > input:invalid ~ footer:after{
			content: counter(invalid) '/' counter(fields) " required fields not yet completed. * are required.";
			white-space: pre;
		}
		
		/* --- [END] VALID/INVALID COUNTER -- */
		
		/* --- [BEGIN] BUBBLE STYLING -- */
		
		 ::-webkit-validaton-bubble{
			 margin-left: 80px;
			 margin-top: -50px;
			 width: 200px;
		 }
		 
		 input[type=radio]::-webkit-validation-bubble{
			 margin-left: 50px;	 	
			 margin-top: -50px;
		 }
		 
		 ::-webkit-validation-bubble-arrow-clipper{
			 -webkit-transform: rotate(270deg) translateY(-104px) translateX(40px);
		 }
		 		 
		 ::-webkit-validation-bubble-arrow{
			  background: #000;
			  border: none;
 			  box-shadow: 0px 0px 10px rgba(33,33,33,0.8);
		 }
		 
		 ::-webkit-validation-bubble-message{
			 border: 5px solid black;
			 background-image: none;
			 box-shadow: 0px 0px 10px rgba(33,33,33,0.8);
		 }
		
		/* --- [END] BUBBLE STYLING -- */
		
		/*buttons*/
		.submitbutton {
   border-top: 1px solid #444444;
   background: #444444;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e9c5c), to(#444444));
   background: -webkit-linear-gradient(top, #3e9c5c, #444444);
   background: -moz-linear-gradient(top, #3e9c5c, #444444);
   background: -ms-linear-gradient(top, #3e9c5c, #444444);
   background: -o-linear-gradient(top, #3e9c5c, #444444);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.submitbutton:hover {
   border-top-color: #000000;
   background: #000000;
   color: #ccc;
   }
.submitbutton:active {
   border-top-color: #000000;
   background: #000000;
   }

.resetbutton {
   border-top: 1px solid #444444;
   background: #444444;
   background: -webkit-gradient(linear, left top, left bottom, from(#f50505), to(#444444));
   background: -webkit-linear-gradient(top, #f50505, #444444);
   background: -moz-linear-gradient(top, #f50505, #444444);
   background: -ms-linear-gradient(top, #f50505, #444444);
   background: -o-linear-gradient(top, #f50505, #444444);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.resetbutton:hover {
   border-top-color: #000000;
   background: #000000;
   color: #ccc;
   }
.resetbutton:active {
   border-top-color: #000000;
   background: #000000;
   }