/*////////////////////////////////////
 SAATCHI GALLERY WEBLOG CSS VERSION 1.9
 AUTHOR: RIK ABEL (RIK@HEADSHIFT.COM)
 LAST UPDATED: 26/MAY/2006
 
	CONTENTS:
	
	1. LAYOUT
	2. TYPOGRAPHY
	3. IMAGES
	4. COLOURS
	5. MOVABLETYPE STUFF
	6. FORMS
	
tip - each major section is 'flagged' - to jump straight to a section, find "=layout", "=typo", "=images", etc.

	colours:
	#c1c1ac - lite olive
	#afb095 - olive
	#A8C29F - lite green
	#88ac7b - green

	
////////////////////////////////////*/

/*//////////////////// 
  =LAYOUT
////////////////////*/

body {
	text-align: center;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

#container {
	text-align: left;
	width: 880px;
	margin: 0 auto;
	background-color: #fff;
	overflow: auto;
	}
	
#maincontent {
	width: 720px;
	float: left;
	background: #A8C29F url(http://www.saatchi-gallery.co.uk/blogon/img/maincontent_back2.gif) 0 0 repeat-y;
	}
	
	
#rightcol {
	float: right;
	width: 160px;
	background-color: #fff;
	margin: 0;
	}
	
#topimage {
	width: 720px;
	height: 329px;
	background: #FFFFFF url(http://www.saatchi-gallery.co.uk/blogon/img/blogHeader.gif) 0 0 no-repeat;
}	

#topnav {
	display: block;
	width: 720px;
	height: 180px;
	background-color: #000000;
	position: relative;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	}
	
#MTblog {
	width: 439px;
	float: left;
	background-color: #c1c1ac;
	}
	

#YGblog {
	width: 280px;
	float: right;
	background-color: #A8C29F;
	}
		
		
#MTblog,
#YGblog {
	padding-top: 30px;
	}
	

#blogleft,
#blogright { /* shared elements of two columns on home page */
	display: block;
	overflow: auto; /* wraps floated elements so they don't break out of bottom of box */
	}
	
#blogleft { /* Column containing latest  blog posts */
	float: left;
	width: 240px;
	margin-bottom: 30px;
	}
	

	
#blogright { /* contextual nav and stuff - pic of day, latest comments, etc */
	margin-top: 25px;
	float: right;
	padding-bottom: 10px;
	width: 150px;
	}
	
.pad { /* applies padding to block level elements (DIVs) while avoiding box-model problems in IE...*/
	padding: 10px;
	}

#blogleft .pad,
#blogright .pad {
	padding: 0;
	}
	
#YGblog .pad {
	padding-left: 20px;
	padding-right: 20px;
	}
	
.entry { /* container for individual blog posts */
	margin-top: 30px; /* spacing between posts */
	margin-bottom: 30px;
	padding: 10px;
	background-color: #afb095; 
	display: block;
	overflow: auto; 
	/* forces floated items (e.g. images) to be cointained within entry div, so that entries don't overlap on an image... */
	}


.entry99567 { /* container for individual blog posts */
	margin-top: 10px; /* spacing between posts */
	margin-bottom: 30px;
	padding: 0px;
	background-color: #C9D7E4;         
	/* forces floated items (e.g. images) to be cointained within entry div, so that entries don't overlap on an image... */
	}


/* the following 'holly hack' should fix the IE 'peekaboo bug' which causes content to disappear when a floated element is inside an element without a defined width. See: http://www.positioniseverything.net/explorer/peekaboo.html */

* html .entry,
* html .node {
	height: 1%;
	}
	

.intro {
	margin-top: 0;
	background-color: #afb095; 
	display: block;
	overflow: auto;
	margin-bottom: 20px;
	clear: both;
	padding: 10px;
	}
	
#footer {
	width: auto;
	clear: both;
	display: block;
	background-color: #c1c1ac;
	border-top: 1px solid #fff;
	padding: 0;
	height: 105px;
	}



	

#YGblog .node {
	width: 240px;
	margin-top: 0; /* spacing between posts */
	margin-bottom: 30px;
	padding: 0;
	background-color: #88ac7b;
	display: block;
	overflow: hidden;
	word-wrap: break-word;
	}	
	
#YGblog .node .pad {
	padding: 10px;
	}
	
/* div pad placed inside .node and node given width in order to force IE to hide overlong content which would break layout, such as unbreakable URLS */


	
#picoftheday {
	display: block;
	overflow: auto; 
	margin-top: 5px;
	padding: 10px;
	background-color: #afb095;
	font-size: 12px;
	}
	
#picoftheday p {
	margin: 0;
	padding: 0;
	}
	
#picoftheday img {
	width: 128px;
	height: 128px;
	}
	
/* overrides for individual blog post pages */
	
.blogpost #maincontent {
	background-color: #c1c1ac;
	}
	
.blogpost #MTblog {
	width: 720px;
	border-right: 0;
	}
	
.blogpost .entry,
.blogpost .node {
	padding: 20px; /* larger margins for blog posts */
	}
	
body.blogpost #blogleft { 
	width: 680px;
}

#MTblog .pad {
	padding-left: 20px;
}

.entry-more {
	overflow: auto;
	}
	
/*//////////////////// 
  =TYPOGRAPHY
////////////////////*/

#blogleft h2,
#blogleft h3,
#blogright h2,
#blogright h3 {
	margin: 0;
	}
	

#blogleft h3.entry-header,
.node h2.title {
	margin-top: 0.3em;
	margin-bottom: 1em;
	margin-left: 0;
	color: #333;
	font-size: 14px;
	text-transform: uppercase;
	}
	
.node h2.auhor {
	margin-top: 0.3em;
	margin-bottom: 1em;
	margin-left: 0;
	color: #fff;
	font-size: 14px;
	text-transform: none;
	}


   h2.auhorless {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 0;
	color: #fff;
	font-size: 14px;
    text-transform: uppercase;
	}


	
#blogleft h2,
#blogright h2
 {
	color: #000;
	}
	
#blogleft h2.date-header,
#YGblog h2.date-header
 {
	font-size: 18px;
	}

#YGblog h2.header {
	color: #000;
	font-size: 16px;
	font-weight: bold;
	margin-top: 10px;
	padding-left: 0;
	margin-left: 0;
	margin-right: 0;
}

#YGblog h2.header a:link,
#YGblog h2.header a:visited {
	color: #000;
	text-decoration: none;
	}
	
#YGblog h2.header a:hover,
#YGblog h2.header a:visited:hover {
	text-decoration: underline;
	}

#YGblog h2.date-header,
#YGblog h2.auhor {
	margin-left: 0;
	}
	
#YGblog h2.title {
	text-transform: uppercase;
	}
	



#blogleft  div.entry + h2.date-header {
	margin-top: 30px;
	}

#blogright h2 {
	font-size: 14px;
	}
	
#blogleft p,
.node p
 {
	margin: 0 0 0 0;
	font-size: 12px;
	line-height: 1.3em;
	color: #333;
	}
	
#blogleft .entry p {
	margin-bottom: 2em;
	}
	
	
#blogleft p.entry-footer,
.node .links {
	color: #fff;
	font-size: 11px;
	clear: both;
	}
	

.node .links {
	margin-bottom: 0;
}

#blogleft p.entry-footer
{
	margin-bottom: 10px;
}
	
.node .links {
	margin-bottom: 10px;
	margin-top: 10px;
	}
	

	
.blogpost #blogleft h3.comments-header,
.blogpost #blogleft h2.comments-open-header {
	font-size: 11px;
	margin-bottom: 0.5em;
	color: #000;
	background-color: #afb095;
	padding: 3px 5px;
	text-transform:uppercase;
	}
	
.blogpost #blogleft h3.comments-header,
.blogpost #blogleft h2.comments-open-header {
	margin-top: 50px;
	}
	
.blogpost #blogleft p.entry-footer {
	text-align: right;
	}
	
.blogpost #blogleft h3.entry-header {
	text-transform: uppercase;
	color: #fff;
	font-size: 20px;

	}
	
.blogpost #blogleft .entry p,
.blogpost .node p {
	text-align: justify; /* justify paragraph text for blog entries */
	overflow: auto;
	}
	
	
#blogleft p.entry-more-link  {
	font-weight: bold;
	font-size: 0.8em;
	}
	
#topnav h1 {
	padding-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 25px;
	}
	
#topnav p {
	font-size: 12px;
	display: block;
	position: absolute;
	bottom: 0;
	right: 10px;
	text-align: right;
	color: #fff;
	}
	
#topnav p.content-nav a:link,
#topnav p.content-nav a:visited {
	padding: 0 15px;
	}
	
* html #topnav p {
	bottom: 10px;
	}
	
#picoftheday p {
	margin: 0.25em 0;
	}
	
#picoftheday p.canvas {
	color: #333;
	}
	
#picoftheday h3 {
	font-size: 12px;
	color: #000;
	text-transform: uppercase;
	}
	
#blogright .module-content,
table#calbody td,
table#calbody  th
 {
	font-size: 11px;
	}
	


#footer p.copy {
	padding-left: 20px;
	margin-top: 0;
	display: block;
	margin-bottom: 0;
	margin-top: 0;
	}
	


#footer p.terms {
	background-color: #000;
	padding: 0 20px;
	font-size: 11px;
	margin-top: 5px;
	}
	
div.pagination {
	font-size: 12px;
	display: block;
	width: 240px;
	}
	
	
.publink {
	text-align: right;
	font-size: 14px;
	}
	
.publink a {
	padding-left: 15px;
	background: #A8C29F url(http://www.saatchi-gallery.co.uk/blogon/img/greenPrevArrow.gif) 0 50% no-repeat;
	}
	
#YGblog .node p.author {
	font-size: 11px;
	color: #ccc;
	border-top: 1px solid #A8C29F;
	padding-top: 5px;
	}
	
.intro p {
	font-size: 12px;
	color: #333;
	}
	
.intro h3.entry-header {
	font-size: 16px;
	margin-left: 0;
	color: #fff;
}

/*//////////////////// 
  =IMAGES
////////////////////*/


#blogleft img,
.node img {
	float: right;
	clear: right;
	margin: 5px 0 5px 10px;
	}
	
img {
	border: 0;
	}
	
img#yglogo {
	margin-bottom: 56px;
}

span.caption {
	display: block;
	width: 200px;
	float: right;
	clear: both;
	margin-top: 0;
	padding: 0 2px;
	text-align: right;
	color: #000;
	font-style: normal;
	margin-bottom: 5px;
	font-size: 11px;
	line-height: 1.2em;
	}
	
span.caption strong {
	font-style: normal;
	}
	
	
.entry img,
.node img,
.node p span.caption { /* forces maximum width of 200px for images within blog posts, to avoid layout breaking... */
	 /* for CSS 2.0 compliant browsers */
    max-width: 200px;
    /* for IE only */
    width: expression(this.width > 200 ? 200 : true); 
	}
	
.blogpost .entry img { /* forces maximum width of 200px for images within blog posts, to avoid layout breaking... */
	 /* for CSS 2.0 compliant browsers */
    max-width: 600px;
    /* for IE only */
    width: expression(this.width > 600 ? 600 : true); 
	}
	

	
/*//////////////////// 
  =COLOURS
////////////////////*/

.olive {
	color: #afb095;
	}
	
.liteolive {
	color: #c1c1ac;
	}
	

	
#blogright h2.module-header a,
#blogright h2.module-header a:visited {
	color: #000;
	}
	

	
/*//////////////////// 
  =MOVABLETYPE STUFF
////////////////////*/

.blogpost .comment {
	font-size: 1em;
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #afb095;
	}
	
.blogpost #blogleft .comment p.comment-footer {
	color: #666;
	text-align: right;
	font-size: 0.55em;
	}
	
#trackbacks-info {
	display: block;
	padding: 10px;
	border: 1px solid #93a48e;
	margin-top: 10px;
	text-align: center;
	background-color: #bfc0aa;
	}
	
div#comments {
	margin-top: 10px;
	}
	
.comments-open p {
	font-size: 0.6em;
	}	
	
/* latest commments module */



ul.module-list {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
	margin-top: 0;
	}
	
ul.module-list li {
	padding-bottom: 5px;
	padding-top: 5px;
	border-bottom: 1px solid #afb095;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	display: block;
	width: 150px;
	font-size: 12px;
	}
	

	
/* calendar module */


table#calbody {
	width: 148px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #c1c1ac;
	border-left: 1px solid #c1c1ac;
	background-color: #afb095;
	}

table#calbody th,
table#calbody td {
	text-align: center;
	width: 20px;
	height: 20px;
	/* padding-top: 4px;
	padding-bottom: 4px; */
	border-bottom: 1px solid #c1c1ac;
	border-right: 1px solid #c1c1ac;
	}
	
table#calbody td a:hover {
	display: block;
	width: 19px;
	height: 19px;
	background-color: #c1c1ac;

	}

	
/*//////////////////// 
  =FORMS
////////////////////*/

#blogleft form p input {
	clear: left;
	}
	
#blogleft form p br {
	display: none;
	}
	
#blogleft form p label {
	display: block;
	clear: right;
	font-weight: bold;
	color: #333;
	margin-top: 10px;
	margin-bottom: 3px;
	}	
	
#blogleft form p input,
#blogleft form p textarea,
#blogright form  input#search {
	border: 1px solid #afb095;
	}
	

	
#blogright .module-search #search {
	margin-bottom: 5px;
	margin-top: 5px;
	width: 148px;
	}
	
#blogright #jumplist {
	width: 150px;
	}
	
#blogright form {
	margin-top: 0;
	}
	
#blogleft form #comments-open-data {
	float: left;
	display: block;
	width: 340px;
	}

a.sidebox_TV
{
font-family: arial, verdana, tahoma, sans-serif;
font-weight: bold;
font-size: 11px;
color: #000000;
text-transform: uppercase;
text-align: left;
margin: 0px;
text-decoration: none;
display: block;
background-position: 100% 100%;
padding-left: 2px;
padding-top: 4px;
background-color: #FFC993;
height: 100px;
width: 150px;
border: 1px solid #626262;
}
a.sidebox_TV:hover
{
font-family: arial, verdana, tahoma, sans-serif;
font-weight: bold;
font-size: 11px;
color: #CC0000;
text-transform: uppercase;
text-decoration: none;
text-align: left;
margin: 0px;
background-position: 100% 100%;
display: block;
height: 100px;
width: 150px;
padding-left: 2px;
padding-top: 4px;
border: 1px solid #626262;
background-color: #E0E0E0;
}