@charset "utf-8";

/***************************************
GENERAL
****************************************/
*:focus {
	outline: none;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	color: #fff;
	background: #030B0E top left repeat-x url(../images/bg_body-slice.jpg); /*almost black matches bottom of footer */
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	line-height:150%;
}
a {
	color: #7dcbd9; /* light blue */
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font-size: 21px;
	line-height: 21px;
	margin: 10px 0 20px 0;
	color: #fff; 
}
h2 {
	font-size: 18px;
	line-height: 150%;
	margin: 0 0 20px 0;
	color: #fff;
}
h3 {
	font-size:14px;
	font-weight:normal;
	margin:0;
	padding:0;
	}
h4 {
	font-size: 16px;
	line-height: 150%;
	margin: 0 0 20px 0;
	color: #fff;
	text-transform:uppercase;
}
p {
	font-size: 12px;
	margin-bottom: 12px;
	margin-top: 0;
	line-height: 150%;
}
ul {
	margin:0;
	padding:0;
	margin-bottom:12px;
	}
li{
	margin:0;
	padding:0;
	padding:7px 10px 7px 20px;
	background:url(../images/bullet.png) 5px 14px no-repeat;
	list-style:none;
	border-top: 1px solid #7dcbd9;
	}


/***************************************
HEADER
****************************************/


#header {
	width:960px;
	margin:auto;
	position: relative;
	height: 97px;
}
#logo {
	float:left;
	position:relative;
	width:220px;
	height:97px;
}
#mainnav{
	float:right;
	width:560px;
	height:31px;
	color:#fff;
	position:relative;
	margin-top:10px;
}
#mainnav ul{
	margin:0;
	padding:0;
	list-style:none;
	}
#mainnav li{
	float:right;
	margin:0;
	padding:0;
	text-align:center;
	list-style-type:none;
	cursor:pointer;
	border:none;
	background-image:none;
}
#mainnav li a {
	display:block;
	height:24px;
	padding:7px 0 0 0;
	margin:0;
	margin-right:18px;
	font-weight:bold;
	font-size:12px;
	color:#ffffff;
	text-transform:uppercase;
	text-decoration:none;
	background-image:none;
}
#navHome {width:66px;}
#navProjects {width:93px;}
#navResume {width:69px;}
#navBlog {width:69px;}
#navAbout {width:69px;}
#navContact {width:81px;}

#navHome:hover {
    background-image:url(../images/btn_home.png);
	text-decoration:none;
	}
#navProjects:hover {
	background-image:url(../images/btn_products.png);
	text-decoration:none;
	}
#navResume:hover {
	background-image:url(../images/btn_about.png);
	text-decoration:none;
	}
#navBlog:hover {
	background-image:url(../images/btn_about.png);
	text-decoration:none;
	}
#navAbout:hover {
	background-image:url(../images/btn_about.png);
	text-decoration:none;
	}
#navContact:hover {
	background-image:url(../images/btn_contact.png);
	text-decoration:none;
	}

/* STYLE TO MAKE THE NAVIGATION BUTTON "STICK" WHEN PAGE IS ACTIVE */	
body#pageHome #navHome {background:url('../images/btn_home.png') no-repeat;}
body#pageProjects #navProjects {background:url('../images/btn_products.png') no-repeat;}
body#pageResume #navResume {background:url('../images/btn_about.png') no-repeat;}
body#pageBlog #navBlog {background:url('../images/btn_about.png') no-repeat;}
body#pageAbout #navAbout {background:url('../images/btn_about.png') no-repeat;}
body#pageContact #navContact {background:url('../images/btn_contact.png') no-repeat;}

/***************************************
PAGE
****************************************/

#wrapper {
	margin:auto;
	overflow:hidden;
	position:relative;
	background: #0b3543 top left repeat-x url(../images/bg_page-slice.jpg); /*dark blue*/
	}
#page {
	width: 960px;
	position: relative;
	overflow: hidden;
	margin:auto;
	min-height:580px;
}
#content {
	margin:0 auto;
	position: relative;
	width: 925px;
	padding: 20px 18px;
}
#panel {
	width: 440px;
	float:left;
	border-top:solid 1px #fff;
	padding-top:10px;
	line-height:150%;
	}
#panel ul {
	margin:0;
	padding:0;
	margin-bottom:12px;
	}
#panel li{
	margin:0;
	padding:0;
	padding:7px 10px 7px 20px;
	background:url(../images/bullet.png) 5px 14px no-repeat;
	list-style:none;
	border-top: 1px solid #7dcbd9;
	}
.panel-margin {margin-right:42px;}

#left-col {
	width:340px;
	padding:20px 20px 20px 40px;
	float:left;
	}
#right-col {
	width:445px;
	margin:20px 40px 20px 40px;
	float:right;
	border-top:solid 1px #fff;
	}
#details {
	width:100px;
	}
.top-border {border-top:solid 1px #fff; padding-top:10px;margin-top:0;}
.right {float:right; padding:0 10px 0 20px;}
.left {float:left; padding:0 10px 0 0;}

/***************************************
SLIDER SETUP
****************************************/

#feature-container{	
	margin:0 auto;
	position:relative;
	text-align:left;
	width:925px;
	height:265px;
	background:url(../images/bg_feature.jpg) no-repeat;		
	margin-top:20px;
	}			
#feature-content{
	position:relative;
	margin-left:100px;
	padding-top:20px;
	}	
#feature-panel {
	width:380px;
	/*position:relative;
	overflow:hidden;*/
	float:right;
	padding:10px;
	}
#feature-panel h1 {
	font-size:24px;
	}
#feature-panel h2 {
	font-size:16px;
	font-weight:normal;
	line-height:150%;
	margin-bottom:16px;
	}

/***************************************
FOOTER
****************************************/
#footer-wrapper {
	margin:auto;
	overflow:hidden;
	position:relative;
	background: #0B1316 top left repeat-x url(../images/bg_footer-slice.jpg);
	clear:left;
	}
#footer {
	font-family:Arial, Helvetica, sans-serif;
	width:889px;
	margin:auto;
	position: relative;
	background:url(../images/bg_footer-slice.jpg) left top repeat-x;
	overflow:hidden;
	height:140px;
	padding:40px 18px;
}
#footer p {
	font-size: 11px;
	line-height:13px;
}
#footer h1 {
	font-size:12px;
	font-weight:bold;
	color:#fff;
	margin:0 0 15px 0;
	padding:0;
	}
#footer-panel-1 {
	width:440px;
	float:left;
	color:#ffffff;
	border-right:solid 1px #666666;
	height:140px;
	padding-right:20px;
	}
#footer a {
	text-decoration:none;
	color:#ffffff;
	}
#footer a:hover {
	color:#7dcbd9;
	text-decoration:none;
	}
#footer-panel-2 {
	width:230px;
	float:left;
	height:140px;
	color:#ffffff;
	border-right:solid 1px #666666;
	padding:0 20px;
	}
#copyright {
	color:#666;
	width:430px;
	}
#copyright a {
	text-decoration:none;
	color:#666;
	}
#copyright a:hover {
	color:#7dcbd9;
	text-decoration:none;
	}

/***************************************
ICONS
****************************************/
#socialicon {
	height:25px;
	width:25px;
	margin-left:5px;
	border:inherit;
}

#profilepic {
	width:250px;
	
}

/***************************************
TWEETS
****************************************/
#tweet li{
	margin:0;
	padding:0;
	padding:0px;
	list-style:none;
	border-top: 0px;
	background:none;
	}

#tweetcontact li{
	margin:0;
	padding:0;
	padding:0px;
	list-style:none;
	list-style-type:none;
	border-top: 0px;
	background:none;
	}