@charset "UTF-8";
/* CSS Document */
/* MOBILE VIEW (MOBILE UP) */

/******************* DEVELOPMENT ONLY **************/

/*div, header, nav, aside, footer {
	border: 1px solid red;	
}*/

/******************* RESETS ***********************/
* {
	margin:0;
	padding:0;
	border:0;
	font-size: 100%; /* tutorial says to do this in the body */
	font:inherit;
	vertical-align:baseline;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;	
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
	
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;	
}

/* is this the right place for this rule? */
.clear {
	clear:both;	
}
	
	
/**************** STRUCTURE ********************/
body {
	background-color: #333333;	
}

#page-wrapper {
	width:100%; /* 95% of whatever the viewport width is */
	/* margin:1% auto;	*/
}

#main-header {
	background-color: #2A8195;
}

#middle {
	background-color:#FFFC19; /* yellow */
	overflow:hidden;
	/* padding: 0 2.2222222222% 0 2.2222222222%; */ /* 20px /900px */
}


#col1of1,
#col1of2,
#col2of2,
#col1of4,
#col2of4,
#col3of4,
#col4of4 {
	width:100%;
	padding:2%;	
}

/* FOR 1 COLUMN LAYOUT */
#col1of1 {
	background-color:skyblue;
}

/* END 1 COLUMN LAYOUT */

/* FOR 2 COLUMN LAYOUT */
#col1of2 {
		background-color:skyblue;
}

#col2of2 {
		background-color:cyan;
}

/* END 2 COLUMN LAYOUT */	

/* FOR 3 COLUMN LAYOUT */
#main-container {
	background-color:#619AA7;
	width:100%;
}

#primary-content {
	background-color:#FF6600; /* orange */
	padding:1%;
	float:none;
}

#secondary-sidebar {
	background-color:#7F4A26;
	float:none;
}

.none {
	display:none;	
}

/* END 3 COLUMN LAYOUT */	

/* FOR 4 COLUMN LAYOUT */
#col1of4 {
		background-color:skyblue;
}
	
#col2of4 {
		background-color:cyan;
}

#col3of4 {
		background-color:deepskyblue;
}

#col4of4 {
		background-color:darkcyan;
}

/* END 4 COLUMN LAYOUT */

#main-footer {
	background-color:#625B12;
	clear:both;	
}

/*************** NAV ******************/

#main-nav {
	background-color:#CFCFCF;
	/* Nav Collapse */
	display:none;
}

#nav-collapse {
	display:block;
	color:#FFF;		
}

#main-nav li {
	list-style-type:none;
	display:block;
	padding:1%;	
}

#main-nav li a {
	text-decoration:none;
}

#sub-nav {
	background-color:#00D6F8;
	width:100%;
	float:none; 	
}

/************** FONTS ****************/

h1, h2, h3 {
	color:#FFF;	
}

h1 {
	font-size:1.5em; /* 24px / 16px */
	margin-top:.4em;
	margin-bottom:.2em;
}

h2 {
	font-size:1.25em; /* 20px /16px */	
	margin-bottom:.4em;
}

h3 {
	font-size:1.125em; /* 18px / 16px */
	margin-bottom:.6em;
}

#main-header h1 {
	font-size:2.25em; /*36px / 16px */
}

#main-header h2 {
	font-style:italic;
}

p, ol, ul, dl {
	margin-bottom:0.5em; /* this adds space below but between the list items */
	/* padding-bottom:1em; */ /* why not margon-bottom? use padding for visible background*/	
}

p {
	line-height:1.5em;
}

/************* MEDIA QUERIES **************/

/* TABLET PORTRAIT 600/16px = 37.5em */
@media all and (min-width:37.5em) {
	
body {
	background: url(../images/skulls.png) repeat;	
}
	
/**************** STRUCTURE 600px TABLET ****************/

#page-wrapper {
width:95%; /* 95% of whatever the viewport width is */
margin:1% auto;	
}

#middle {
background-color:#FFFC19; /* yellow */
overflow:hidden;
padding: 0 2.2222222222% 0 2.2222222222%; /* 20px /900px */
}

/* FOR 1 COLUMN LAYOUT */
#col1of1 {
	width:48%;
	margin:auto;
}

/* END 1 COLUMN LAYOUT */

/* FOR 2 COLUMN LAYOUT */
#col1of2,
#col2of2 {
	width:48%;
	float:left;	
	padding:1%;	
}

/* END 2 COLUMN LAYOUT */

/* FOR 3 COLUMN LAYOUT */
#main-container {
width:75.5555555556%; /* 680px / 900px */
float:right;
}

#primary-content {
	width:67.6470588235%; /* 460px/ 680px */ /*20 + 200 + 460 + 200 + 20 = 900 */
	float:left;
	padding:1%;
	/*margin:1%;*/ 
}

#secondary-sidebar {
	width:29.4117647059%; /* 200 / 680px */	
	float:right;
}

#sub-nav {
background-color:#00D6F8;
width:22.2222222222%; /* 200 / 900px */	
float:left;	
}

/* END 3 COLUMN LAYOUT */

/* FOR 4 COLUMN LAYOUT */
#col1of4,
#col2of4,
#col3of4,
#col4of4 {
	width:24%;
	float:left;
	padding:1%;	
}

/* END 4 COLUMN LAYOUT */

/* Portia ? */
/*.col1of2 { 
	width:48%;
	float:left;	
}*/	

/*#sub-nav {
	float:left;
	width:48%;	
}*/

/*#main-container {
	float:left;	
}*/


/**************** NAV 600px TABLET ****************/

#main-nav {
	overflow:hidden;
	display:block !important;	
}

#main-nav li {
	float:left;
	width:16%;
	border-top:none;
	display:block; /* why do I need this here and above? */	
}

#nav-collapse {
	display:none;
}

}

/* TABLET LANDSCAPE 860/16px = 53.75em*/

/* DESKTOP ~940/16px*/
@media all and (min-width:57.75em) {


	
}

/* WIDE DESKTOP 1300/16px = 81.25em */

