@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;*/
	background:#2A8195;
}

/* transition animation 1 of 1 */
#main-header:hover {
	animation: color-animation 6s ease-in-out 5;
}

@keyframes color-animation {
	0% { background:#2A8195; }
	20% { background:#48DDFF; }	
	40% { background:#4A767F; }	
	60% { background:#3AB1CC; }	
	80% { background:#2A8195; }		
}

header img {
	position:relative; /* to position hgroup to the right */
	display:block; /* gets rid of baseline area at the bottom of images that is inherint (and the default) with display:inline */

	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;		
}
			
/* transform 1 of 2 */			
header img:hover {
	-moz-transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-o-transform:scale(1.02);
	-ms-transform:scale(1.02);
	transform:scale(1.02); /* one parameter is x only */ /* makes image scale larger on hover, then back on non-hover */
	/*animation: none;*/
}

header hgroup {
	position:absolute; /* to position hgroup to the right */
	top:10px;
	left:345px;
}

/* trying to turn of the animation when hovering over the logo */
.no-animation:hover {
	animation: color-animation 0s none;
	color-animation:none;
	transition:none;
	animation:none;
}


#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;
	color:#FFFFFF;
	clear:both;	
}

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

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

#nav-collapse {
	display:block;
	color:#FFF;
	text-decoration:none; /* removes underline in desktop view */		
}

#nav-collapse:hover {
	text-decoration:underline;	
}

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

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

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

#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;
}

.cover {
	font-size: 0.875em; /* 14px / 16px */
	text-align:center;	
}

/************* 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:46%;
	float:left;	
	padding:1%;
	margin-right:2%	
}

#middle-two-column {
	background-color:#FFFC19; /* yellow */
	overflow:hidden;
	padding: 0 2% 0 2%;
}

/* END 2 COLUMN LAYOUT */
/* transition 1 of 1 */
.image-container {
	float:left; /* takes the image out of the block level flow and lets the text wrap around it. */
	margin: 0 15px 10px 0; /* puts space between image and text */
	position:relative; /* box cover will be relative to .image-container */
	overflow:hidden;  /* makes the cover disappear on mouse-out rather than briefly appearing below the image */
	width:140px;
	height:200px; /* gets rid of baseline at bottom of image due to being read like inline text */
}

.cover {
  opacity:0; /* by default, the cover plus text is not shown */
  position:absolute; /* cover positioned absolutely over .image-container */
  top:130px; /* tells where to absolute position the cover. placing here also will allow transition fade out as opposed to being placed in :hover */
  padding:10px; /* padding around text */
  width:140px; /* stretches the cover the full length of the image */
  background:rgba(255,255,255,.35); /* controls the opacity of cover element only, not the text */
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  -o-transition:1.5s;
  -ms-transition:1.5s;
  transition: 1.5s; /* slows down cover appearing and disappearing over the image */	
}

.image-container:hover .cover {
	opacity:1; /* controls the opacity of the text *and* the cover */
}

/* transform 2 of 2 */
#image2-div {
	display:block;
	width:30%;
	/*animation: image-move 10s ease;*/ /* for on-load animation only */
	float:left;	
}

#image2-div:hover {
	animation: image-move 10s ease-in-out;
}

#col2of2-text {
	width:70%;
	float:right;	
}

@-moz-keyframes image-move {
	0% { -moz-transform:translate(0px,0px); }
	50% { -moz-transform:translate(0px,325px); }
	100% { -moz-transform:translate(0px,0px); }
}

/* 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 */