/* CSS Document 

--------------------------------------------------------------------
						Matt Clayburn, Partner @ CoCreate
						for
						Sequoia
						24/3/08
						
						Version 1.0
						
						Project: Sequoia Website
						
						**Please annotate amendments and log below**
						--------------------------------------------
						Amendments
						
						16.5.08
						#top ul.first //Margin right 50px added to shift work menu levels right
						#top ul li, #top ul li a{ #top ul{ //Withs reduced to shift work menu right
						
						07.05.09
						Changed red and grey colours to new branding (heart & soul)
						
						--------------------------------------------
##Designers Notes
-----------------
Colours
-------
Main red: #FB3737
Grey Link Over / Down: #58585A
Grey Link: #6D6E71
Dotted Lines: #6D6E71
Dark Body Copy: #6D6E71	
Pale Body Copy: #A7A9AC
Red Copy: #FB3737
New Grey: #6C6764		
--------------------------------------------------------------------
*/


/*---------------------------
		Globals
-----------------------------*/
*{
padding:0;
margin:0;
}
html{
min-height:100%;
margin:0 0 1px 0;
}
body.index{
background-color:#6C6764;
}
body{
background-color:#FFFFFF;
}

/*---------------------------
		Structure
-----------------------------*/
#page{
margin:20px auto 0 auto;
width:860px;
}

#top, #title, #copy, #footer, #work, buttons{
float:left;
width:860px;
}
#top, #title, #copy, #footer, #work{
border-top:dotted 1px #6D6E71;
}
body.popup #page, body.popup #page div{
width:460px;
}
body.index #page div{
border-top:dotted 1px #FFFFFF;
}
#top, #footer, #work{
padding:20px 0 20px 0;
}
#title{
padding:17px 0 30px 0;
}
#title.treecomp{
padding:17px 0 12px 0;
}
#treeFlash{
width:248px;
height:534px;
float:left;
}
#copy, #copy.work{
padding:30px 0 30px 0;
}
#footer{
padding:10px 0 10px 0;
}
#us, #mapholder{
width:563px;
float:right;
}
#us.images{
padding:20px 0 0 0;
height:272px;
}
#leaderboard{
width:563px;
height:504px;
margin:30px 0 0 0;
float:right;
overflow:auto;
}
#news, #contact{
width:563px;
float:right;
border-bottom:dotted 1px #6D6E71;
padding:0 0 20px 0;
margin:0 0 20px 0;
}
#images{
width:590px;
float:right;
}
#title.routef {
padding:17px 0 30px 0; 
}

/*---------------------------
			Menu
-----------------------------*/
#top ul{
width:130px;
float:left;
list-style-type:none;
}
#top ul li, #top ul li a{
width:130px;
height:1.2em;
display:block;
float:left;
}
#top ul.first{
margin:0 50px 0 5px;
}
#top ul.first, #top ul.first li, #top ul.first li a{
width:120px;
}
/*---------------------------
			Images
-----------------------------*/
#page #top img{
padding:0 160px 0 0;
float:left;
}
#copy img{
float:left;
padding:0;
}
#copy.work img, #copy.contact img,  #images img{
float:right;
padding:0 0 20px 20px;
}
#copy.home img, #copy.home object{
float:right;
padding:20px 0 20px 20px;
}
#us img{
float:left;
padding:20px 0 0 17px;
}
#us img.first{
padding:20px 0 0 0;
}
p.starwars{
padding:0 0 95px 0;
background:url(../images/img_chip.gif) bottom no-repeat;
}
.submit{
width:107px;
height:23px;
background-image:url(../images/btn_getdirections.gif);
background-repeat:no-repeat;
text-indent:-500px;
}
/*---------------------------
		Typography
-----------------------------*/
#page p{
float:left;
}
#copy p.col1{
width:245px;
padding:0 25px 0 0;
margin:0 25px 0 0;
}
#copy p.col2, #us p{
width:250px;
padding:0 25px 0 0;
margin:0 20px 0 0;
}
#copy p.col3, #us p{
width:250px;
padding:0 0 0 0;
}
#us p{
width:245px;
padding:0 15px 0 0;
margin:0 30px 0 0;
}
#mapholder p{
width:563px;
height:20px;
float:left;
}
#contact p{
width:260px;
padding:0 5px 0 0;
margin:0 30px 0 0;
}
#contact p input.text{
border:solid 1px #666666;
}
#us p.end, #contact p.end{
width:250px;
padding:0 5px 0 0;
margin:0 0 0 0;
}
#news p.story{
width:220px;
}
/* ----------
 Font Sizes 
------------*/

#copy.work p{
width:185px;
margin:0 0 20px 0;
font-size:12px;
}
p.work, .leaderboard, table{
font-size:12px;
}
p, #top ul{
font-size:13px;
}
/* ------------ */

p, a, .leaderboard, table{
color:#6D6E71;
font-family:Helvetica, Arial, sans-serif;

}
p span{
color:#A7A9AC;
}
p span.red{
color:#FB3737;
}
p.holding{
width:250px;
}
p.headline{
width:150px;
padding:0 130px 0 0;
}
p.jobtitle{
width:190px;
padding:0 90px 0 0;
}
p.address, p.download{
width:180px;
padding:0;
}
p.download a{
float:right;
text-align:left;
}
#top ul li a:hover, #footer a:hover, #page a:hover, a.down{
text-decoration:underline;
color:#6D6E71;
}
a.down{
font-weight:bold;
}
a.red{
color:#FF0000;
}
body.index p{
color:#FFFFFF;
}
a{
text-decoration:none;
}
body.index a{
color:#FFFFFF;
}