/* 
Title: Andrew Southam
Author: team A design 
www.GoTeamA.com
*/

* { border:0; outline:none; list-style:none; margin:0; padding:0; text-decoration:none; }

html { min-height:100%; }

body {
	text-align:center;
	background:#000;
	font:normal normal 14px Helvetica, Verdana, Arial, sans-serif; 
	color:#fff;
}

a:link, a:visited { color:#ccc; }
a:hover, a:active { color:#fff; }

p { padding:10px; }
.clear { clear:both; }

#title { width:100%; height:25px; border-bottom:1px solid #9cc; text-align:center; }

#container { position:relative; text-align:left; width:842px; margin:0 auto; }

/*nav*/

div#navContainer { width:842px; margin:0 auto; position:relative; height:20px; }

ul#nav { position:relative; width:842px; height:20px; background:url(../img/nav.gif)  no-repeat; }
ul#nav li { position:absolute; top:0; display:inline; text-indent:-9999px; z-index:10; }
#nav li a:link, #nav li a:visited { height:20px; display:block; }

li#celeb, li#celeb-current { left:15px; width:68px; }
li#celeb a:hover, li#celeb a:active, li#celeb-current a { background:url(../img/nav.gif) no-repeat -15px -20px; }

li#life, li#life-current { left:99px; width:64px; }
li#life a:hover, li#life a:active, li#life-current a { background:url(../img/nav.gif) no-repeat -99px -20px; }

li#fash, li#fash-current { left:180px; width:54px; }
li#fash a:hover, li#fash a:active, li#fash-current a { background:url(../img/nav.gif) no-repeat -180px -20px; }

li#ad, li#ad-current { left:251px; width:64px; }
li#ad a:hover, li#ad a:active, li#ad-current a { background:url(../img/nav.gif) no-repeat -251px -20px; }

li#print, li#print-current { left:332px; width:54px; }
li#print a:hover, li#print a:active, li#print-current a { background:url(../img/nav.gif) no-repeat -332px -20px; }

li#covers, li#covers-current { left:402px; width:50px; }
li#covers a:hover, li#covers a:active, li#covers-current a { background:url(../img/nav.gif) no-repeat -402px -20px; }

li#videos, li#videos-current { left:469px; width:45px; }
li#videos a:hover, li#videos a:active, li#videos-current a { background:url(../img/nav.gif) no-repeat -469px -20px; }

li#pers, li#pers-current { left:531px; width:67px; }
li#pers a:hover, li#pers a:active, li#pers-current a { background:url(../img/nav.gif) no-repeat -531px -20px; }

li#blog, li#blog-current { left:614px; width:33px; }
li#blog a:hover, li#blog a:active, li#blog-current a { background:url(../img/nav.gif) no-repeat -614px -20px; }

li#bio, li#bio-current { left:664px; width:21px; }
li#bio a:hover, li#bio a:active, li#bio-current a { background:url(../img/nav.gif) no-repeat -664px -20px; }

li#contact, li#contact-current { left:702px; width:60px; }
li#contact a:hover, li#contact a:active, li#contact-current a { background:url(../img/nav.gif) no-repeat -702px -20px; }

/*home styles*/

div#home { margin:10px 0; width:842px; text-align:center; }

div#portfolios { float:left; margin:15px 0 0 15px; }
div#portfolios ul li { padding-bottom:18px; }
div#portfolios ul li a { width:275px; height:80px; display:block; overflow:hidden; }
div#portfolios ul li a:hover { text-indent:-275px; }

div#news { float:right; margin:15px 0 0; }

div#blog-link { height:80px; width:535px; margin:16px 0 0; background:#151515 url(../home/blog-btn.gif) 5px 15px no-repeat; }
div#blog-link p { padding:30px 0 0 140px; margin:0; text-align:left; color:#999;  }
div#blog-link p a { color:#900; }
div#blog-link p a:hover { color:#fff; }

/*news styles*/

div#newsHead { height:342px; width:796px; border:1px solid #333; text-align:center; margin:20px auto; }
div#newsHead img { float:left; }
p.news { padding:0 22px; color:#ccc; line-height:18px;  }

/*galleries styles*/

#portfolio a, #celebrity a, #classic a { font-weight:bold; color:#cc9; letter-spacing:1px; }

#thumb1 {position:absolute; top:10px; left:15px; }
#thumb2 {position:absolute; top:10px; left:98px; }
#thumb3 {position:absolute; top:115px; left:15px; }
#thumb4 {position:absolute; top:115px; left:98px; }
#thumb5 {position:absolute; top:220px; left:15px; }
#thumb6 {position:absolute; top:220px; left:98px; }
#thumb7 {position:absolute; top:325px; left:15px; }
#thumb8 {position:absolute; top:325px; left:98px; }

#numbers {
	position:absolute; 
	top:415px; 
	left:15px; 
	width:151px;
	height:25px;
	font:normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
	letter-spacing:1px;
}

#numbers a { color:#fff; text-decoration:underline; }

#main {
	position:absolute; 
	top:10px; 
	left:181px; 
	width:662px; 
	height:455px;
	text-align:center;
	font:normal normal 11px/15px verdana, arial, helvetica, sans-serif;
	color:#999;
}

.textnow { font-size:12px; color: #999; }

.textbio { line-height:18px; color:#ccc; text-align: justify; }

div#bio a { font-weight:bold;
	font:normal bold 12px arial, helvetica, sans-serif;
	color:#9cc;
	letter-spacing:1px;
	text-align:left;
}

.headcontact { font-size:16px; font-weight:bold; color:#9cc; letter-spacing: 1px; text-align: center; }

.contact { text-align:center; letter-spacing:1px; line-height:18px; }

.personal p { font:normal normal 14px/18px Helvetica, Arial, Verdana, sans-serif; color:#ccc; padding:0 10px 20px; }
.personal ul li { float:right; padding:0 30px 40px; text-align:center; }
.personal ul li img { display:block; margin-bottom:10px; }
.personal ul li a { color:#9cc; font:normal bold 14px/20px Helvetica, Arial, Verdana, sans-serif; }

#story {
	margin:0 0 50px;
	width:842px;
	padding:0 0 20px;
	font:normal normal 14px/20px Helvetica, Arial, Verdana, sans-serif;
	color:#999;
	text-align:justify;
	border-bottom:1px solid #666;
}

h1 {
	font-size:24px;
	font-weight:normal;	
	color: #fff;
	border-bottom:1px solid #666;
	padding:15px 15px 2px;
	margin-bottom:8px;
}

h2 { color:#666; font-size:18px; font-weight:normal; padding:25px 80px; }
h2 span { font-size:12px; }

#story p { padding:0 30px 20px; }
#story p strong { color:#ccc; }

.videoThumb { width:300px; padding-bottom:50px; font-size:12px; line-height:16px; color:#ccc; text-align:left; }
.videoClip { position:absolute; top:40px; left:101px; width:640px; }
.videoClipWide { position:absolute; top:40px; left:0; width:854px; }

div#road-trip { background:#333; margin:30px 15px; height:267px; }
div#road-trip img { float:left;  }
div#road-trip p { float:right; width:390px; padding:10px 10px 0; line-height:24px; }
div#road-trip a p { color:#fff; }
div#road-trip a span { color:#9cc; font-weight:bold; }

ul#personal-list { margin:40px 220px; }
ul#personal-list li { vertical-align:top; clear:both; } 
ul#personal-list li img { float:left; padding:0 0 20px; }
ul#personal-list li h2 { float:left; color:#9cc; padding:0; margin:0 10px; font-size:14px; font-weight:bold; }


/*jFlow*/

hr { border-bottom:1px solid #666; }

div#tracy div { height:350px; width:842px; }
div#tracy img { float:right; padding:20px 120px 29px 20px; }
div#tracy p { color:#ccc; line-height:18px; padding:20px 20px 0 120px; }

#book { position:relative; width:1000px; margin:10px auto; text-align:left; }
div#dream div { width:1000px; height:280px; }
div#dream div img { padding:10px 0; }

#tracyController, #bookController { clear:both; margin:0 auto 50px; text-align:center; }
#tracyController { font-size:14px; }
#bookController { font-size:10px; }
#tracyController span { color:#666; cursor:pointer; margin-right:10px; }
#bookController span { color:#666; cursor:pointer; margin-right:5px; }

#tracyController span.jFlowSelected { color:#9cc; font-size:24px; border-bottom:1px solid #9cc; }
#bookController span.jFlowSelected { color:#9cc; font-size:24px; }

#container .jFlowPrev, #container .jFlowNext{ cursor:pointer; color:#999; font-size:18px; padding:10px 160px 20px; }
#book .jFlowPrev, #book .jFlowNext{ cursor:pointer; color:#999; font-size:18px; padding:10px 80px 20px; }
.jFlowPrev { float:left; }
.jFlowNext { float:right; }

ul#bookCredits { background:#fff; width:479px; float:left; height:240px; margin:10px 0; padding:20px 0 0; }
ul#bookCredits li { font-size:12px; color:#ccc; text-align:right; text-transform:uppercase; padding:5px 20px; }
ul#bookCredits li span { font-size:16px; color:#999; letter-spacing:1px; padding-left:5px; }
ul#bookCredits li a { color:#999; }
ul#bookCredits li a:hover { color:#666; }