/* -----------------------------------------------
	Body
   ---------------------------------------------- */
   
body {
	font: 62.5% "Lucida Grande", Arial, Helvetica, sans-serif;
	background:#e8e8e8;
	color: #333;
	margin: 0px;
	padding: 0px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* -----------------------------------------------
	Page Structure
   ---------------------------------------------- */
   
#pagewrapper {
	max-width:1140px;			/* width of whole page -  960px/960. To make it 100% fluid change max-width:1140 to width:90%  */
	margin: 2em auto;
	padding: 2em 4.16667% 4em;     /* 40px/960x100=4.1666667%*/
	clear: both;
	position: relative;
	overflow: hidden;
	background: #fff;
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	border-radius:.5em;
	box-shadow:rgba(0,0,0,.2) 0 3px 5px;
}
#header {
	float:left;
	width:100%;
	padding-bottom: 2em;
	clear: both;
}
#banners {
	float: left;
	width: 100%;
	padding: 1em 0;
	border-bottom: 4px solid #333;	

}
#banners > article {
	float: left;
	width: 33.0208%;
}
#banners img {
	margin: 0em;
	padding: 0em;	
}

/* -----------------------------------------------
	@group Page titles & banners
   ---------------------------------------------- */
 #page-banner  {
	background-size:100%;
	background-repeat:no-repeat;
	background-position:0 0;
	padding-top:18%;
	padding-bottom:18%;
	margin-bottom:1%;
}
.stories #page-banner {
	background: url(../../images/science.jpg) no-repeat;
}
#maincontent, #advertisiment {
	float: left;
	margin-top: 1em;
	overflow: hidden;
	position: relative;
}
#maincontent {
	width: 66.6667%;
	margin-top: 2em;
	
}
#advertisiment { 
	width: 32.291667%;  /*  310px/960x100 =  32.291667%  */
	}
#footer {
	height: auto;
	clear: both;
	border-top: 4px solid #333;
}
.logo {width:150px; margin:0px; padding:0px;}

/* -----------------------------------------------
	Main Navigation
   ---------------------------------------------- */

#navigation {
	border-bottom: 4px solid #333;
	border-top: 4px solid #333;
	clear: both;
	margin-top: 2em;

}

#navigation ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	overflow:hidden;
	
}
#navigation li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline;
	
}
#navigation li a {
	text-decoration: none;
	padding: 10px 14px;
	float: left;
	font: 1.6em Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	border-right: 1px dotted #ccc;
	color: #333;
	/*TRANSISTIONS*/
	-webkit-transition: background 0.9s ease;
	-moz-transition: background 0.9s ease;
	-o-transition: background 0.9s ease;
	-ms-transition: background 0.9s ease;
	transition: background 0.9s ease;
}
#navigation li a:hover {
	color: #fff;
	text-decoration: none;
	background: #333333;
}
#navigation li:last-child a {
	border:none;
}
#navigation #active a {
	color: #fff;
	background:   #0057A5;
}

/* -----------------------------------------------
	Sample List Navigation
	----------------------------------------------*/
	
.sub-nav {
	margin: 20px 10px;
	padding: 0px;
	list-style: none;
}
.sub-nav li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	width: 100%;
}
.sub-nav li a {
	margin: 0px;
	padding: 5px 0px 4px;
	text-decoration: none;
	display: block;
	color: #333;
	border-top: 1px dotted #ccc;
	font-size: 1.1em;
}
.sub-nav li a:hover {
	color: #c09;
	text-decoration: none;
}

/* -----------------------------------------------
	Typography in ems
	target ÷ context = result
	
	Target – the font size we ultimately want to be 
	displayed by default
    Context – the base font size our browser recognizes 
	(typically 16px for most browsers)
	
	32px ÷ 16px = 2em
	----------------------------------------------*/
	
h1, h2, h3, p, ul, li, pre {
	margin: 0px 2em 0px 1.0146667%;  /*  10px/960x100 =  1.0146667%  */
	padding:0;
}

h1 {
	font-size: 2.4em;
	font-weight: 900;
	margin-top: 1em;
}
#header h1 {
	font-size: 3.2em;
	text-transform: uppercase;
}
#header h1 a {
	color: #333;
	text-decoration: none;
}
#header h1 a:hover { 
	opacity:.7; 
}

h2 {
	color: #B8B8B8;
	font-size: 1.4em;
}

p {
	font-size: 1.2em;
	font-style: normal;
	line-height: 1.7em;
	margin-top: 1em;
	margin-bottom: 1em;
}
img, object {     /*Flexible Images - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/*/
	border: 0;
	display: block;
	max-width: 100%;
	width: 100%;
	margin: 1em;
	
}
.clear-all {
	clear: both;
	padding-top: 1em;
}
a
{
    color:#c09;
    text-decoration:none;

    -moz-transition:all linear .2s;
    -o-transition:all linear .2s;
    -webkit-transition:all linear .2s;
    transition:all linear .2s;
}

a:hover
{
    text-decoration:underline;
}
#footer a
{
    color:#1899CB;
}

#footer a:hover
{
    text-decoration:none;
    color:#B9B8AC;
}
/* Buttons
-------------------------------------------*/
.smallbutton
{
	font:500 .857142857em/1 Helvetica,Arial, sans-serif; /*12/14*/
	text-transform:uppercase;
	padding:0.8em 1.2em;
	background:#E1E0DF;
	color:#3E3C39;
	border:1px solid #D4D2C7;
	-moz-border-radius:.3em;
	-webkit-border-radius:.3em;
	border-radius:.3em;
	display:inline-block;
}

.smallbutton:after
{
    content:"\00A0\2192";
}

.smallbutton:hover
{
    text-decoration:none;
    color:#1B1A19;
    background:#DADAD8;
}

/* =Fluid Videos With Correct Ratio
<http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/>
Parent container of the video must be sized
###########################################*/
.vidholder
{
    margin:0;
    padding:0;
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    background:#000;
}

.vidholder > iframe
{
    border:none;
    position:absolute;
    width:100%;
    height:100%;
}


/* -----------------------------------------------
	MediaQueries
	Tablet / iPad [portrait + landscape]
	----------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	 #header,#maincontent, #advertisiment, #footer {
	float: left;
	position: relative;
	clear:both;
	border-bottom: none;
	width:100%;
	margin: 0.5em 0px;
	}


	
	#header {
		border:none;
		
		}
		
		
#navigation {
	 overflow:hidden;
		}

	#footer {
		border-top: 4px solid #333;
		
		}
	
}

/* -----------------------------------------------
	MediaQueries
	Layouts smaller than 600px, iPhone and mobiles
	----------------------------------------------*/
	
@media screen and (min-width: 320px) and (max-width: 768px) { 
 
	#header,#maincontent, #advertisiment, #footer {
	float: left;
	position: relative;
	clear:both;
	border: none;
	width:100%;
	margin: 0.5em 0px;
	padding:0.5em 0px;
	}

	#header {
		border:none;
		padding-bottom: 2em;
		
		}
		
 /* News section = Home page
   
    ---------------------------------------*/
	
	#banners > article
    {
	float:none;
	width:auto; 
	padding:0.5em 0;
	border-bottom:1px dotted #ccc;
	margin:0.5em 0;
    }

    #banners > article:nth-of-type(3)
    {
        border:none;
    }
    
    #banners > article:nth-of-type(1n+2) > .imgholder, #banners > article:nth-of-type(1n+2) > p:last-of-type
    {
        display:none;
    }


    #banners > article:nth-of-type(1n+2) > .info
    {
        margin-top:0;
    }
		

	#footer {
		border-top: 4px solid #333;
		}
#navigation {
	 overflow:hidden;
	
	}
#navigation li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	
}
#navigation li a {
	text-decoration: none;
	padding: 10px;
	font: 1.6em Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	border-bottom: 1px dotted #ccc;
	color: #333;
	display: block;
	clear: left;
	width:100%;
	
}
#navigation li a:hover {
	color: #fff;
	text-decoration: none;
	background: #333333;
}
}