/* 
Ultimate2 CSS stylesheet for HarrisWeb Creative 2015-04
*/


/*** GLOBAL  ***/
html,body{height:100%; min-height:100%}



body {
	font-family: 'Numans', sans-serif;
	font-weight: normal;
	font-size:15px;
	line-height:1.5em;
	margin:0 auto;
	padding:0;
	color:#fff;
	background-color:#ffffff;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

* {	margin:0; padding:0;}

.clr{clear:both}


/*** END OF GLOBAL  ***/

/*** DEFAULT ELEMENT STYLES ***/
/* heading */
h1, h2, h3{ font-family: 'Open Sans', sans-serif; font-weight:400; color:#ccc}
h4, h5, h6{ font-family: 'Open Sans', sans-serif; font-weight:400; color:#ccc;}
h1 {font-size:1.86em; line-height: 2em}
h2 {font-size:1.43em; line-height: 1.75em}
h3 {font-size:1.2em;line-height: 1.4em}
h4 {font-size:.93em;line-height: 1em}
h5, h6 {font-size:0.86em;line-height: .95em}


/* links */
a, a:visited {color:#ffffff; text-decoration:none;}
a:hover{color:#ffffff; text-decoration:underline;}
a img{border:none}




/* lists, blockquotes and paragraphs */
blockquote{font-size:1.3em;font-style:italic;  width:70%;background-color:#000;border-left:solid 5px #117733;margin:3% 10%;padding:3% 5%}
ul{margin-left:30px}


/* code */
.code {
	font-family:Verdana, Arial;
	letter-spacing:1px;
	margin:25px 0 25px 0px;
	display:block;
	font-size:0.9em;
	border-left:4px solid #e0e0e0;
	padding:15px 10px;
}

/*** END OF DEFAULT ELEMENT STYLES ***/

/*** CLASSES THAT MANIPULATE ***/
.i{font-style:italic}
.b{font-weight:bold}
.u{text-decoration:underline}
.c{text-align:center}
.fl{float:left; }
.fr{float:right;}
.fc{width:50%;margin-left:25%;}
.big{font-size:300%;line-height:150%}
.big200{font-size:200%;line-height:100%}
.big150{font-size:150%;line-height:125%}
.bshadow{border:4px solid #000;box-shadow:15px 15px 15px #000;border-radius:30px;margin:0px 30px 30px 0px;}
.bshadow p{margin: 2% 4% 1% 4% }
.bshadow ul li{margin: 0% 4% 1% 5% }
.tshadow{text-shadow:5px 5px 15px #000;}
.imgleft{float:left; margin-right:2%; margin-top:5px;}
.imgborder{padding:0px; margin:5px 0px;}
.imgright{float:right; margin-left:2%;}
.imgcenter{ display:block; margin:10px auto; }
/*** END OF CLASSES THAT MANIPULATE ***/




    
/*** CONTAINERS ***/
/*** background ***/
#wrapper{width:100%;height:100%; border: solid 0px #c0c0c0;  
 background:url(../images/background.jpg) #000 no-repeat fixed top left;  background-size:cover; overflow:hidden}
header{position:fixed; top:0; left:0;  width:50%;height:50px; border-bottom: solid 0px #ccc; z-index:+100;  }
main{ float:right; width:41%; height:100%; padding:10px 3% 50px 5%; min-width:400px; background:rgba(0,0,0,0.7); overflow:scroll; margin:0 ;border: solid 0px #fff }

.container{clear:both; width:100%; height:auto; padding:0; margin:50px 0 50px 0;}
.indent{width:95%; margin-left:4%;  text-align:left}
.indent h3,h4{text-align:left}
#name{ margin-top:0; text-align:left}
#tagline{text-align:center}
#headshot{width:35%; float:left}
#summary{ width: 60%;  float:left; padding: 0px 0 0px 4%;}
#skills{}
#skills p{float:left; background:rgba(0,0,0,0.4); padding:0.5em 2%; margin: 0.5em 1%;}
.results{float:left; width:28%; height:10em; padding:1em 1%;margin:0 1%;background:rgba(0,0,0,0.5); border: solid 0px #000; border-radius:35px }
.results h2{text-align:center; font-size:4em; line-height:1em}
.results h3{text-align:center; font-size:1em}

.experience{margin-bottom:9px;border:solid 0px #fff; padding:0.5em 2%; background:rgba(0,0,0,0.4)}
.experienceinner{display:none;font-size:.9em; margin-bottom: 15px;}
.expand{float:right; font-size:4em;padding:0.25em; cursor: pointer;}

#recognition{margin-left:40px}
/*** NAVIGATION ***/

#menu{width:90%; height:100%; margin:10px auto; border: solid 0px blue}
#myslidemenu ul li a{font-family: 'Open Sans', sans-serif;  font-weight:400;background:rgba(0,0,0,0.3); color:#fff; margin:0 10px; font-size:1.7em}
#myslidemenu ul li a:hover{background:rgba(0,0,0,0.7); text-shadow:1px 1px 3px #ffff00;}

#myslidemenu ul {display:table; margin:auto; height:100%; border: solid 0px yellow}
.active {border-top: solid 2px #000;  }


/**** RESPONSIVE NAVIGATION ****/
#mymobilemenu{position:absolute; top:0; left:0; display:none;z-index:+5}
#open{margin-top:8px}
#mymobilemenu ul li a{padding-left:10px}


/**** FOOTER ****/
#bottom{width:100%; height: 200px}



/*** END OF CONTAINERS ***/

/*** START MEDIA QUERIES ***/


@media only screen and (max-width: 1280px) {   
	body{font-size:14px}
	#myslidemenu ul li a{font-size: 1.3em}
	.results h2{ font-size:3em; }
	
}

@media only screen and (max-width: 800px) {  
	header{width:100%; background:#000}	
	main{padding-top:50px}
	#myslidemenu ul li a{margin:0 2px;  }
	
}
/*Styles for screen 640px and lower*/
@media only screen and (max-width: 640px) {
	#name{text-align:center}
	#headshot{float:none; width:80%; display:block; margin:10px auto}
	#summary{width:90%; padding:5%}	
	.results h2{ font-size:2em; }
}  	


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 410px) {
		main{min-width:300px;width:95%}
	

}