/*
Theme Name: 	Starkers
Theme URI: 		http://viewportindustries.com/products/starkers
Description: 	The totally nude Wordpress theme!
Version: 		4.0
Author: 		Elliot Jay Stocks & Keir Whitaker
Author URI: 	http://viewportindustries.com
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,				{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; font-family:'Roboto',Arial, sans-serif;font-size:17px; letter-spacing:1px;line-height:1.3em;/* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:lightblue; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }


#master { width: 100%; margin:0 auto; border-left: 1px solid rgb(150,150,150);border-right:1px rgb(150,150,150);}

header:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  
  display: block;
  background: radial-gradient(rgba(0,0,0,0) 35%,rgba(0,0,0,0.4) 36%),radial-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,0.4) 36%),url(frontimage5.jpg);	
  background-size: 2px 2px, 2px 2px, 100%;
  background-repeat: repeat, repeat, no-repeat;
  max-width: 100%;
  height: 550px;
  -webkit-filter: grayscale(0%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(50%);
  transition: 1.3s;
}



 @-moz-document url-prefix() {
 header:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  
  display: block;
  background: url(frontimage5.jpg);	
  background-size: 100%;
  background-repeat: no-repeat;
  max-width: 100%;
  height: 500px;
  -webkit-filter: grayscale(70%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(70%);
  transition: 1.3s;
}
}


@media screen and (max-width:700px)
{
header:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  
  display: block;
  background: radial-gradient(rgba(0,0,0,0) 35%,rgba(0,0,0,0.4) 36%),radial-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,0.4) 36%),url(frontimage5.jpg);	
  background-size: 2px 2px, 2px 2px, 100%;
  background-repeat: repeat, repeat, no-repeat;
  max-width: 100%;
  height: 200px;
  -webkit-filter: grayscale(30%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(50%);
  transition: 1.3s;
}	
}
@media screen and (max-device-width:700px)
{
	.tutorial3Aheading {height:100px;}
	.tutorial3Alogos {height:500px; margin-left:35%; margin-right:35%;}
	.tutorial3Alogos aside {float:right; width:100%; height:100px;}
	.people {margin-left:10%; margin-right:30%; height:300px;}
	.tutorial3Aprogram {height:500px; margin-left:5%;}
}
@media screen and (min-device-width:700.1px) and (max-device-width:800px){
	.tutorial3Aheading {height:150px;}
	.tutorial3Alogos {height:300px;}
	.tutorial3Alogos aside {float: left; width: 30%; height:100px;}
	.people {margin-left:15%; }
	.tutorial3Aprogram {height:400px; width:80%; }
}

@media screen and (min-width:800.1px) and (max-width:1400px) {
	.tutorial3Alogos {height:100px; margin-left:10%;}
	.tutorial3Alogos aside {float: left; width: 20%;}
	.people {margin-left:27%;}
	.tutorial3Aprogram {height:400px; width:1100px;}
}
@media screen and (min-width:1400.1px) {
	.tutorial3Alogos {height:100px; margin-left:10%;}
	.tutorial3Alogos aside {float: left; width: 20%;}
	.people {margin-left:35%; width:1400;}
	.tutorial3Aprogram {height:400px; width:1400px; margin-left:5%;}
}

@media screen and (max-width:700px)
{
	header { width: 100%; height: 100px; background: rgba(0,0,0,0.4); padding: 1px 0;  text-transform: uppercase;}
	nav { font-size:10px;float: right; margin-left: 5px; text-transform:uppercase; }
	nav li { display: inline; margin-right: 1px; letter-spacing:0.1px; }
	nav li a { color: rgb(255,255,255); text-decoration: none; }
	nav li a:hover { color: rgb(150,150,150); text-decoration: underline; }
	nav ul ul{display:none;}
	nav ul li:hover > ul{display:block;}
	section.introduction { width: 100%; height: 200px;   padding-top: 150px; padding-bottom: 7px; font-family: 'Roboto', sans-serif;text-align:center;}
	.introductioncontent { width: 100%;   color: rgb(0,0,0);}
	.introductioncontent h1 { text-transform:uppercase ;font-size: 15px; line-height: 1em ;font-weight:normal;  letter-spacing:1px; }
	.introductioncontent p { font-size:13px; word-spacing:1px; letter-spacing:1px; }

}
@media screen and (min-width:700.1px) and (max-width:800px){
	section.introduction { width: 100%; height: 400px;   padding-top: 20px;; padding-bottom: 70px; font-family: 'Roboto', sans-serif;}
	.introductioncontent { width: 100%; float: left;   text-shadow: 4px 4px 5px rgba(0,0,0,0.75); color: rgb(255,255,255)}
	.introductioncontent h1 { text-transform:uppercase ;font-size: 30px; line-height: 2em ;font-weight:normal;  letter-spacing:3px; }
	.introductioncontent p {  font-size:20px; word-spacing:3px; letter-spacing:1px; }
}
@media screen and (max-width:700px)
{
	section.conferencedesc{text-align:justify;font-size:15px;clear:both;width:80%;height:350px;border-top:1px solid;border-bottom:1px solid;margin-left:5px;padding-left:20px;padding-top:30px;padding-bottom:1px;}
}

@media screen and (min-width:700.1px){


section.news2{width:100%;display: block;border-top:1px solid;border-bottom:1px solid;padding-top:10px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:30px;margin-bottom:35px;margin-left:15px;margin-right:15px;margin-top: 0px;}
	.news2:before {content: ''; display: block;}
	.news2:after {content: '';  display: table; clear: both;}
	.newslist {width: 35%;padding:0px;float: left;min-height: 1em;border: 0;display: block;margin: 0;}	
	.importantdates{width: 55%;margin-left:9%; padding:0px;float: left;min-height: 1em;border: 0;display: block;}	
	.newslist a:link {color:#ff0000;}
	.newslist a:visited {color:#0000ff;}
	.newslist a:hover {background:lightblue;}



section.venue{width:100%;height:800px;border-bottom:1px solid rgb(200,200,200); overflow:auto;margin-top:-30px;}
	.venueheader{background:url(venue.jpg);width:100%;height:100px;text-transform:uppercase;text-align:center; color:white;font-size:35px; padding-top:100px;}
	.venueplace{float:right;width: 60%;height:500px;}
	.venueplace img{width:100%;height:400px;}
	.venuemap{float:left;width: 40%;height:500px;}
	.venuecontent{width:50%;height:100px;clear:both;margin-left:30%;margin-right:10%;margin-top: 10px ;}
	.venuecontent h2{margin-top:50px;}
}
@media screen and (max-width:700px)
{
section.news2{width:85%;display: block;border-top:1px solid;border-bottom:1px solid;padding-top:10px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:30px;margin-bottom:35px;margin-left:15px;margin-right:15px;margin-top: 0px;}
	.news2:before {content: ''; display: block;}
	.news2:after {content: '';  display: table; clear: both;}
	.newslist {width: 100%;margin-left:5px;padding:0px;float: left;min-height: 1em;border: 0;display: block;margin: 0;}	
	.importantdates{width: 100%;margin-left:5px; padding:0px;float: left;min-height: 1em;border: 0;display: block;}	
	.newslist a:link {color:#ff0000;}
	.newslist a:visited {color:#0000ff;}
	.newslist a:hover {background:lightblue;}
		
	
	section.venue{width:100%;height:1200px;border-bottom:1px solid rgb(200,200,200);}
		.venueheader{background:url(venue.jpg);width:100%;height:40px;text-transform:uppercase;text-align:center; color:white;font-size:25px; padding-top:20px;}
		.venueplace{width: 100%;height:100px;}
		.venueplace img{width:100%;}
		.venuemap{width: 100%;height:400px;}
		.venuecontent{font-size:15px;width:100%;height:200px;clear:both;margin-left:20px;padding-right:100px;}
		.venuecontent h2{font-size:18px;padding-top:20px;}
	.pagecontent{ width:70%;margin-left:15%;font-size:15px;}
	.pagecontent h2{text-align:center; text-transform:capitalize;font-size:18px;padding-top:20px; padding-bottom:20px; border-bottom: 1px solid rgb(200,200,200)}
	
	section.sponsors{ width: 60%; height: 600px;  margin: 0px auto 5px; padding: 5px 0; }
	section.sponsors h2 { text-align: center;text-transform:uppercase}
	section.sponsors aside{ width: 200px; height: 20px; float:left; text-align: center; margin-left: 20px; padding-top:20px}
	.sponsor1 img { width: 90%; height: auto;  margin-bottom:-30px}
	.sponsor2 img { width: 40%; height: auto;  margin-bottom:-30px}
	.sponsor3 img { width: 30%; height: auto;  margin-bottom:-30px}
	.sponsor img { width: 30%; height: auto;  margin-bottom:-30px}
	.sponsorGold   img { width: 30%; max-width: 400px; max-height: 60px;  margin-bottom: -30px}
	.sponsorSilver img { width: 25%; max-width: 300px; max-height: 50px;  margin-bottom: -30px}
	.sponsorRegular img { width: 25%; max-width: 300px; max-height: 50px;  margin-bottom: -30px}

}



@media screen and (min-width:700.1px){
header { width: 100%; height: 60px; background: rgba(0,0,0,0.4); padding: 5px 0;  text-transform: uppercase;}
	nav { float: right; margin-left: 10px; text-transform:uppercase;}
	nav li { display: inline; margin-right: 10px; font-weight: bold; font-size: 13px; letter-spacing:1px;}
	nav li a { color: rgb(255,255,255); text-decoration: none; }
	nav li a:hover { color: rgb(150,150,150); text-decoration: underline; }
	nav ul ul{display:none;}
	nav ul li:hover > ul{display:block;}


section.introduction { width: 100%; height: 500px;   padding-top: 20px; padding-bottom: 70px; }
	.introductioncontent { width: 100%; float: left; padding-left:100px; padding-top: 10px; text-shadow: 4px 4px 5px rgba(0,0,0,0.75); color: rgb(255,255,255)}
	.introductioncontent h1 { text-transform:uppercase ;font-size: 55px; line-height: 2em ;font-weight:normal; margin-bottom: -10px; letter-spacing:3px; }
	.introductioncontent p { margin-bottom: 50px; font-size:18px; word-spacing:9px; letter-spacing:2.5px; margin-bottom: 10px;}



section.conferencedesc{width:70%;min-height:110px;border-top:1px solid;border-bottom:1px solid;margin-left:120px;padding-left:10%;padding-top:30px;padding-bottom:30px;margin-bottom:40px;vertical-align:middle;}




.pagecontent, .postcontent{ width:100%;padding-bottom:70px}
.postcontenttext{padding-left:15%;padding-right:15%}
.pagecontent h2{text-align:center; text-transform:capitalize;font-size:35px;padding-top:20px; padding-bottom:20px; border-bottom: 1px solid rgb(200,200,200)}

section.sponsors{ width: 70%; height: 1900px;  margin: 35px auto 5px; padding: 5px 0; }
	section.sponsors h2 {  text-align: center;text-transform:uppercase; font-size:40px;}
	section.sponsors aside{margin-top:10px; width: 100%; height: 100px; float:left; text-align: center; margin-left: 20px; padding-top: 5px;}
	.sponsor1 img { width: 70%; height: auto;  margin-bottom:-30px}
	.sponsor2 img { width: auto; height: 70%;  margin-bottom:-30px}
	.sponsor3 img { width: 112px; height: 112px;  margin-bottom:-30px}
	.sponsor img { width: 30%; height: auto;  margin-bottom:-30px}
	.sponsorGold   img { max-width: 300px; max-height: 100px;  margin-bottom: -30px;}
	.sponsorSilver img { max-width: 300px; max-height: 80px;  margin-bottom: -30px}
	.sponsorRegular img { max-width: 270px; max-height: 70px;  margin-bottom: -30px}


#siteloop {background:grey;margin:0 40px; width:40%}
#siteloop article {padding-bottom:20px; padding-left:10px; padding-right:10px;}
#siteloop article h2 a {text-decoration:none; font-size:20px;color:rgb(0,0,0);}
#section.navigation { width: 100%; height: 60px; background: rgb(20, 31, 51); padding: 5px 0;  text-transform: uppercase; opacity: 0.9;  }
}
@media screen and (min-width:700.1px){
footer { width: 100%; height: 60px; background: rgb(200,200,200); padding: 5px 0; text-align: center; }
section.navigation { width: 100%; height: 60px; background: rgb(20, 31, 51); padding: 5px 0;  text-transform: uppercase; opacity: 0.9;  }
.introductionReplacement {color: rgb(255,255,255);padding-left:250px;font-weight: bold;padding-top:20px;text-align:left}

}

@media screen and (max-width:700px){
footer { font-size:16px; width: 100%; height: 70px; background: rgb(200,200,200); padding: 5px 0; text-align: center; }
section.navigation { width: 100%; height: 220px; background: rgb(20, 31, 51); padding: 5px 0;  text-transform: uppercase; opacity: 0.9;  }
.introductionReplacement {color: rgb(255,255,255);padding-left:15px;font-size:25px;font-weight:bold;padding-top:100px;text-align:center; text-decoration: underline;}

}


#logo {width:200px;height:50px;float:left}
.Menu ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.Menu ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.Menu ul li:hover {
  color:rgba(0,0,0,0.4);
}
.Menu ul li ul {
  padding: 0;
  position: absolute;
  background:rgba(0,0,0,0.4)
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0.2;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.Menu ul li ul li { 
  background: rgba(100,100,100,0.7); 
  display: block; 
  text-shadow: 0 -1px 0 #000;
}
.Menu ul li ul li:hover {  background:rgba(100,100,100,0.2); }
.Menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.Menu ul li a{
text-decoration:none;
}

.button {float:right; background:rgb(220,220,220); width:160px; height:50px;border-radius:10px;}


.navigation nav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.navigation nav ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.navigation nav ul li a
{
 text-decoration: none;
}
.navigation nav ul li ul {
  padding: 0;
  position: absolute;
  background:rgba(0,0,0,0.4)
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0.2;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;

}
.navigation nav ul li ul li { 
  background: rgb(20, 31, 51); 
  display: block; 
  text-shadow: 0 -1px 0 #000;

}
.navigation nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:800px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}