@-ms-viewport { width: device-width; }
* {box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
html, body { width: 100%; }
#wrapper { width: 100%; overflow: hidden; }
#center-middle img {height: auto !important;max-width: 100% !important;}
.clear {clear:both;height:1px;width:100%}
.content p, .morebar, .content li, .content td { /*font-size: 1.2em;*/ }
.visuallyhidden { border: 0 none; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.hide {display:none;}

/* --------------- HEAD --------------- */
#superheader { display: none; }
#superheader .inner { }
#header {  }
#header .inner { }
#header .logo { background:url(../images/layout/WMF-25-Logo-Masthead-temp.png) no-repeat; width: 90%; background-size:contain;  text-indent: -9999px; margin: 0;  cursor:pointer; height:100px; float:left;}
#header .year { width: 40%; float:right; padding: 20px 0; margin-right:5em; display:none }
#header .year img {max-width:100%;}
#subheader { }
#subheader .inner {}
/* --------------- BODY --------------- */
#contentwrapper {  }
#contentfloatholder { background: none; /* right col background - also defined in home.css */ }
#centerpad { margin: 0 0 0 0px; /* equal to right/left widths - also defined in home.css */ }
#center-top {}
#center-middle { margin: 0 15px 30px; min-height: 500px; height: auto !important;	height: 500px;}
#center-bottom { padding: 30px; clear:both }
#left { display:block; width:100%; }
#left .inner { padding: 10px; text-align:center; }
.verticalMenu {display:none;}
#right { /* also defined in home.css */ width:230px; display: none; }
#right .inner { padding: 10px; }
/* --------------- FOOT --------------- */
#superfooter {  }
#superfooter .inner { padding: 10px; }
#footer { text-align: center; }
#footer .inner { padding: 10px; }
#subfooter {background: #fcfcfa;}

#subfooter .inner { padding: 10px; min-height: 10px; }


/*************************************************************/
/******************** DON'T CHANGE STUFF *********************/
/*************************************************************/
* { margin: 0; padding: 0; }
img { border:none; }
body { text-align: center; }
/* wrapper holds left faux column tab */
/* nn6/7 will put content out of scrollable reach if auto is used unless the min-width is on body */
#wrapper { /* also holds the left "sliding" tab */ text-align: left; margin: 0 auto; /* NN will put content out of scrollable reach if auto is used unless there's a min-width on body too*/ }
#superheader, #header, #subheader, #superfooter, #footer, #subfooter { clear: both; width: 100%; position: relative; }
#contentwrapper { width: 100%; overflow: hidden; }
#contentfloatholder { /* also makes the right "sliding" tab */ float: left; width: 100%; position: relative; }
#contentfloatholder:after { /* this is for NN6 to clear floats */ content: "."; display: block; height: 0px; clear: both; visibility: hidden; }
#centerpad { display: inline-block; /* TRIP haslayout for safety */ }
#centerpad { display: block; /* SWITCH back the display */ }
#center { float:left; width: 100%; margin-right: -95%;	/* 	This needs to be less than 100% for Moz/Mac which thinks it's empty otherwise. 
The difference is made up by putting a negative left margin on the left 'float:' Note IE/Mac doesn't like this method ~ it wants the 100% so it can 
be fed in using IE only CSS below becasue IE/Win also works with the 100% method. */}
#left {	float:left; 	/* the difference to make the left colum appear flush left */ }
#right { float:right; }

/*************************************************************/
/******************** RESPONSIVE *********************/
/*************************************************************/

@media only screen and (min-width: 22em) { /*352px*/
#center-middle p img {height: auto !important;max-width: 100% !important; }
}

@media only screen and (min-width: 34em) { /*544px*/
#header .logo { height: 0; padding-bottom:20%;}
#center-middle img { float:auto; display:inline;}
}
@media only screen and (min-width: 46em) { /*737px*/
}
@media only screen and (min-width: 60em) { /*960px*/

body { min-width: 960px; }
#wrapper { width: 960px; /* this can fixed (px) or fluid (%) */ }
/* --------------- HEAD --------------- */
#header { height: 200px;  }
#header .inner { }
#header .logo { text-indent: -9999px; margin: 0; position: absolute; left: 0; top: 0;  cursor:pointer; width:100%;}
#header .year { position: absolute; left: 300px; top: 35px; }
#subheader { height: 165px; background: #e5f2fc; }
#subheader .inner {}
/* --------------- BODY --------------- */
#contentwrapper { background: #e5f2fc; }
#contentfloatholder { background: none; /* right col background - also defined in home.css */ }
#centerpad { margin: 0 0 0 230px; /* equal to right/left widths - also defined in home.css */ }
#center-top {}
#center-middle { margin: 0 30px 30px 30px; min-height: 500px; height: auto !important;	height: 500px;}
#center-bottom { padding: 30px; clear:both }
#left {	float:left; margin-left: -5%;	/* the difference to make the left colum appear flush left */ }
#left { width: 230px; }
#left .inner { padding: 10px; }
.verticalMenu {display:block;}
#right { /* also defined in home.css */ width:230px; display: none; }
#right .inner { padding: 10px; }
/* --------------- FOOT --------------- */
#superfooter { background: #e5f2fc;  }
#superfooter .inner { padding: 10px; }
#footer { background: #e5f2fc; text-align: center; }
#footer .inner { padding: 10px; }
#subfooter { background: #e5f2fc;  }
#subfooter .inner { padding: 10px; min-height: 10px; }
}
@media only screen and (max-width: 34em) { /*544px*/
#center-middle p img {float:none !important; display:block;}
}