/* CSS Document */
/*Author: Thomas Prior*/
/*Date: 10th Feb 2009*/
/*Contact: tom@thomasprior.co.uk*/


/* =reset and global styles
-------------------------------------------------------------*/

*{
	margin:0;
	padding:0;
}

body{
	margin:0;
	padding:0;
	font-family: Helvetica, Arial, sans-serif;
	font-size:67.5%;
}

img {
	border: 0px;
}

a
{
	outline: none;
	border:none;
	color:#FFF;
	text-decoration:none;
}

a:hover
{
	outline: none;
	color:#CCC;
	text-decoration:underline;
}

h1{
	width:1020px;
	float:left;
	background: url(assets/foldedTitle.png) no-repeat top left;
	font-size:2.6em;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-style:italic;
	letter-spacing:-1px;
	color: #000000;
	padding:30px 10px 10px 40px;
	margin:-10px 0 20px -30px;
	text-shadow:0 1px 0 #FFF;
}

h1 span{/*TEXT WITH REDUCED SCALE AND IMPORTANCE*/
	font-size:70%;
}

/* =layout - main structural divisions
-------------------------------------------------------------*/

#mainWrapper{
	width:958px;
	height:1100px;
	margin:0 auto;
	margin-bottom:100px;
}

#mainContent{
	width:958px;
	float:left;
	margin:53px 0 0 0;
}

.mainFocusArea{
	width:918px;
	margin:10px 0 0 0;
	padding:20px 20px 17px 20px;
	float:left;
	margin:0;
	background:url(assets/woodRepeat.png);
}

#footer{
	width:918px;
	float:left;
	color: #999;
	font-size:1.2em;
	font-weight:bold;
	line-height:1.4em;
	padding:20px;
	margin:25px 0 0 0;
	background: url(assets/footerBgRepeater.png);
}

/* =logo
-------------------------------------------------------------*/

#logo{
	width:508px;
	height:217px;
	float:left;
}

#logo img{
	z-index:5;
	position:absolute;
}

/* =navigation
-------------------------------------------------------------*/

#mainNavigation {
	width:450px;
	padding: 0;
	float:left;
}

#mainNavigation ul {
	width:441px;
	height:82px;
	float:right;
	list-style: none;
	margin: 0;
	padding: 0;
	/*background:url(assets/mainNavRepeater.png) repeat-x;*/
	background:#000;
}
#mainNavigation li {
	float: left;
}
#mainNavigation a span {
	visibility: hidden;
}
#homeLink a {
	background: url(assets/navigationSSprite.png) -341px -0px no-repeat;
	display: block;
	height: 82px;
	width: 70px;
	margin:0 4px 0 5px;
	text-decoration: none;
}
#homeLink a:hover {
	background: url(assets/navigationSSprite.png) -341px -91px no-repeat;
}
#blogLink a {
	background: url(assets/navigationSSprite.png) no-repeat;
	display: block;
	height: 82px;
	width: 64px;
	margin:0 6px 0 0;
	text-decoration: none;
}
#blogLink a:hover {
	background: url(assets/navigationSSprite.png) -0px -91px no-repeat;
}
#aboutLink a {
	background: url(assets/navigationSSprite.png) -70px 0 no-repeat;
	display: block;
	height: 82px;
	width: 98px;
	margin:0 7px 0 0;
	text-decoration: none;
}
#aboutLink a:hover {
	background: url(assets/navigationSSprite.png) -70px -91px no-repeat;
}
#portfolioLink a {
	background: url(assets/navigationSSprite.png) -170px 0px no-repeat;
	display: block;
	height: 82px;
	width: 92px;
	margin:0 6px 0 0;
	text-decoration: none;
}
#portfolioLink a:hover {
	background: url(assets/navigationSSprite.png) -170px -91px no-repeat;
}
#contactLink a {
	background: url(assets/navigationSSprite.png) -260px 0px no-repeat;
	display: block;
	height: 82px;
	width: 80px;
	margin:0 6px 0 0;
	text-decoration: none;
}
#contactLink a:hover {
	background: url(assets/navigationSSprite.png) -260px -91px no-repeat;
}


/* =embellishments
-------------------------------------------------------------*/

#splatEffect{
	position:absolute;
	margin:-30px 0 0 -85px;
	background: url(assets/splat.png);
}

#skillsTitleImage{
	position:absolute;
	margin:664px 0 0 50px;
}

#mySkillsCollage{
	width:400px;
	height:158px;
	margin:634px 0 0 50px;
	background:url(assets/meHomeIntro.png) no-repeat bottom left;
	position:absolute;
}

/* =twitterfeed
-------------------------------------------------------------*/

#twitter{
	list-style:none;
	padding:18px 0 11px 0;
	font-family: Arial, Helvetica, sans-serif;
	width:306px;
	height:45px;
	float:right;
	margin:0 140px 16px 0;
	text-align:left;
	font-size:9px;
	color: #666;
}

#twitter a{
	font-size:9px;
}

#twitter h3{
	margin:0 0 3px 0;
	padding:8px 0 3px 22px;
	color:#CCC;
	font-size:12px;
	font-weight:normal;
	border-bottom:1px solid #313131;
	background:url(assets/twitterificIconSmall.png) no-repeat left bottom;
}

#twitter p{
	line-height:12px;
}

/* =social networking
-------------------------------------------------------------*/

#socialNetworks{
	list-style:none;
	text-align:right;
	width:280px;
	height:79px;
	float:right;
	margin:15px 3px 0 0;
	color:#FFF;
	font-weight:bold;
	font-size:1.2em;
	line-height:1.6em;
}

#socialNetworks a:hover{
	text-decoration:line-through;
}

#socialNetworks li{
	padding:2px 18px 0 0;
}

#socialNetworks .facebook{
	background:url(assets/facebookIcon.png) no-repeat right;
}

#socialNetworks .linkedIn{
	background:url(assets/linkedInIcon.png) no-repeat right;
}

/* =freelance indicator
-------------------------------------------------------------*/

#freelanceIndicatorSign{
	position:absolute;
	margin:-4px 0 0 717px;
}

#freelanceIndicator{
	height:22px;
	float:right;
	font-size:10px;
	font-weight:normal;
	color:#FFF;
	margin:40px 0 0 0;
	padding:0 0 0 24px;
	background:url(assets/freelanceIcon.png) no-repeat left;
}

#freelanceIndicator span{
	width:220px;
	float:left;
	padding:6px 8px 5px 5px;
	background:url(assets/freelanceIndicatorBG.png);
}

#contactMeForFreelance{
	width:250px;
	float:right;
	margin:8px 6px 0 0;
	text-align:right;
	color:#FFF;
	font-size:10px;
}

#freelanceIndicatorHanger{
	width:965px;
	height:105px;
	margin:-4px 0 0 0;
	background: url(assets/noFreelanceSign.png) no-repeat bottom right;
	z-index:9998;
	position:absolute;
}

.mainFocusArea p{
	color:#FFF;
	font-size:1.1em;
	line-height:1.8em;
}

/*.mainFocusArea span{
font-size:130%;
font-weight:bold;
}*/

/* =footer area
-------------------------------------------------------------*/

#footer a{
	color:#999;
}

#footer a:hover{
	color:#FFF;
}

#footer h3{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-size:1.8em;
	font-style:italic;
	letter-spacing:-1px;
	padding:0 0 15px 0;
	margin:0 0 20px 0;
	color:#C4C4C4;
	width:100%;
	float:left;
	border-bottom:1px solid #66b7d8;
}

#footer ul{
	width:120px;
	height:136px;
	border-right:1px solid #302500;
	float:left;
	list-style:none;
	padding:35px 0 0 0;
	margin:0 11px 13px 0;
}

#footerNetworkingLinks{
	background:url(assets/footerTitleLinkUp.png) no-repeat top left;
}

#footerFavPeople{
	background:url(assets/footerTitleFavPeople.png) no-repeat top left;
}

#footerFavSites{
	background:url(assets/footerTitleFavSites.png) no-repeat top left;
}

#footerFlickrFeed{
	background:url(assets/footerTitleFlickrFeed.png) no-repeat top left;
}

#footerFlickrFeed li{
	width:360px;
}

#footerFlickrFeed img{
	width:60px;
	height:60px;
	margin:0 6px 2px 0;
	padding:1px;
	border:1px solid #333;
}

#copyright{
	width:800px;
	float:right;
	text-align:right;
	margin:15px 0 50px 0;
	color: #999;
}

/* =homepage specific styles
-------------------------------------------------------------*/

#bgHome{
	background:url(assets/fullscreenBG/grungeWallpaper.jpg);
	/*background:#000;*/
	background-attachment:fixed;
	background-position:top;
}

#recentProjectsHome{
	width:100%;
	float:left;
	margin:13px 0 0 0;
}

#introBoxHome{
	width:323px;
	height:350px;
	float:left;
	margin:10px 20px 0 0;
	padding:13px 20px 20px 20px;
	background:url(assets/speechBubble.png) no-repeat top left;
}

#introBoxHome strong{
	background:#669597;
	color: #000;
	padding:2px 3px 2px 3px;
	font-size:120%;
}

#introBoxHome p{
	font-size:11px;
	line-height:21px;
	margin:5px 0 15px 2px;
}

#photoHomeIntroBox{
	width:250px;
	float:right;
	margin:8px 6px 0 0;
	text-align:right;
	color:#FFF;
	font-size:10px;
}

/* =portfolio specific styles
-------------------------------------------------------------*/

#portfolioIntroBox{
	background: url(assets/wideSpeechBubble.png) no-repeat top;
	width:613px;
	height:90px;
	float:left;
	margin:10px 0 0 0;
}

#portfolioIntroBox strong{
	background:#669597;
	color: #000;
	padding:2px 3px 2px 3px;
	font-size:120%;
}

#bookmarkPortfolio{
	width:280px;
	padding:6px 0 0 0;
	float:right;
}

#bookmarkPortfolio p{
	padding:0px 0px 9px 4px;
	font-size:0.9em;
	font-style:italic;
	line-height:1.2em;
	font-weight:normal;
	color:#999;
}

#bookmarkPortfolio img{
	margin:0 5px 0 0;
	outline:none;
	border:none;
}

#bookmarkPortfolio a{
	outline:none;
	border:none;
}

#tooltip{
	position:absolute;
	background: url(assets/tooltipBG.png);
	padding:2px 5px;
	color:#FFF;
	display:none;
	}
	
/* =about page specific styles
-------------------------------------------------------------*/

#aboutMeText, #aboutMeIntro{
	width:898px;
	float:right;
	color: #A5A5A5;
	margin:15px 10px 0 15px;
}

#aboutMeText dt, #aboutMeIntro dt{
	font-size:1.4em;
}

#aboutMeText dd, #aboutMeIntro dd{
	font-size:1.1em;
	line-height:2em;
	margin: 0;
	background:url(assets/aboutSpeechBubbleRepeater.png);
	padding:20px 20px 0 20px;
}

#aboutMeText .bottomOfAboutBubbles, #aboutMeIntro .bottomOfAboutBubbles{
	background:url(assets/bottomOfAboutUsBubbles.png) no-repeat bottom right;
	padding:0 20px 43px 22px;
	margin:0;
}

#aboutMeText .firstParagraphAboutPages, #aboutMeIntro .firstParagraphAboutPages{
	margin-top:-20px;
	padding:23px 20px 20px 20px;
}

#aboutMeText strong, #aboutMeIntro strong{
	background:#669597;
	color: #000;
	padding:2px 3px 2px 3px;
	font-size:110%;
}

/* =contact page specific styles
-------------------------------------------------------------*/

#formWrapper{
	width:500px;
	float:left;
	padding:10px;
}

#formWrapper p{
	width:480px;
	font-size:1em;
	padding:5px 0 20px 5px;
	line-height:1.6em;
	color:#CCC;
}

#contactForm{
	color:#FFF;
	font-size:1.2em;
	color:#CCC;
	letter-spacing:-0.5px;
	padding:16px 14px 32px 17px;
	background:url(assets/FORM_speechbubble.png) no-repeat top left;
}

#contactForm label{
	color:#97c2d8;
	letter-spacing:normal;
	margin:0;
	padding:0;
}

#contactForm dd{
	padding:0;
	margin:4px 0 13px 0;
}

#contactForm .textInputType input{
	width:430px;
}

#contactForm .textInputType textarea{
	width:434px;
	height:73px;
}

#contactForm .submit input{
	width:70px;
	padding:8px;
	cursor:pointer;
}

p#success{
	width:896px;
	float:left;
	padding: 3px 10px;
	background: url(assets/confrmationBGRepeat.png);
	color: #CCC;
	font-size:1.6em;
	margin: 10px 0 4px 0;
	text-align: center;
	border:1px solid #3f3f3f;
}
		
p#bademail, p#badserver{
	width:896px;
	float:left;
	padding: 3px 10px;
	background: url(assets/confrmationBGRepeat.png);
	border: 1px solid #591515;
	color: #CCC;
	font-weight:bold;
	margin: 10px 0 4px 0;
	text-align: center;
}
	
#contactDetails{
	width:350px;
	float:left;
	padding:10px;
}
	
#contactDetails p{
	width:350px;
	font-size:1em;
	margin:0;
	padding:5px 0 12px 5px;
	line-height:1.6em;
	color:#CCC;
}
		
.vcard{
	background:url(assets/contactDetailsBubbl.png) no-repeat top left;
	width:369px;
	height:130px;
	float:left;
	margin:3px 0 0 3px;
	padding:12px 0 15px 15px;
	list-style:none;
	font-size:1.4em;
	color:#FFF;
	line-height:2em;
}

.vcard li{
}

.vcard span{
	color:#97c2d8;
	font-weight:bold;
}

.vcard a{
	color:#CCCCCC;
}

#socialNetworkingLinks{
	width:370px;
	float:left;
	padding:0 10px 10px 10px;
	display:inline;
}

#socialNetworkingLinks li{
	list-style:none;
	display:inline;
}

#socialNetworkingLinks li a{
	width:110px;
	height:32px;
	float:left;
	padding:2px;
	margin:3px 4px 0 2px;
	border:1px solid #666;
}

#socialNetworkingLinks li a:hover{
	border:1px solid #FFF;
}