/*   

	Stylesheet: 			TimKnapton.com v2
	Author: 				Tim Knapton
	Initial Release Date:	25.April 2010
	Latest Revision:		25.April 2010
	Current Version: 		1.0.0
	
*/

/* General Elements
--------------------------------------------------------------------------------------------------------------------*/
body{
	margin: 0px;
	padding: 0px;
	font-family: Futura, Century Gothic, sans-serif;
	font-size: 12px;
	background-color: #454545;
	color: #424242;
}
a img{
	border: none;
}
h2{
	margin-bottom: 0px;
	font-size: 14px;
}
a, a:visited{
	color: #007bc9;
}
a:hover{
	color: #35a6ed;	
}




/* Useful Stuff
--------------------------------------------------------------------------------------------------------------------*/
.noShow{
	display: none;
}	
.left{
	float: left;
}
.right{
	float: right;
}
.central{
	text-align: center;
}
.clear{
	clear:both;
}
.iconxhtmlcss, .iconjs, .iconps, .iconux, .iconwp, .iconsql, .iconphp, .iconjava{
	float: left;
	width: 40px;
	height: 40px;
	margin: 0;
}

.iconxhtmlcss{background-image: url('../images/iconxhtmlcss.png');} 
.iconjs{background-image: url('../images/iconjs.png');} 
.iconps{background-image: url('../images/iconps.png');} 
.iconux{background-image: url('../images/iconux.png');} 
.iconwp{background-image: url('../images/iconwp.png');} 
.iconsql{background-image: url('../images/iconsql.png');} 
.iconphp{background-image: url('../images/iconphp.png');} 
.iconjava{background-image: url('../images/iconjava.png');}




/* Carousel Stuff
--------------------------------------------------------------------------------------------------------------------*/
.stepcarousel{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 810px; 
	height: 530px; 
	float: left; 
	margin-left: 5px;
}
.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
}
.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	width: 806px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 520px;
}




/* Header Stuff
--------------------------------------------------------------------------------------------------------------------*/
#navigation{
	width: 100%;
	color: #fff;
	height: 62px;
	background: url(../images/bg-header.png) repeat-x;
}
#navContainer{
	margin: 0px auto;
	width: 800px;
}

#navContainer .right{
	margin-top: 5px;
}

#navContainer a img{
	margin-top: 3px;
}
.navButton{
	font-size: 15px;
	margin: 3px 0px -10px 10px;
	outline-style:none;
	outline-width:0;
}
.navButton-disabled{
	cursor: default;
	margin: 3px 0px -10px 10px;
	outline-style:none;
	outline-width:0;
}
.navButton:hover{
	border-bottom: 3px solid #fff;
}
#logo{
	float: left;
	margin-top: 8px;
/*	cursor: pointer; */
}
#navlinks{
	float: right;
}




/* Content Area
--------------------------------------------------------------------------------------------------------------------*/
#leftArrow{
	float: left; 
	background-image: url(../images/leftArrow.png);

}
#leftArrow:hover{
	float: left; 
	background-image: url(../images/leftArrow-highlight.png);

}
#rightArrow{ 
	float: right; 
	background-image: url(../images/rightarrow.png);
}
#rightArrow:hover{ 
	float: right; 
	background-image: url(../images/rightarrow-highlight.png);
}
.disabledArrow{
	width: 70px;
	height: 70px;
	cursor: default;
	margin-top: 225px; 
	visibility: hidden;
}
.enabledArrow,.waitingArrow{
	width: 70px; 
	height: 70px;
	margin-top: 225px; 
	cursor: pointer;
}
.enabledArrow:hover,.waitingArrow:hover{
	color: #fff;
}
.container{
	width: 960px;
	margin: 0px auto;
}
#content{
	height: 550px;
	background: url(../images/bg-content.png) center no-repeat #c5c6c6;
	width: 100%;
}




/* Home / Welcome View
--------------------------------------------------------------------------------------------------------------------*/
#home{
	text-align: center;
}
#tagline{
	clear: left; 
	font-size: 40px;
}
#blurb{
	text-align: right; 
	padding-right: 100px; 
	margin-top: 10px
}




/* About View / Subviews(Education and Skills)
--------------------------------------------------------------------------------------------------------------------*/
#aboutMe{
	width: 100%;
	height: 100%;
}
#aboutMePic{
	width: 383px;
	height: 520px; 
	float: left;
	background: url('../images/me.png') no-repeat;
}
#aboutMeText{
	float: left; 
	padding: 10px; 
	width: 384px;
}
.aboutBackButton{
	float: left; 
	width: 135px;
	height: 63px;
	position: relative;
	top: -20px;
	background-image: url(../images/backtoabout.png);
	cursor: pointer;
}
.aboutBackButton:hover{
	border-bottom: 5px solid #1c7ac0;
}
#skills{
	cursor: pointer;
	float: left;
	margin-left: 15px;
	background-image: url(../images/about-skills.png);
	height: 75px;
	width: 145px;
}
#education{
	cursor: pointer;
	margin-left: 30px;
	float: left;
	background-image: url(../images/about-education.png);
	height: 75px;
	width: 148px;
}
#downloadResume{
	float: left;
	margin-left: 45px;
}
#downloadResume a{
	visibility: hidden;
	width: 100%;
	height: 100%;
}
#resumeArrow{
	height: 57px;
	width: 67px;
	margin-top: 15px;
	float: left;
	background-image: url(../images/about-arrow.png);
}
#aboutContainer{
	width: 383px;
	height: 150px;
}
.eduhighlight{
	background: url(../images/about-arrow3.png) top right no-repeat;
}
.skillshighlight{
	background: url(../images/about-arrow2.png) bottom left no-repeat;
}
.resumehighlight{
	background: url(../images/about-arrow.png) bottom right no-repeat;
}
#skills-full{
	width: 100%; 
	height: 100%; 
	background: url('../images/skills.png') center no-repeat; 
	display: none;
}
#skills-full .aboutBackButton{
	margin: 460px 0px 0px 90px;
}
#education-full{
	width: 100%; 
	height: 100%; 
	display: none; 
	font-size: 10px;
}
#degrees{
	float: left; width: 400px;
}
#degrees h2{
	margin-top: 26px;
}
#education-full .aboutBackButton{
	margin: 30px 0px 0px 70px;
}
#coursework{
	float: right; width: 400px;
	padding-top: 10px;
}




/* Noise View (Tweets and Blog Entries)
--------------------------------------------------------------------------------------------------------------------*/
#noise{
	background-image: url('../images/noise.png');
}
#tweets{
	width: 550px;
	font-size: 16px;
	margin: 95px 0px 0px 180px;
	height: 100px;
}
#tweets .tweet_list{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#tweets .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome{
	text-transform: uppercase; 
}
#tweets .tweet_list li{
	padding: .5em; 
}
#tweets .tweet_list .tweet_avatar{
	padding-right: .5em;
	float: left; 
}
#tweets .tweet_list .tweet_avatar img{
	vertical-align: middle; 
}
#blogs{
	font-size: 20px;
	float: left;
	width: 700px;
	margin: 30px 0px 0px 190px;
}
.blogLink{
	font-weight: bold;
}
#blogs ul li{
	margin-bottom: 15px;
}




/* Work View (Portfolio Overview)
--------------------------------------------------------------------------------------------------------------------*/
#work{
	overflow: hidden;
}
#portfolio{
	margin-left: 15px;
}
#theGoods{
	float: left; 
	margin: 10px; 
	width: 175px; 
	height: 150px;
}
.portfolioPreview {
	cursor:pointer;
	position:relative;
	display:block;
	height: 150px;
	width: 175px;
	float: left;
	margin: 10px;
}	
.portfolioPreview * {
	display: none;
}	
.portfolioPreview span.hover {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 150px;
	width: 175px;
}	
#accuweather-ipad				{background: url(../images/portfolio/sketch-ipad.jpg) 0 0 no-repeat;}
#accuweather-ipad span.hover	{background: url(../images/portfolio/sketch-ipad.jpg) 0 -150px no-repeat;}
#accuweather-yahoo				{background: url(../images/portfolio/sketch-yahoo.jpg) 0 0 no-repeat;}
#accuweather-yahoo span.hover	{background: url(../images/portfolio/sketch-yahoo.jpg) 0 -150px no-repeat;}
#judgementshallpass				{background: url(../images/portfolio/sketch-jsp.jpg) 0 0 no-repeat;}
#judgementshallpass span.hover	{background: url(../images/portfolio/sketch-jsp.jpg) 0 -150px no-repeat;}
#accuweather-w7					{background: url(../images/portfolio/sketch-dell.jpg) 0 0 no-repeat;}
#accuweather-w7 span.hover		{background: url(../images/portfolio/sketch-dell.jpg) 0 -150px no-repeat;}
#cisco-tacops					{background: url(../images/portfolio/sketch-tacops.jpg) 0 0 no-repeat;}
#cisco-tacops span.hover		{background: url(../images/portfolio/sketch-tacops.jpg) 0 -150px no-repeat;}
#petplacestation				{background: url(../images/portfolio/sketch-pps.jpg) 0 0 no-repeat;}
#petplacestation span.hover		{background: url(../images/portfolio/sketch-pps.jpg) 0 -150px no-repeat;}
#ibm-lotus						{background: url(../images/portfolio/sketch-bluehouse.jpg) 0 0 no-repeat;}
#ibm-lotus span.hover			{background: url(../images/portfolio/sketch-bluehouse.jpg) 0 -150px no-repeat;}
#flossfinder					{background: url(../images/portfolio/sketch-floss.jpg) 0 0 no-repeat;}
#flossfinder span.hover			{background: url(../images/portfolio/sketch-floss.jpg) 0 -150px no-repeat;}
#photoblog						{background: url(../images/portfolio/sketch-pblog.jpg) 0 0 no-repeat;}
#photoblog span.hover			{background: url(../images/portfolio/sketch-pblog.jpg) 0 -150px no-repeat;}
#nitwit							{background: url(../images/portfolio/sketch-nitwit.jpg) 0 0 no-repeat;}
#nitwit span.hover				{background: url(../images/portfolio/sketch-nitwit.jpg) 0 -150px no-repeat;}
#quickbooksonline				{background: url(../images/portfolio/sketch-qbo.jpg) 0 0 no-repeat;}
#quickbooksonline span.hover	{background: url(../images/portfolio/sketch-qbo.jpg) 0 -150px no-repeat;}



																			
/* Individual Portfolio Entries
--------------------------------------------------------------------------------------------------------------------*/
.portfolioEntry{
	width: 100%; 
	height: 100%; 
	display: none;
}
.portfolioInfo{
	float: right;
	padding: 0px 10px; 
	width: 280px;
	color: #666666;
}
.portfolioInfo h2{
	color: #424242;
}
.portfolioBackButton{
	margin-left: 35px;
	margin-top: 20px;
	float: left;
	width: 135px;
	height: 63px;
	background-image: url(../images/backtoportfolio.png);
	cursor: pointer;
	margin-bottom: -50px;
}
.portfolioBackButton:hover{
	border-bottom: 5px solid #1c7ac0;
}
.screenshots{
	float: right; 
	width: 500px; 
	height: 400px;
	margin-left: 5px; 
	clear: both;
}
.dots{
	float: right; 
	clear: right;
	width: 500px; 
	height: 35px; 
	text-align: right; 
}
.portfolioDot{
	height: 11px;
	width: 11px;
	background-image: url('../images/graycircle.png');
	cursor: pointer;
	float: left;
	margin: 3px;
}
.portfolioDot.hover{
	background-image: url('../images/smallcircle.png');
}
.selectedDot{
	height: 11px;
	width: 11px;
	background-image: url('../images/opencircle.png');
	cursor: pointer;
	float: left;
	margin: 3px;
}
.launchProject{
	font-size: 10px;
}




/* Contact Me Views
--------------------------------------------------------------------------------------------------------------------*/
#contactLeft{
	width: 370px; 
	padding: 10px;
	height: 480px; 
	margin: 10px 0px 0px 10px; 
	float: left;
}
#contactIcons{
	height: 150px; 
	width: 100%
}
#formContainer{
	width: 100%;
	height: 160px;
}
.mailerRow{
	width: 100%;
	margin-bottom: 15px;
}
textarea{
	border:1px solid #E4E4E4;
	color:#2A2E2C;
	font-size:11px;
	height:74px;
	padding:3px;
	width:230px;
	float: right;
}
input{
	border:1px solid #E4E4E4;
	color:#2A2E2C;
	font-size:11px;
	padding:3px;
	width: 230px;
	float: right;
}	
#messageRow{
	height: 79px;
}
#nameLabel{
	width: 100px;
}
#thanks{
	color: #007bc9; 
	width: 100%; 
	padding-top: 60px; 
	font-size: 24px;
	display: none;
}
#contactRight{
	width: 370px; 
	height: 480px; 
	padding: 10px; 
	margin: 10px 10px 0px 0px; 
	float: right;
	border-left: 1px solid;
}	
#contactList{
	margin: -5px 0px 0px 0px; 
	padding: 0px;
}
#findMe{
	padding-left: 65px;
}
a.findmelink{
	display:block;
	width:350px;
	height:50px;
}
.findmearrow{
	display:none;
}
#sendMail:hover{
	border-bottom: 5px solid #1c7ac0;
	cursor: pointer;
}



/* Footer Stuff
--------------------------------------------------------------------------------------------------------------------*/
#footer{
	width: 100%;
	height: 158px;
	background: url(../images/bg-footer.png) repeat-x;
	text-align: center;
	padding-top: 30px;
}
.footerContainer{
	text-align: center;
	margin: 20px auto;
}
.footerContainer a{
	color: #ccc;
}




/* 404 Stuff
--------------------------------------------------------------------------------------------------------------------*/
#fourohfour{
	width: 750px;
	height: 470px;
	padding: 25px;
	margin: 0px auto;
	background: url(../images/404.png);
}
#fourohfour h1{
	margin-top: 150px;
	color: #007bc9;
	font-weight: bold;
}
#fourohfour p{
	width: 300px;
}