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

/* -------------------------------------- */
				/* Browser */
/* -------------------------------------- */	
	
.ie6 {display: none;}	


/*
   ===============
--- Swatch Colors --- 
   ===============

Blues
Text blue: #90A0A9;
Strong blue: #E0E5E7;
Background blue: #00263A;
Alternative blue: #0D3144;
Accent Top Blue: #3C5968;
Header blue: #020A0D;
Dashed border blue: #3B5868;

Grays
Header links gray: #AAA;

*/

/*Global*/



body {
	background-color: #00263A;
	font-size: 14px;
	font-family: Georgia, Palatino, Times New Roman, Times, Serif;
	color: #90A0A9;
	}

/* Recovery from the reset */	
strong { color: #E0E5E7; font-weight: normal;}
em {font-style: italic;}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	padding: 20px;
	}

/* Give the headings some sizes */
h1, h2 {
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 65px;
	color: #FFF;
	letter-spacing: -4px;
	margin-top: 40px;
	}

h2 {
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 34px;
	color: #FFF;
	letter-spacing: -2px;
	margin-top: 40px;
	}

h3 {font-size: 30px;}
h4 {
	font-size: 26px;
	font-weight: normal;
	color: #FFF;
	}

h5 {
	font-size: 16px;
	font-weight: normal;
	color: #E5E5E5;
	text-transform: uppercase;
	}

h6 {
	font-size: 12px;
	font-weight: normal;
	color: #999;
	text-transform: uppercase;
	}

/* Paragraph */
p {
	padding: 20px;
	font-size: 14px;
	line-height: 1.25em;
	}
	
p.large {
	padding: 20px;
	font-size: 18px;
	line-height: 1.25em;	
	}	

p.xlarge {
	padding: 20px;
	font-size: 24px;
	line-height: 1.25em;	
	}	

p.justify {
	text-align: justify;
	}

p.white {
	color: #FFF;
	}
	
p.nobotpad {
	padding-bottom: 0px;
	}


/* Images */
img { 
	border: 5px #AAA solid;
	}
a:hover img { border: 5px #FFF solid; }

/* Lists */
ul {}
ol {}
li {}

/* Links */
a { 
	color: #AAA;
	text-decoration: none;
	cursor: pointer;
	}
	
a:hover { 
	color: #FFF;
	background-color: #000;
	}

	a.more { 
		float: right; clear: both;
		margin: 15px;
		padding: 5px;
		background-color: #000;
		color: #FFF;
		}
			
	a.more:hover { 
		background-color: #FFF;
		color: #000;
		}
	
p a {
	color: #FFF;
	text-decoration: underline;
	}	

p a:hover { 
	background-color: black;
	text-decoration: none;
	}

h4 a { color: #FFF; }
h4 a:hover, h5 a:hover, h6 a:hover {
	color: #FFF;
	background: none;
	text-decoration: underline;
	}

a.hidden {display: none;}

/* Decorative */
.accentTop {
 border-top: 1px #3C5968 solid;
 }

.accentBottom {
	border-bottom: 1px #001421 solid;
	}

.dottedBottom {
	border-bottom: 2px #3B5868 dotted;
	}

.dottedTop {
	border-bottom: 2px #3B5868 dotted;
	}







/* -------------------------------------- */
			/* Global Divs */
/* -------------------------------------- */

div#wrapper { width: 100%; }

/* Header */
div#headerOuter { 
	width: 100%;
	height: 60px;
	background-color: #020A0D;
	}

div#header {
	width: 980px;
	height: inherit;
	margin: auto;
	}

	div#header img {
		width: 240px; height: 60px;
		float: left;	clear: none;
		border: 0px;
		}

	div#header ul {
		padding: 20px;
		float: right; clear: none;
		}

	div#header ul li {
		display: inline;
		margin-left: 2px;
		margin-right: 2px;
		color: #AAA;
		}


/* Body */
div.bodyContainer {
	width: 980px;
	min-height: 200px;
	margin: auto;
	}
	
	
/* Home Elements */	
div#intro {
	width: 980px;
	margin: auto;
	}
	
	div#intro p {
		width: 760px;
		padding-top: 0px;
		font-size: 16px;
		}	
	
div#homePortfolioOuter {
	width: 100%;
	height: 300px;
	margin-top: 60px;
	background-color: #0D3144;
	}	

div#homePortfolio {
	width: 980px;
	height: inherit;
	margin: auto;
	background-image: url(../assets/images/portfolio_bg.jpg)
	}



/* Carousel */
#horizontal_carousel {
  float: left;
  width: 980px;
  height: 300px;
  position: relative;
	}

#horizontal_carousel .container {
  float: left;
  width: 980px;
  height: 300px;
  position: relative;    
  overflow: hidden;
	}

#horizontal_carousel ul {
  margin: 0;
  padding:0;
  width: 100000px;
  position: relative;
  top: 0;
  left: 0;
  height: 300px;
	}                      

#horizontal_carousel ul li {
  width: 940px;
  height: 260px;
  padding: 20px;
  list-style: none;   
  float: left;
	}

#horizontal_carousel ul li img {
	width: 530px;
	height: 250px;
	float: left; clear: none;
	}

#horizontal_carousel ul li div.info {
	float: left;
	margin-left: 20px;
	width: 380px;
	}


#horizontal_carousel ul li div.info h4 {
	width: 100%;
	padding: 0px;
	padding-top: 10px;
	}

#horizontal_carousel ul li div.info p {
	padding: 5px 0px 10px 0px;
	font-size: 14px;
	}

#horizontal_carousel ul li div.info p.technologies {
	padding: 10px 0px 10px 0px;
	color: #FFF;
	}
	


/* Carousel buttons */
#horizontal_carousel .previous_button {
  width: 20px;
  height: 20px;
  background: url(../assets/images/left.png);
	position: absolute;
	left: 580px;
	top: 245px;
  z-index: 100;
  cursor: pointer;
	}

#horizontal_carousel .previous_button_over {
  background: url(../assets/images/left_over.png);
	}

#horizontal_carousel .previous_button_disabled {
  background: url(../assets/images/left_disabled.png);
  cursor: default;
	}

#horizontal_carousel .next_button {
  width: 20px;
  height: 20px;
  background: url(../assets/images/right.png);
	position: absolute;
	left: 605px;
	top: 245px;
  z-index: 100;
  cursor: pointer;
	}

#horizontal_carousel .next_button_over {
  background: url(../assets/images/right_over.png);
	}

#horizontal_carousel .next_button_disabled {
  background: url(../assets/images/right_disabled.png);
  cursor: default;
	}




div#projects {
	width: 560px;
	float: left; clear: none;
	}

	div#projects h2 {
		margin: 20px;
		margin-top: 40px;
		margin-bottom: 0px;
		padding: 0px 0px 10px 0px;
		}

	div#projects ul li {
		width: 520px;
		margin: 10px 20px 0px 20px;
		float: left; clear: both;
		}

	div#projects h5 {
		float: left; clear: none;
		padding: 0px 0px 0px 0px;
		color: #FFF;
		}
			
			div#projects h5 a { color: #FFF; }


	div#projects h6 {
		padding: 2px 0px 10px 5px;
		float: left; clear: none;
		}

	div#projects div.summary {
		float: left; clear: both;
		margin-bottom: 10px;
		}
		
	div#projects div.summary img {
		width: 130px;
		height: auto;
		margin: 0px 10px 0px 0px; 
		float: left; clear: none;
		}

	div#projects div.summary p {
		width: 370px;
		float: left; clear: none;
		padding: 0px;
		margin: 0px;
		}	



div#blog {
	width: 400px;
	float: left; clear: none;
	}
	
	div#blog h2 {
		margin: 20px;
		margin-top: 40px;
		margin-bottom: 0px;
		padding: 0px 0px 10px 0px;
		}

	div#blog ul li {
		width: 360px;
		margin: 10px 20px 0px 20px;
		float: left; clear: both;
		}

	div#blog h5 {
		float: left; clear: none;
		padding: 0px 0px 0px 0px;
		color: #FFF;
		}

			div#blog h5 a { color: #FFF; }

	div#blog h6 {
		padding: 2px 0px 10px 5px;
		float: left; clear: none;
		}

	div#blog div.summary {
		float: left; clear: both;
		margin-bottom: 10px;
		}
		
	div#blog div.summary img {
		width: 220px;
		height: auto;
		min-height: 100px;
		margin: 0px 10px 10px 0px; 
		float: left; clear: none;
		}

	div#blog div.summary p {
		width: 100%;
		float: left; clear: none;
		padding: 0px;
		margin: 0px;
		line-height: 1.0em;
		}	








/* -------------------------------------- */
			/* Portfolio */
/* -------------------------------------- */

div#showcase {
	width: 650px;
	float: left; clear: none;
	}
	
  div#showcase img {
		margin: 10px 10px 10px 20px;
		float: left; clear: both;
		}
	
		div.portfolio img {
			width: 610px;
			height: 285px;
			}

		div.blog img {
			width: 610px;
			height: auto;
			min-height: 200px;
			}

		div.projects img {
			width: 390px;
			height: auto;
			min-height: 100px;
			}

	div#showcase h4 {
		float: left;
		padding: 20px;
		padding-right: 10px;
		padding-bottom: 0px;
		text-transform: uppercase;
		}


	div#showcase h5 {
		margin: 0px;
		padding: 0px;
		padding-top: 25px;
		text-transform: uppercase;
		float: left; clear: none;
		}

	div#showcase div.summary {
		float: left; clear: both;
		}

	div#showcase div.summary p {
		padding-bottom: 5px;
		padding-top: 5px;
		width: 620px;
		}

	div#showcase div.summary a.visit {
		margin: 10px 0px 0px 20px;
		padding: 10px 15px 10px 15px;
		background-color: #000;
		color: #FFF;
		float: left; clear: both;
		text-transform: uppercase;
		}

	div#showcase div.summary a.visit:hover {
		background-color: #FFF;
		color: #000;
		}

		
	div#showcase ul li.dottedBottom {
		width: 100%;
		float: left; clear: both;
		padding: 0px;
		margin: 0px;
		padding-bottom: 20px;
		margin-bottom: 10px;
		}









div#workingwith {
	float: left; clear: left;
	width: 100%;
	background-color: #0D3144;
	margin-top: 40px;
	}

	div#workingwith h2 {
		margin-top: 20px;
		background-color: #020A0D;
		}
		
	div#workingwith ul {
		}

	div#workingwith ul a:hover {
		background: none;
		}
	
		div#workingwith ul li {
			width: 205px;
			margin: 20px;
			display: inline;
			float: left; clear: none;
			text-align: center;
			}
			
		div#workingwith ul li img {
			border: 0px;
			width: 100px;
			height: auto;
			}

		div#workingwith ul li h5 {
			padding: 10px;
			margin-top: 15px;
			background-color: #020A0D;
			}

		div#workingwith ul a:hover h5 {
			}


		div#workingwith ul li p {
			padding-top: 5px;
			}






div#resume {
	background: #0D3144;
	width: 100%;
	float: left; clear: both;
	margin-top: 60px;
	padding-bottom: 20px;
	}

div#resume h2 {
	margin-top: 20px;
	background: #020A0D;
	}
	
	div#resume div.section {
		width: 100%;
		min-height: 50px;
		margin-top: 40px;
		float: left; clear: both;
		}

	div#resume div.title {
		width: 25%; 
		height: inherit;
		min-height: inherit;
		float: left; clear: none;
		}
		
		div#resume div.title h3 {	
			font-size: 24px;
			color: #FFF;
			font-weight: normal;
			padding-top: 0px;
			}		
		
		
		
	div#resume div.content {
		width: 75%;
		height: inherit;
		min-height: inherit;
		float: left; clear: none;
		}	

		div#resume div.content h4 {
			padding-top: 3px;
			padding-bottom: 3px;
			background-color: #90A0A9;
			color: #020A0D;
			}
		
		div#resume div.content h5 {
			padding-top: 5px;
			padding-bottom: 0px;
			}

		div#resume div.content p {
			padding: 5px 20px 20px 20px;
			}

		div#resume div.content ul {
			margin-bottom: 20px;
			}
		

		ul.skills { 
			background-color: #90A0A9;
			padding: 20px;
			}
			
		ul.skills li { 
			padding: 5px;
			padding-left: 20px;
			margin-bottom: 5px;
			background-color: #020A0D; 
			color: #FFF;
			}
		
		ul.skills h5 {
			color: #020A0D;
			padding: 0px;
			margin-bottom: 10px;
			}	

			li.xhtml { width: 90%; }
			li.css { width: 90%; }
			li.javascript { width: 50%; }
			li.xml { width: 40%; }
			li.ajax { width: 30%; }
			li.php { width: 20%; }
			li.sql { width: 15%; }
			li.rubyonrails { width: 40%; }

			li.illustrator { width: 90%; } 
			li.photoshop { width: 75%; }
			li.dreamweaver { width: 65%; } 
			li.indesign { width: 70%; } 			
			li.flash { width: 50%; }
			li.premiere { width: 55%; }			
			li.finalcut { width: 55%; }			
			li.office { width: 85%; }		
			
			

			
			
							

div#portfilioSlider {
	width: 330px;
	height: 570px; /* Can change...*/
	float: left; clear: none;
	margin-top: 10px;
	}

/* Vertical Carousel */
#vertical_carousel {
  float: left;
  width: 330px;
	height: 570px;
  position: relative;
	}

#vertical_carousel .container {
  float: left;
  width: 330px;
  height: 570px;
  position: relative;    
  overflow: hidden;
	}

#vertical_carousel ul {
  margin-left: 10px;
  padding:0;
	width: 320px;
	height: 570px;
  position: relative;
  top: 0;
  left: 0;
	}                      

#vertical_carousel ul li {
  width: 320px;
  height: 190px;
  list-style: none;   
  float: left;
  clear: both;
	}

#vertical_carousel ul li img {
	width: 310px;
	height: 145px;
	float: left; clear: none;
	}

#vertical_carousel ul li div.info {
	float: left;
	clear: both;
	width: 100%;
	height: 20px;
	padding-bottom: 5px;
	}

#vertical_carousel ul li div.info h5,
#vertical_carousel ul li div.info h6 {
	margin: 0px;
	padding: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left; 	clear: none;
	}

#vertical_carousel ul li div.info h6 {
	padding-top: 8px;
	padding-left: 5px;
	}	


/* Carousel buttons */
#vertical_carousel .previous_button {
  width: 20px;
  height: 20px;
  background: url(../assets/images/up.png);
	position: absolute;
	left: 135px;
	bottom: -30px;
  z-index: 100;
  cursor: pointer;
	}

#vertical_carousel .previous_button_over {
  background: url(../assets/images/up_over.png);
	}

#vertical_carousel .previous_button_disabled {
  background: url(../assets/images/up_disabled.png);
  cursor: default;
	}

#vertical_carousel .next_button {
  width: 20px;
  height: 20px;
  background: url(../assets/images/down.png);
	position: absolute;
	left: 165px;
	bottom: -30px;
  z-index: 100;
  cursor: pointer;
	}

#vertical_carousel .next_button_over {
  background: url(../assets/images/down_over.png);
	}

#vertical_carousel .next_button_disabled {
  background: url(../assets/images/down_disabled.png);
  cursor: default;
	}


/* -------------------------------------- */
			/* Sidebar Elements */
/* -------------------------------------- */

div#sidebar {
	width: 320px;
	min-height: 300px;
	float: right; clear: none;
	margin-top: 20px;
	}

div#sidebar div#topBox {
	width: 100%;
	background-color: #0D3144;
	float: left; clear: both;
	}

div#sidebar div#topBox h4 {
	padding-bottom: 10px;
	}

div#sidebar div#topBox p {	
	padding-top: 0px;
	}

	div#sidebar h2 {
 		width: 280px;
		font-size: 24px;
		margin: 20px;
		margin-top: 20px;
		margin-bottom: 0px;
		padding: 0px;
		float: left; clear: both;
		}

	div#sidebar ul li {
		width: 280px;
		margin: 10px 20px 0px 20px;
		float: left; clear: both;
		}

	div#sidebar h5 {
		float: left; clear: none;
		padding: 0px 0px 0px 0px;
		color: #FFF;
		}

		div#sidebar h5 a {
			color: #FFF;
			}

	div#sidebar h6 {
		padding: 2px 0px 10px 5px;
		float: left; clear: none;
		}

	div#sidebar div.summary {
		float: left; clear: both;
		margin-bottom: 10px;
		}
		
	div#sidebar div.summary img {
		width: 220px;
		height: auto;
		min-height: 100px;
		margin: 0px 10px 10px 0px; 
		float: left; clear: none;
		}

	div#sidebar div.summary p {
		float: left; clear: none;
		padding: 0px;
		margin: 0px;
		line-height: 1.0em;
		}	

	div#sidebar ul.recentListening li {
		padding: 0px;
		margin-top: 3px;
		}

/* -------------------------------------- */
			/* Footers */
/* -------------------------------------- */

div#preFooterOuter {
	width: 100%;
	height: 120px;
	float: left; clear: both;
	background-color: #020A0D;
	margin-top: 60px;
	}

div#preFooter {
	width: 980px;
	height: inherit;
	margin: auto;
	}
	
	div#preFooter h2 {
		margin: 20px;
		margin-bottom: 0px;
		padding: 0px;
		}
		
	div#preFooter p {
		padding: 5px 0px 20px 20px;
		}	
	
div#footerOuter {
	width: 100%;
	height: 80px;
	float: left; clear: both;
	background-color: #000;
	}	
	
div#footer {
	width: 980px;
	height: inherit;
	margin: auto;
	text-align: center;
	}	
	
	div#footer h4 {
		font-size: 18px;
		padding-bottom: 0px;
		color: #90A0A9;
		}
	
	div#footer p {
		color: #4F4F4F;
		padding: 5px;
		}

	div#footer p a {		
		color: #4f4f4f;
		text-decoration: underline;
		}
		
	div#footer p a:hover {		
		color: #FFF;
		}		
		
		
		
/* -------------------------------------- */
					/* Under Construction */
		/* -------------------------------------- */		
		
h1.underconstruction, p.underconstruction {
	width: 800px;
	text-align: center;
	margin: auto;
	padding: 0px;
	}		
	
h1.underconstruction {
	margin-top: 100px;
	padding-top: 20px;
	border-top: 1px #3C5968 dotted;
	}	
	
p.underconstruction {	
	font-size: 18px;
	padding-bottom: 20px;
	border-bottom: 1px #3C5968 dotted;	
	}