@charset "UTF-8";
/* CSS Document */

@charset "utf-8";
/* CSS for tdstorm.com */

/*
	RESET STYLES 
	http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 125%;
	color: black;
	background: white;
	-webkit-font-smoothing: antialiased;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* *************************************** */


html {
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'charterregular', Georgia, "Times New Roman", sans-serif;
}

strong {
	font-weight: bold;
}

.clear {clear:both}

#container {
	width: 6000px;
	height: 4000px;
}


/** PAGE POSITIONING **/

.positioning {
	position: absolute;
	width: 1900px;
	height: 1200px;
}
/* former dimensions were 1200x800 */
	#start {
	top: 0px;
	left: 0px;
	background-color: #fff;
	background-image: url(../images/sometimes.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	}
	
	#recs {
		top: 1280px; /* used to be 850*/
		left: 0px;
		background-color: #fff;
		background-image: url(../images/recs.jpg);
		background-repeat: repeat-y;
	}
	
	#skill {
		top: 1280px;
		left: 2000px; /* used to be 1250 */
		background-image: url(../images/skill.jpg);
	}
		
		
	#else {
		top: 0px;
		left: 2000px;
		background-color: #fff;
		background-image: url(../images/else.jpg);
		background-repeat: repeat-y;
	}
		
	#experience {
		top: 0px;
		left: 4000px; /* used to be 2500 */
		background-color: #fff;
		background-image: url(../images/work.jpg);
		background-repeat: repeat-y;
	}
		
	#work {
		top: 1280px;
		left: 4000px;
		background-color: #fff;
		background-image: url(../images/experience.jpg);
		background-repeat: repeat-y;
	}


/* Formatting inside of text boxes on each page   */
.inside {
	margin: 30px 40px;
	
}
	.inside h1 {font-weight: bold;
				font-size: 164%;
				margin-top: 5px;
				margin-bottom: 20px;
	}
	.inside h2 {
		font:Charter Roman, Georgia, "Times New Roman", sans-serif;
		font-weight: bold;
		font-size: 145%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.inside h3 {
		font:Charter Roman, Georgia, "Times New Roman", sans-serif;
		font-weight: bold;
		font-size: 118%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.inside .text {
	font-size: 22px;
	color: #FFF;
	text-align: left;
	line-height: 135%;
	position: absolute;
	left: 400px;
	width: 60vw;
	height: 600px;
	overflow:scroll;
	}
	
#skill .inside .text {color: #000000; }
#experience .inside .text {color: #000;}
#recs .inside .text {color:black}
#work .inside .text {color:black}
/*used to be
	font-size: 22px;
	color: #FFF;
	text-align: left;
	line-height: 22px;

	position: absolute;
	left: 415px;
	width: 60vw;
	
	height: 500px;
	overflow:scroll;
	padding-right: 15px;
	*/

/** NAVIGATION BUTTONS **/

ul.navigation {
	float: left;
	width: 350px; /**was400**/
	padding: .3em;
	/** text-align: right;**/
}

ul.navigation li {
	display: block;
}

#start ul.navigation { margin: 0 0; float: none; }

a.navigator {
	cursor: pointer;
	display: block;
	width: 350px; 
	font-size: 24px;
	font-family: Cochin;
	font-weight:bold;
	text-align: left;
	margin-left: 5px;
	padding: 5px;

}

	#start .navigator { color: black; background-color: none; }
	#skill .navigator { color: #89aac2; background-color: none; }
	#experience .navigator { color: #fff; background-color: none; }
	#recs .navigator { color: #354a20; background-color: none; }
 	#work .navigator { color: #6a4419; background-color: none; }
/*	#else .navigator { color: #000; background-color: none; }
	
	#start .present .navigator,
	#experience .present .navigator,
	#recs .present .navigator,
	#work .present .navigator,
	#else .present .navigator,
	#skill .present .navigator {color: #fff; 
								font-weight:bolder; 
								}*/
#skill .present .navigator { color: #574116; font-weight: 900; font-size: 28px;} 
#experience .present .navigator { color: #000; font-weight: 900; font-size: 28px;}
#recs .present .navigator { color: #a27631; font-weight: 900; font-size: 28px;}
#work .present .navigator { color: #fff; font-weight: 900; font-size: 28px;}
#else .present .navigator { color: #fff; font-weight: 900; font-size: 28px;}


	/*for the experience page
	#box_1 { 
	float: left;
	width: 47%;
	height: 500px;
	overflow:scroll;
	}
	

	#box_2 { 
	float: right;
	width: 48%;
	height: 500px;
	overflow:scroll;
	} */
	
	ul.experience {
		list-style: circle;
	}
	
	blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
} 
	
	/** LINKS **/

a {
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: #FFF;
}
	
	/**#recs a {
		color: #fdb3de;
		background-color: #ca117d;
	}
	
	#else a {
		color: #dcffab;
		background-color: #70b212;
	}
	
	#work a {
		color: #dfaef9;
		background-color: #570184;
	}
	**/
	#start a:hover {
		color:white;
	}
	
	#skill a:hover {
		color: #b67747 ;
		}
	
	#experience a:hover {
		color: #336633 ;
		}
		
	#recs a:hover {
		color: #879846 ;
		}
		
	#work a:hover {
		color: #000 ;
		}
	
	#else a:hover {
		color: #bbbbac ;
		}
	
	.footer a:hover{
		color: #3C6;
		}
		
		
/* attempt to get cute with fly-by:		
.portrait {
background-image: url(../images/portrait.gif);
width: 400px;
height: 400px;
margin-left: 200px; 
margin-top: 200px;  

}		*/
		
	
	/*begin CSS accordion styling; the tutorial for this markup is here: http://www.ajaxshake.com/plugin/EN/1056/53d8efde/css3-accordion-menu-css3acordion.html*/
	
	
	.ac-container{
	
	margin: 10px auto 20px auto;
	text-align: left;
}
.ac-container label{
	font:Charter Roman, Georgia, "Times New Roman", sans-serif;
	font-weight: bold;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #000;
	font-size: 126%;
}
.ac-container label:hover{
	text-decoration: underline;
	
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	
	font-size: 145%
	
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
}
.ac-container input:checked + label:hover:after{

}
.ac-container input{
	display: none;
}
.ac-container article{
	
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	color: #fff;
	line-height: 135%;
	font-size: 22px;
	padding: 20px;
/*	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);*/
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
	height: 160px;
}
.ac-container input:checked ~ article.ac-medium{
	height: 200px;
}
.ac-container input:checked ~ article.ac-large{
	height: 250px;
}
.ac-container input:checked ~ article.ac-giant{
	height: 300px;
}
.ac-container input:checked ~ article.ac-xgiant{
	height: 350px;
}


/*end CSS accordion styling*/
	
	/*
	.ac-container{
	
	margin: 10px auto 30px auto;
	text-align: left;
}
.ac-container label{
	font-family: 'charterregular', Georgia, "Times New Roman", sans-serif;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #000;
	opacity: 0.5;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 135%;
	font-size: 118%;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
	background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #cd9280;
	color: #fff;
	font-weight: bold;
	opacity: 0.9;
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(../images/arrow_down.png) no-repeat center center;	
}
.ac-container input:checked + label:hover:after{
	background-image: url(../images/arrow_up.png);
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: rgba(255, 255, 255, 0.2);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	color: #000;
	line-height: 120%;
	font-size: 22px;
	padding: 20px;

}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
	height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
	height: 180px;
}
.ac-container input:checked ~ article.ac-large{
	height: 230px;
}
	
	
	*/


/* for the recs page*/

		
	.profile {
		display: block;
		float: left;
		width: 88px;
		height: 250px;
		background-image: url(../images/pf.jpg);
		background-repeat: no-repeat;
		margin-right: 20px;
		margin-bottom: 10px;
		border: 10px solid #ca117d;
	}
	
	.inside .index {
		background-image: url(../images/title.gif);
		width: 404px;
		height: 147px;
		display: block;
		clear: both;
		margin: 0px 0px;
		text-indent: -999em;
	}


	
/** TITLES **/

.title {
	background-repeat: no-repeat;
	font-family: Charter Roman, Georgia, "Times New Roman", sans-serif;
	font-size: 50px;
	padding-bottom: 25px;
	letter-spacing: -5px;
}

	#else .title {
		color: #5b9804;
	}

	#recs .title {
		color: #fe7dc9;
	}
	
	#experience .title {
		color: #ffcc00;
	}
	
	#work .title {
		color: #bc5aee;
	}
	
	#skill .title {
		color: #0072c9;
	}
	



/** PORTFOLIO 

.portfolio-item {
	display: block;
	float: left;
	width: 135px;
	height: 185px;
	cursor: pointer;
	margin-right: 5px;
}

.print-item {
	display: block;
	float: left;
	width: 116px;
	height: 132px;
	cursor: pointer;
	margin-right: 5px;
}

**/
	
/** SHOWCASE 

.strip {
	padding-top: 20px;
}

.showcase {
	font-size: 11px;
	padding: 20px;
	color: #FFF;
	line-height: 18px;
}

	#experience .showcase { background-color: #d06c07; }
	#skill .showcase { background-color: #0085d3; }


	#experience .showcasename { color: #fee097;}
	#skill .showcasename { color: #9ddbff;}

.showcase img {
	border: 5px solid #FFF;
	margin: 15px auto;
	margin-bottom: 0px;
	display: block;
}

.close-web, .close-print {
	float:right;
	display: block;
	font-weight: bold;
	cursor: pointer;
	font-size: 9px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	background-color: #000;
	padding: 1px 6px;
	margin-left: 4px;
	margin-bottom: 4px;
}**/

.footer {
	position:fixed;
	bottom: 0;
	width: 100%;
	background: #fff;
	opacity: 0.7;
	padding: 5px 30px 5px;
	font-size:12px;
}