@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;
	line-height:1.5;
}
	
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;	
}


	
	
/**************** 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; /* shorthand property ex: background:#ffffff url("img_tree.png") no-repeat right top; */
}

/* 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;
	padding:1%;
	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;	
}

.print {
	color:#FFF;
	float:right;
	text-decoration:none;		
}

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

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

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

#main-nav ul {
	list-style-type:none;  /* gets rid of the bullets */ /* from Portia's drop down tutorial */
	/*padding-left:10px;*/	 /* from Portia's drop down tutorial */
	/*padding-left:.625em; */ /* "" but converted to ems */ /* placed in desktop view */
	padding-left:0px;
	position:relative;
}

#main-nav li {
	/*list-style-type:none;*/	/* position based off Portia's lecture 2 example */
	/*display:block;*/	/* position based off Portia's lecture 2 example */
	/*padding:1%;*/	  /* position based off Portia's lecture 2 example */
	
	/*float:left;*/
}

/* is this the right place for this rule? */
.clear {
	clear:both;	
}

#main-nav a {
	text-decoration:none; /* removes underline in desktop view */
	display:block;
	/*padding: 10px 20px;*/ /* in drop down menu lecture */
	/*padding: .625em 1.25em .625em 1.25em;*/ /* 10px/ 16px = .625em, 20px/ 16px = 1.25em */
	color:#FFFFF0;
}

#main-nav li a {
	/*padding: 10px 20px;*/ /* in drop down menu lecture */
	padding: .625em 1.25em .625em 0em; /* 10px/ 16px = .625em, 20px/ 16px = 1.25em */	
}

#main-nav li ul li a {
	padding-left:1.25em; /* gives padding on the left side of the "a" tag without moving the whole nav to the left */
	/*padding: .625em 1.25em .625em 1.25em;	*/
}

#main-nav a:hover {
	color:black;
	background:skyblue;	
}

#main-nav ul li ul {
	position:absolute;	/* when positioning absolutely, the element will position itself with respect to the first non-static element in it's heirachy. this is why we made ul position:relative (so it wasn't static.) */
	
	/*display:none;*/	/* display property does not work well with transitions cross browser, visibility is better */
	
	visibility:hidden;
	opacity:0;
	/* by default delay the visibilty change until after the transition completes */
	transition:visibility 0s linear 0.5s, opacity 0.5s linear;
	
	padding-left:1.10%; /* pushes the list to the right of the drop down menu so that the drop down does not sit exactly below the menu item */
}

#main-nav ul li:hover ul {
	/*display:block;*/	/* display property does not work well with transitions cross browser, visibility is better */
	
	visibility:visible;
	opacity:.95;
	transition-delay:0s; /* on fade-in, don't delay the visbility change */
}

#main-nav ul li ul li {
	float:none; /* we no longer want the sub nav li elemments to float left, remove the floating so that they drop down vertically */	
	background:#778899;
}

#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. shows background in mobile view. */
	 padding-bottom:0.75em;  /* use padding for visible background of the top element. */	
}

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;	
}
/* Portia's order of CDD structure */ /*** RESETS ***/ /*** STRUCTURE ***/ /*** NAV ***/ /*** FONTS ***/
/**************** 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;
	visibility:visible;
}

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

#secondary-sidebar ul {
	list-style-position: outside;	/* this is the default and does not need to be stated */
	padding-left: 1.25em; 
	padding-right:0.75em;
	/*margin-bottom:0.5em;*/	
}

#secondary-sidebar li {
	padding-bottom: 0.3125em; */ /* 5px/ 16px is good for 16px size */	
}

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

#sub-nav ul {
	list-style-position: outside;	/* this is the default and does not need to be stated */
	padding-left: 1.25em; 
	padding-right:0.75em;
/*	margin-bottom:0.5em;	*/
}

#sub-nav li {
	padding-bottom: 0.3125em; */ /* 5px/ 16px is good for 16px size */	
}

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

footer {
	padding: 0 2.2222222222% 0 2.2222222222%; /* 20px /900px */	
}


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

#main-nav {
	/*overflow:hidden;*/
	display:block !important;
	padding: 0 2.2222222222% 0 0; /* 20px /900px */	
}

#main-nav ul li ul { 
	padding-left:1.10%; /* pushes the list to the right of the drop down menu so that the drop down does not sit exactly below the menu item */
}



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

#main-nav li a {
	/*padding: 10px 20px;*/ /* in drop down menu lecture */
	padding: .625em 1.25em .625em 1.25em; /* 10px/ 16px = .625em, 20px/ 16px = 1.25em */	
}

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