@CHARSET "ISO-8859-1";

html {
	margin:0;
	padding:0;
}

body {
	margin:0;
	padding:0;
	background-color: rgb(145,200,11);
	background-image: url('images/fourchettes.png');
	/*font-family: "Tahoma", Arial, Sans serif;*/
	font-family: 'Lobster Two', cursive;
	color:  #333;
	width:100%;
	height:100%;
}

img {
	border: 0;
	margin: 0;
	
}

#footer {
	position: absolute;
	top: 100%;
	height:20px;
	color: white;
	font-size: 0.8em;
}
#footer a {
	color: white;
	text-decoration: none;
}


a {
	color: #333;
}	


#container {
	position: absolute;
	z-index: 1;
	width: 70%;
	top:  20%;
	left: 50%;
	margin-left: -35%;
	background-color: white;
	padding: 10px 10px 0px 10px;
	border-radius:12px;
	font-size:1.4rem;
}

#leftcol {
	width: 50%;
	padding-left: 10px;
}
#centercol {
	width: 50%;
	font-size: .9em;
	margin-left: 5%;
}
#centercol table{
	width:100%;
}
#centercol input[type=text]{
	width:300px;
}
#container #header {
	height : 100px;
	padding: 10px;
}
.content{
	width: 45%;
}
#menucantine_img{
width:70%;
max-width:300px;
}
h2{
font-size: 1.5em;
font-weight: bold;
margin-bottom:0;
}
#bordertop{
position: absolute; top:0; left:0; margin-top:-16px;
}
#borderbottom{
position: absolute; top:100%; left:0;
}

#apropos{
font-size: .8em;
color: #333;
padding-left: 20px;
}

#login {
	position: absolute; top:100%; left:0;
	width: 100%;
	margin-top: -25px;
	text-align: right;
	font-size: .8em;
}

#login a{
	padding-right: 20px;
	
	color: black;
}

#loginform{
	height:75%;
	padding-top:5%;
	width:50%;
}
#loginform table{
	width:75%;
	text-align:left;
}
input[type=text]{
	border:1px solid #DDDDDD;
	font-size:100%;
	font-family:Trebuchet MS;
	width : 200px;
	
}
select[name="activite"]{
	width:200px;
}
input[type=submit]:not(.select_school){
	background: -moz-linear-gradient(center bottom , #ff9515 0px, #ffb515 60%) repeat scroll 0 0 #eeeeee;
	background: -webkit-gradient(linear, center top, center bottom, from(#ff9515), to(#ffb515));
	background: -webkit-linear-gradient(#ff9515, #ffb515);
	background: -o-linear-gradient(#ff9515, #ffb515);
	background: -ms-linear-gradient(#ff9515, #ffb515);
	background: linear-gradient(#ff9515, #ffb515);
    border: 0;
    border-radius: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: #fff;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1;
    padding: 8px 14px 9px;
   	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    font-family:Arial,sans-serif;
    font-weight:bold;
}
.select_school{
	background:none;
	width:auto;
	border:none;
	cursor:pointer;
}
 #submit-container{
 position: relative;
 }
 input[name=cp]{
	width:300px;
}
textarea{
	width:235px;
	height:200px;
	font-size:0.8rem;
	font-family:Trebuchet MS;
	border:1px solid rgb(145,200,11);
}
h3{
color:rgb(145,200,11);
}
#menuJours td{
font-weight:bold;
}

#afficheMenu td{
border-bottom:1px solid rgb(145,200,11);
}
#afficheMenu{
	width:50%;
}
#afficheMenu .td-jour{
	text-transform:uppercase;
	color:rgb(145, 200, 11);
    -webkit-transform: rotate(271deg);
    -moz-transform: rotate(271deg);
    -o-transform: rotate(271deg);
    writing-mode: lr-tb;
    border:0;
    text-align:center;
}
#contact-table{
	width:50%;
	text-align:left;
}
#contact-table table{
	width:100%;
}
#contact-table table td{
font-size:1rem;
}
#contact-table input[type=text],#contact-table textarea{
	width:100%;
}

div.labels,div.inputs{
	width:49%;
	display:inline-block;
	line-height:2.5rem;
}

#error{
	text-align:center;
	width:50%;
	background-color:#FF1144;
	color:white;
}
#success{
	text-align:center;
	width:49%;
	background-color:#227106;
	color:white;

}
.baseline{
	position:absolute;
	bottom:-43px;
	font-size:80%;
	color:gray;
}
.triangle_left{
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent; 
	border-right: 30px solid #ff9515; 
	border-bottom: 15px solid transparent;
	text-decoration:none;
	display:inline-block;
	vertical-align:middle;
	margin-right:20px;
}
.triangle_right { 
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent; 
	border-left: 30px solid #ff9515; 
	border-bottom: 15px solid transparent;
	text-decoration:none;
	display:inline-block;
	vertical-align:middle; 
	margin-left:20px;
}
.centered{
	text-align:center;
}
/***************************************************ADAPTATIVE DESIGN ********************************************/
@media only screen and (min-width: 1550px) {
	body{
		font-size:13px;
	}
	.content{
		float:right;
		text-align: right; 
	}
	#assiettecantine_img{
		width:445px;
		margin-right: 20px; 
	}
}
@media only screen and (max-width: 1549px) and (min-width:1024px) {
	html,body{
		font-size:12px;
	}

	.content{
		float:right;
		text-align: right; 
	}
	#assiettecantine_img{
		width:300px;
		margin-right: 20px; 
	}
}
@media only screen and (max-width: 1023px) and (min-width:800px) {
	html,body{
		font-size: 11px;
	}
	.content{
		float:right;
		text-align: right;
	}	
	#assiettecantine_img{
		width:250px;
		margin-right: 20px; 
	}
}
@media only screen and (max-device-width : 799px) {
	html,body{
		font-size: 24px;
	}
	#container{
		width:95%;
		margin-left:2%;
		left:0;
	}
	.content{
		display:block;
		width:100%;
		float:none;
		text-align:left;
	}
	#menucantine_img{
		margin-left:235px;
		max-width:none;
	}
	#assiettecantine_img{
    	position: absolute;
    	top: 12px;
	}
	#menu{
		margin-left:300px;
	}
	#france_img{
		display:none;
	}
	input[name=cp]{
		width:300px;
		line-height:1.4rem;
	}
	#recherche-div{
		text-align:center;
	}
	#recherche-div input[name=cp]{
		line-height:2em;
		font-size:1.4rem;
	}
 	#centercol{
 		width:95%;
 	}
 	#centercol input[type=text]{
 	width:100%;
 	}
 	
 	#leftcol{
 	width:100%;
 	margin-top:82px;
 	}
 	#loginform{
 	width:100%;
 	}
 	#contact-table{
 	width:100%;
 	}
 	#afficheMenu{
		width:100%;
	}
	div.labels,div.inputs{
	display:block;
	line-height:1.5rem;
	}
 	.baseline{
 	display:none;
 	}
 	#success,#error{
		width:100%;
 	}
}