/* ===================================================
CSS for Drawing at Work - v2.0

Author: 		Whitespace Design
Contact: 		emily@whitespacedesign.co.uk
Website: 		http://www.whitespacedesign.co.uk
created: 		14.05.10

colours: 		main column: #f4f2ea (cream)
				
=================================================== */


html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,del,em,img,small,strong,sub,sup,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;
	}
h1,h2,h3,h4,h5,h6,pre,code,input,textarea {font-size:1em;font-weight: normal;
	}
a img,:link img,:visited img {border:none;
	}
:link,:visited {text-decoration:none;
	}
ul,ol {list-style:none;
	}
address {font-style: normal;}

.screenreader {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}

.imageReplace {text-indent: -9000px;}

.clearfix:after { /* makes float container block clear floated blocks inside it */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}

a:active {outline: none;
	}
:focus {-moz-outline-style: none;
	}

html { /* force scrollbar to avoid page shift */
	height: 100%; 
	margin-bottom: 1px; 
	overflow: -moz-scrollbars-vertical !important;
	overflow-y: scroll;  
	} 

/*=========*/


body {
	font: 62.5% univers, arial, helvetica, sans-serif;
	margin: 0px;
	background: url(../graphics/bg_3000x1.gif) repeat-y center 0;
	}
	
/* positioning */

#container {
	width: 1070px;
	margin: 0px auto;
	}
	
#section {
	width: 1070px;
	float:left;
	background: #fff url(../graphics/bg_cream_224x1.gif) repeat-y;
	}

#navigation {
	float: left;
	width: 215px;
	font-size: 1.1em;
	letter-spacing: .1em;
	font-weight: normal;
	padding-right: 25px;
}

	#navigation ul { 
		width: 100%;
		text-align: right;
		float: right;
		list-style: none; 
		margin: 118px 0 0 0; 
		padding: 0;
		text-transform: uppercase;
	}

		#navigation ul.sub-nav { 
			text-transform: capitalize;
			list-style: none;
			margin: 1.6em 0 0 0; 
			letter-spacing: 0em;
			font-size: 1em;
			}

			#navigation li {line-height: 1.7em;}

#side-column {
	float: left;
	width: 136px;
	margin: 199px 0px;
	padding-right: 20px;
	}
	
	#about.page2 #side-column {
		padding-right: 26px;
		width: 130px;
	}

#main-column {
	float: left;
	position: relative;
	width: 500px;
	border: 0px solid #000;
	padding: 0 0px 20px 0;
	}

#home-image {
	margin-top: 199px;
	}
	
#about.portrait {
	width: 130px;
	height: 93px;
	text-align: right;
	margin-bottom: 6px;
}
	
#header {
	height: 116px;
	float: left;
	}
	
	#testi #header {
		float: none;
		}
		#clients #header {
		width: 300px;
		}

	#gallery #header {
		height: 122px;
		}
		#gallery.landing #header {
			height: 116px;
			}

	div#header2 {
		margin-bottom: 17px;
		clear: left;
		}

	#home div.header2 {
		margin-bottom: 0px;
		}

	
#illustration {
	float: left;
	height: 305px;
	margin: 3px 0px 22px 60px;
}

#side-column img,
#contents-image img,
.illustration img,
#illustration img,
#topimages img {
	  border: 1px solid #e7e7e7; /* or a bit dadada darker */
}
	#side-column div.portrait img {
		border: none;
	}
	
	.gymnasium #side-column img.first {
		margin-top: 3px;
		margin-bottom: 5px;
	}
	
#side-column .portrait {
	text-align: right;
	margin-bottom: 6px;
}

.column {
	width: 215px;
	margin-right: 16px;
	float: left;
}

#col1.column {
	clear: left;
}

/* gallery styles */
	
#imagegallery li {
  width: 68px;
  height: 68px;
  padding: 0px;
  float: left;
  }

	div.spacer {
	  clear: both;
	  }

		#imagegallery a img {
		  margin-right: 3px;
		  margin-top: 3px;
		  }
  
#contents-image {
	float: left;
	width: 600px;
	text-align: left;
	height: 550px;
	}	

	#image-holder {
		width: 458px;
		height: 458px;   
		background: url(../graphics/loading.gif) 212px 212px no-repeat;
	}

		img#placeholder.portrait,
		img#placeholder.large  {margin-left: 40px;}
		img#placeholder.landscape,
		img#placeholder.stretch-landscape {margin-top: 80px;}	
	
	p#caption {
		float: left;
		text-align: left;
		padding-top: 28px;
		width: 600px;
	}
body.page4 p#caption {
		display: none;
	}
	
	span#materials {
		font-style: italic;
	}

/* text styles */	

div#title {
	padding: 29px 0px 0px 0px;
	margin: 0px;
	font-size: 1.4em;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	word-spacing:0px;
}

	div#title a {
		text-decoration: none;
		color: #2a284c;
	}
	#courses div#title a {
		color: #cccbc4;
	}
		div#title a b {
			color: #ba7832;
			font-weight: normal;
		}
		#courses div#title a b {
			color: #b69476;
		}


h1 {
	margin: 15px 0px 0px 0px;
	font-size: 1.2em;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: #a72c32;
	font-weight: bold;
	}
	#gallery h1,
	#contact h1 {
		text-indent: -9000px;
	}

	.page2 h2,
	#about.page2 h3 {
		clear: left;
		width: 500px;
		font-weight: bold;
	}

h2, 
h3,
h5 {
	float: left;
	clear: left;
	width: 300px;
	margin: 0px 0px 3px 0px;
	font-size: 0.9em;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: bold;
}
	#talks h5 {
		width: 350px;
	}

	#about h2,
	#about h3 {
		color: #a72c32;
	}

	#costs h3 {
		margin-bottom: 12px;
	}
	#clients h2 {
	font-size: 2em;	
	letter-spacing: 0em;
	text-transform: none;
	}
	
h4 {
	float: left;
	width: 300px;
	margin: 0px 0px 3px 0px;
	font-size: 1.1em;
	}

h6 { 	
	float: left;
	width: 300px;
	font-size: 1.1em;
	margin: 0px;
}
	
#header2 div.time,
#courses h4 {
	font-weight: normal;
	margin: 0px 0px 2px 0px;
	font-size: 1.3em;
	letter-spacing: 0.1em;
} 

#courses h4 {
	font-weight: normal;
	margin: 0px 0px 2px 0px;
	font-size: 1.3em;
	letter-spacing: 0em;
}
 	
#header2 div.people {
	margin: 5px 0px 0px 9px;
	font-size: .9em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

p, 
#main-column ul {
	float: left;
	margin: 0px 0px 17px 0px;
	width: 300px;
	letter-spacing: .01em;
	list-style: none;
}
	#about.page2 p,
	#talks p {
		width: 350px;
	}
	.gymnasium p {
		width: 310px;
		position: relative;
		z-index: 1;        /* to be bring on top of background images */
	}

	#contact p {
		width: 450px;
		margin: 10px 0px 0px;
	}
	span.at {
		color: #AD5F3A;
	}
	b.logo {
		font-weight: normal;
		letter-spacing: 0.2em;
	}

#main-column ul {
	margin: 0px 0px 15px 0px;
	padding-left: 0px;
	}
	
.landing p,
#page404 p.first,
#contact p.details {
	width: 447px;
	font-size: 2.2em;
	font-weight: bold;
	font-family: arial black, sans-serif;
	color: #091134;
	line-height: 24px;
	margin-top: 0px;
	}
	#gallery.landing p {
		font-size: 2.0em;
		line-height: 24px;
		}
		
	#contact p.phone {
		color: #952223;	
		font-size: 2em;
		font-weight: bold;
		font-family: arial black, sans-serif;
		letter-spacing: 0.06em;
		padding-top: 26px;
		padding-bottom: 30px;
	}

p, 
#main-column li {
	font-size: 1.1em; 
	line-height: 1.4em;
	}
	.landing p#contact {
		font: normal 1.1em/1.4em Univers, Arial, helvetica, sans-serif;
	}
	#clients #main-column ul li {
	font-size: 1.2em;
	line-height: 1.6em;
	}
	
	#clients #main-column ul,
	#page404 #main-column p {
	clear: left;
	}

p a {color: #952223;} /* a72c32 */

	p.noLink a {
		color: #000;
	}
	
p.no-bot-marg {
	margin-bottom: 0px;
	}

p.cv {
	font-style: italic;
}

#main-column ul li span {
	color: #000000;
	}

.illustration {
	float: left;
	padding-top: 45px;
	height: 458px;
}

#courses #main-column li,
ul.bulletList li {
	background: url(../images/bullets.gif) 0 4px  no-repeat;
	padding-left: 10px;
	width: 283px;}

#courses #main-column ul {
	width: 283px;
	}
	
	
#courses.test  #main-column .sub-nav li {
	background: none;
	padding-left: 0px;
	}

#topimages {
	float:right;
	margin-right: -49px; 
	margin-top: 29px;
}  
	#topimages img {
		margin-right: 3px;
	}
#bottomimages {
	float: left;
	clear: left; 
	width: 800px;
	margin-left: -156px;
}
  #bottomimages img {
		display: block;
		float: left;
  	} 
	#bottomimages img.updent {
		margin-top: -30px;
		}   
p.pullquote {
	position: absolute;
	top: 196px;
	left: 300px;
	font-size: 1.2em;
	line-height: 1.65em;
	letter-spacing: 0.009em;
	width: 209px;
	font-weight: bold;
	border: 0px solid #000;
	padding-left: 32px;
	color: #a72c32;
	}
	
	.gymnasium p.pullquote {
	   	font-size: 1.4em;
		line-height: 1.4em; 
		width: 220px; 
	}  
	
	p.pullquote span { 
		display: block;
		margin-top: 20px;
	}

#about p.pullquote {
	top: 466px;
	}
	
blockquote {
	float: left;
	clear: left;
	margin: 0px;
	font-style: italic;
	font-size: 1.0em;
	line-height: 1.5em;
	width: 350px;
	}

body.one p.quote  {font-style: italic}

p#contact {
	float: left;
	margin-top: 15px;
	margin-bottom: 0px;
	}
p#contact a {
	text-decoration: none;
} 

/* text colour variations */

#navigation .sub-nav a,
#navigation .sub-nav a:link,
#navigation .sub-nav a:visited {color: #8F99B2;}

#gallery #navigation #pages.sub-nav a,
#gallery #navigation #pages.sub-nav a:link,
#gallery #navigation #pages.sub-nav a:visited {color: #0C1D3E}


#courses h1, 
#courses h2,
#courses p#contact, 
#courses p#contact a,
body.one p.quote {color: #2c878a;}

#courses .time,
#courses blockquote {color: #92958A;}

#courses h3,
#courses p.pullquote {color: #22bdb6; }
#courses h5 {color: #00A99D;}

#costs h1 { color: #a0a28c;}
#costs .time, #costs p#contact, #costs p#contact a, h3 {color: #BDBD77;}
#costs h5 {color: #A5AAA0;}
#costs p.pullquote { color: #82846D;}

#talks h1 { color: #514F55;}
#talks p#contact a,
#talks h5,
#contact h3 {color: #CC5750;}

#contact h3 {margin-top: 44px;} /* to line up with bottom of image, where poss. */

#clients h1 {color: #797690;}

#testi #title a {color: #A76635;}
#testi h1 {color: #E1DAB6;}

#setup h1, #setup h2 {color: #00A77E;}
#setup h3, #setup h5, #setup p a.email {color: #51BF9D; text-decoration: none;}
#setup p {margin-bottom: 20px;}

/* main navigation styles */


#navigation a {color: #aba7a6;}

#home #navigation a#home-nav,
#courses #navigation a#courses-nav,
#talks #navigation a#talks-nav,
#events #navigation a#events-nav,
#gallery #navigation a#gallery-nav,
#about #navigation a#about-nav,
#sketchmob #navigation a#sketchmob-nav,
#testi #navigation a#testi-nav,
#clients #navigation a#clients-nav,
#setup #navigation a#setup-nav,
#costs #navigation a#costs-nav,
#contact #navigation a#contact-nav,
#navigation a:hover,
#navigation a:hover {color: #A72C32;}

.page1 #navigation .sub-nav a#subnav1,
.page2 #navigation .sub-nav a#subnav2,
.page3 #navigation .sub-nav a#subnav3,
.page4 #navigation .sub-nav a#subnav4,
.page5 #navigation .sub-nav a#subnav5,
.page6 #navigation .sub-nav a#subnav6,
.page7 #navigation .sub-nav a#subnav7,
.page8 #navigation .sub-nav a#subnav8 {
	color: #2A284C;
}


/* sub navigation styles */
	

#gallery.gallery1 .sub-nav a#subnav1,
#gallery.gallery1 .sub-nav a#subnav1:link,
#gallery.gallery1 .sub-nav a#subnav1:visited,
#gallery.gallery2 .sub-nav a#subnav2,
#gallery.gallery2 .sub-nav a#subnav2:link,
#gallery.gallery2 .sub-nav a#subnav2:visited,
#gallery.gallery3 .sub-nav a#subnav3,
#gallery.gallery3 .sub-nav a#subnav3:link,
#gallery.gallery3 .sub-nav a#subnav3:visited,
#gallery.gallery4 .sub-nav a#subnav4,
#gallery.gallery4 .sub-nav a#subnav4:link,
#gallery.gallery4 .sub-nav a#subnav4:visited,
#gallery .sub-nav a:hover {color: #2A284C;}

.subpage1 #navigation #pages.sub-nav a#subsubnav1,
.subpage2 #navigation #pages.sub-nav a#subsubnav2,
.subpage3 #navigation #pages.sub-nav a#subsubnav3,
.subpage4 #navigation #pages.sub-nav a#subsubnav4,
.subpage5 #navigation #pages.sub-nav a#subsubnav5,
.subpage6 #navigation #pages.sub-nav a#subsubnav6,
.subpage7 #navigation #pages.sub-nav a#subsubnav7,
.subpage8 #navigation #pages.sub-nav a#subsubnav8,
#gallery #navigation #pages.sub-nav a:hover {
	color: #A72C32;
}
	
/* courses background page number */

#main-column { 
	background-position: 230px 18px; 
	background-repeat: no-repeat;
	}


#courses.page1 #main-column {background-image: url(../images/one.gif);}	
#courses.page2 #main-column {background-image: url(../images/two.gif);}	
#courses.page3 #main-column {background-image: url(../images/three.gif);}	
#courses.page4 #main-column {background-image: url(../images/four.gif);}	
#courses.page5 #main-column {background-image: url(../images/five.gif);}
#courses.page6 #main-column {background-image: url(../images/six.gif);}
#courses.page7 #main-column {background-image: url(../images/number_seven.gif);} 
#courses.page8 #main-column {background-image: url(../images/eight.gif);} 
#setup #main-column {background-image: url(../images/setup.gif);}
#costs #main-column {background-image: url(../images/costs.gif);}


/* tutors portraits bg colours */

#tutor2 {background-color: #e4e1df;}
#tutor3 {background-color: #6a696a;}
#tutor4 {background-color: #bbbabb;}
#tutor5 {background-color: #525152;}
#tutor7 {background-color: #bebebe;}

/* testimonies text rollover styles */

#testi p, #testi p a, #testi p.text a, #testi p.text a:link {
	color: #7b522b; /* old 613F1E */
	width: 370px; 
	text-decoration: none;
	}

#testi p cite {
	padding-right: 5px;
	}

p.first {
	float: left; clear: left;
	}