/* --------------------------------
	01. YAHOO RESET LIBRARY
-------------------------------- */

@import "/styles/reset";

/* --------------------------------
	02. MAIN ONSTRUCT ELEMENTS
-------------------------------- */

html { background: url(/page/-/images/bg-html.png) repeat 0 0; }

body { 
	width: 965px; 
	margin: 0 auto;
	color: #000;
	font: normal 11px/14px "Trebuches MS", Helvetica, sans-serif;
}

#wrapper { 
	width: 965px;
	padding: 27px 0 0; 
	background: url(/page/-/images/bg-wrapper.png) repeat-y 0 0;
	overflow: hidden;
}

#logo {
	width: 108px;
	float: left;
	margin: 0 0 0 27px;
	padding: 0 0 308px;
}

#page, #top { 
	width: 751px;
	float: right;
	margin: 0 37px 0 0;
	display: inline;
}

#top {	border-top: 13px solid #000;}



#top #sublead {
	display: block;
	margin: 0 0 6px;
	padding: 0 0 6px;
	border-bottom: 13px solid #000;
	font-size: 13px;
	font-weight: bold;
}

#top h1 {
	width: 535px;
	height: 1.2em;
	line-height: 1.2em;
	float: left;
	font-size: 80px;
	font-weight: bold;
}

#top h2 {
	width: 195px;
	line-height: 14px;
	float: left;
	padding: 10px;
	color: #a0a0a0;
	font-size: 15px;
	font-weight: bold;
}

#nav {
	position: relative;
	height: 40px;
	margin: 6px 0 0;
	padding: 12px 0 0;
	border-top: 13px solid #000;
	clear: both;
}

#nav li {
	float: left;
	padding: 0 3px 0 8px;
	background: url(/page/-/images/icon-slash.png) no-repeat 0 0;
}

#nav li.first-child {
	padding: 0;
	background: none;
}

#nav li a {
	color: #000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

body.about #nav li#nav-about ul li a,
body.darkpurple #nav li#nav-donate ul li a,
body.orange #nav li#nav-media ul li a,
body.blue #nav li#nav-involved ul li a,
body.green #nav li#nav-policy ul li a { color: #000; }

#nav li.active a { color: #7b7b7b; }

body.about #nav li#nav-about a, 
body.darkpurple #nav li#nav-donate a, 
body.orange #nav li#nav-media a, 
body.purple #nav li#nav-home a, 
body.green #nav li#nav-policy a, 
body.blue #nav li#nav-involved a { color: #7b7b7b; }

body.about #nav li#nav-home a { color: #000; }

#nav ul {
	position: absolute;
	left: 0; top: 30px;
}

#nav ul li {
	float: left;
	padding: 0 3px 0 8px;
	background: url(/page/-/images/icon-slash-2.png) no-repeat 0 0;
}

#nav .active ul li a {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#nav li ul{
      display: none;
}

body.darkpurple #nav li#nav-donate ul,
body.orange #nav li#nav-media ul,
body.green #nav li#nav-policy ul, 
body.blue #nav li#nav-involved ul{
     display: block;
}

#content {
	width: 515px;
	float: left;
	padding: 7px 0 0;
}

#content p{
      padding: 5px 0;
}

#content h3 {
	line-height: 1.2em;
	padding: 4px 0 9px;
	font-size: 22px;
	font-weight: bold
}

#content h4 {
	line-height: 1.2em;
	font-size: 13px;
	font-weight: bold
}

#content h5 {
	line-height: 1.2em;
	font-size: 20px;
	font-weight: bold; color: #000; padding-bottom:10px
}


#side-nav {
	width: 226px;
	float: right;
}

#side-nav .wrapper { background: url(/page/-/images/bg-side-nav-top.png) no-repeat 0 0; }

#side-nav .inner { 
	padding: 13px;
	background: url(/page/-/images/bg-side-nav-bottom.png) no-repeat 0 100%; 
}


#side-nav h5 {
	padding: 3px 0 12px;
	font-size: 19px;
	font-weight: bold;
}

#side-nav p { padding: 5px 0; }

#side-nav .btn {
	display: block;
	width: 204px;
	height: 17px;
	padding: 5px 6px 0;
	text-align: right;
	overflow: hidden;
}

#login { position: relative; }

#login fieldset { height: 67px; }

#login legend {
	padding: 10px 0 12px;
	font-size: 19px;
	font-weight: bold;
}


#login div {
	position: absolute; 
	right: 5px; top: 10px;
	width: 125px;
}

#login div .text {
	width: 90px;
	margin: 0 0 7px;
	padding: 2px 2px 2px 20px;
	border: 1px solid #747474;
	font-size: 11px;
}

#login div .btn { 
	position: absolute;
	left: -92px; bottom: -22px;
}

#login div .btn input {
	background: none;
	border: none;
	margin: -2px 0 0;
	padding: 0 12px 0 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

#donate h5 {
	padding-right: 35px;
	background: url(/page/-/images/icon-donate.png) no-repeat 100% 0;
}

#donate .btn { margin: 0 -9px -5px; }
#donate .btn a {
	padding: 0 12px 0 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

#footer { 
	display: block;
	width: 975px;
	padding: 13px 0 20px 0px;
	background:  url(/page/-/images/bg-footer.png) no-repeat 0 0;
}

a.labour {
text-indent: -5000px;
height: 50px;
width: 50px;
display: block;
position: relative;
top: 0;
left: 0;
}

#footer ul li{ 
	display: inline; 
	padding: 0 6px 0 3px;
	background: url(/page/-/images/bg-line.png) no-repeat 100% 4px;
	}
	
#footer ul li.last-child{ background: none; }
	
#footer ul li a { 
	color: #666;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

#footer address { 
	display: block;
	padding: 0 6px 0 3px;
	font-size: 10px;
}


.square li {
	margin: 0 0 0 2em;
	list-style-type: square;
}


#content li {
	margin: 0 0 0 2em;
	list-style-type: square;
}


.line {
	clear: both;
	border-top: 5px solid #d6d6d6;
}

a.more {
	display: block;
	float: right;
	padding: 0 12px 0 0;
	font: bold 11px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.aural { position: absolute; left: -100em; }
.left { float: left; margin: 0 10px 10px 0; }
.right { float: right; margin: 0 0 10px 10px; }

table.table-list{
width: 515px;
}
table.table-list td.date{
width: 15%;
vertical-align: top;
}
table.table-list a.more{
float: none;
}

/* --------------------------------
	03. COLOURED ELEMENTS
-------------------------------- */

.purple #nav .active .active a, .purple #content h4, .purple .square, .purple .block-text h3,.purple .block-text .img em {color:#8c2c7d;}
.purple a {color:#8c2c7d; text-decoration:none; font-weight:bold}
.purple #logo { background: url(/page/-/images/bg-logo-purple.png) no-repeat 0 100%; }
.purple #content h4 { color: #8c2c7d; }
.purple a.more {
	color: #8c2c7d;
	background: url(/page/-/images/icon-arrow-purple.png) no-repeat 100% 3px;
}
.purple .square { color: #8c2c7d; }
.purple .btn { background: url(/page/-/images/bg-btn-purple.png) no-repeat 0 0; }
.purple .line {
border-top:5px solid #8c2c7d;
clear:both;
}

 .purple  #content li {margin: 0 0 0 2em;}
 .purple #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/purple_square.png)}

body.darkpurple #nav li#nav-donate ul li.active a, .darkpurple #content h4, .darkpurple .square, .darkpurple .block-text h3,.darkpurple .block-text .img em {color:#400c8a;}
.darkpurple a {color:#400c8a; text-decoration:none; font-weight:bold}
.darkpurple #logo { background: url(/page/-/images/bg-logo-darkpurple.png) no-repeat 0 100%; }
.darkpurple #content h4 { color: #400c8a; }
.darkpurple a.more {
	color: #400c8a;
	background: url(/page/-/images/icon-arrow-darkpurple.png) no-repeat 100% 3px;
}
.darkpurple .square { color: #400c8a; }
.darkpurple .btn { background: url(/page/-/images/bg-btn-darkpurple.png) no-repeat 0 0; }
.darkpurple .line {
border-top:5px solid #400c8a;
clear:both;
}
.darkpurple #content li {margin: 0 0 0 2em;}
.darkpurple #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/darkpurple_square.png)}

body.blue #nav li#nav-involved ul li.active a, .blue #content h4, .blue .square, .blue .block-text h3,.blue .block-text .img em {color:#4f91cb;}
.blue a {color:#4f91cb; text-decoration:none; font-weight:bold}
.blue #logo { background: url(/page/-/images/bg-logo-blue.png) no-repeat 0 100%; }
.blue #content h4 { color: #4f91cb; }
.blue a.more {
	color: #4f91cb;
	background: url(/page/-/images/icon-arrow-blue.png) no-repeat 100% 3px;
}
.blue .square { color: #4f91cb; }
.blue .btn { background: url(/page/-/images/bg-btn-blue.png) no-repeat 0 0; }
.blue .line {
border-top:5px solid #4f91cb;
clear:both;
}
.blue #content li {margin: 0 0 0 2em;}
.blue #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/blue_square.png)}


body.orange #nav li#nav-media ul li.active a, .orange #content h4, .orange .square, .orange .block-text h3,.orange .block-text .img em {color:#d06a2c;}
.orange a {color:#d06a2c; text-decoration:none; font-weight:bold}
.orange #logo { background: url(/page/-/images/bg-logo-orange.png) no-repeat 0 100%; }
.orange #content h4 { color: #d06a2c; }
.orange a.more {
	color: #d06a2c;
	background: url(/page/-/images/icon-arrow-orange.png) no-repeat 100% 3px;
}
.orange .square { color: #d06a2c; }
.orange .btn { background: url(/page/-/images/bg-btn-orange.png) no-repeat 0 0; }
.orange .line {
border-top:5px solid #d06a2c;
clear:both;
}
.orange #content li {margin: 0 0 0 2em;}
.orange #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/orange_square.png)}

.maroon #nav .active .active a, .maroon #content h4, .maroon .square, .maroon .block-text h3,.maroon .block-text .img em {color:#a30550;}
.maroon a {color:#a30550; text-decoration:none; font-weight:bold}
.maroon #logo { background: url(/page/-/images/bg-logo-maroon.png) no-repeat 0 100%; }
.maroon #content h4 { color: #a30550; }
.maroon a.more {
	color: #a30550;
	background: url(/page/-/images/icon-arrow-maroon.png) no-repeat 100% 3px;
}
.maroon .square { color: #a30550; }
.maroon .btn { background: url(/page/-/images/bg-btn-maroon.png) no-repeat 0 0; }
.maroon .line {
border-top:5px solid #a30550;
clear:both;
}
.maroon #content li {margin: 0 0 0 2em;}
.maroon #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/maroon_square.png)}

.gold #nav .active .active a, .gold #content h4, .gold .square, .gold .block-text h3,.gold .block-text .img em {color:#e9ab18;}
.gold a {color:#e9ab18; text-decoration:none; font-weight:bold}
.gold #logo { background: url(/page/-/images/bg-logo-gold.png) no-repeat 0 100%; }
.gold #content h4 { color: #e9ab18; }
.gold a.more {
	color: #e9ab18;
	background: url(/page/-/images/icon-arrow-gold.png) no-repeat 100% 3px;
}
.gold .square { color: #e9ab18; }
.gold .btn { background: url(/page/-/images/bg-btn-gold.png) no-repeat 0 0; }
.gold .line {
border-top:5px solid #e9ab18;
clear:both;
}
.gold #content li {margin: 0 0 0 2em;}
.gold #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/gold_square.png)}

.green #logo { background: url(/page/-/images/bg-logo-green.png) no-repeat 0 100%; }

body.green #nav li#nav-policy ul li.active a,
.green #content h4,
.green .square,
.block-text h3,
.block-text .img em { color: #458638; }

.green a {color:#458638; text-decoration:none; font-weight:bold}
.green .line { border-color: #458638; }
.green a.more {
	color: #458638;
	background: url(/page/-/images/icon-arrow-green.png) no-repeat 100% 3px;
}
.green .btn { background: url(/page/-/images/bg-btn-green.png) no-repeat 0 0; }
 .green #content li {
	margin: 0 0 1em 3em;}
 .green #content ul {list-style-image: url(http://www.kenlivingstone.com/page/-/images/bullets/green_square.png)}
/* --------------------------------
	04. HOMEPAGE ELEMENTS
-------------------------------- */

#city {
	margin: 5px 0;
	padding: 2px 15px 124px;
	background: url(/page/-/images/bg-city.png) no-repeat 0 100%;
	overflow: hidden;
}

#city ul {
	width: 220px;
	float: left;
}

#city li a {
	color: #54a2cb;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#homepage_image {padding:0 8px 8px 0;} 

#blog h3 { position: relative; }
#blog h3 #rss { 
	position: absolute;
	right: 0; top: 7px;
}

#blog ul { 
	width: 255px;
	float: right;
}

#blog li { 
	clear: both;
	padding: 0 0 12px; 
}

#blog .date {
	display: block;
	font-size: 12px;
}

#homepage .line {
border-top:5px solid #cccccc;
clear:both;
}


/* --------------------------------
	05. TERMS ELEMENTS
-------------------------------- */

#subpage .square li { padding: 5px 0; }

#subpage .square li p { 
	color: #000; 
	font-size: 13px;
}

#subpage .square li strong { font-weight: bold; }

.block-text { overflow: hidden; }

.block-text p {
	line-height: 14px;
	font-size: 12px;
	padding: 0 0 15px;
}

.block-text .left-col { 
	width: 251px;
	float: left;
}

.block-text .right-col { 
	width: 251px;
	float: right;
}

.block-text .lead {
	padding: 0 0 15px;
	font-weight: bold;
}

.block-text .img em {
	font-weight: bold;
	font-style: italic;

}

#content #lettersmain #lettersmainleft #lettersdata { font-size: 110%; }

#content #lettersmain #lettersmainright #lettersactions, 
#content #lettersmain #lettersmainright #lettersactions, 
#content #lettersmain #lettersmainright #lettersstats,
#content #lettersmain #lettersmainright #lettersleaderboard { font-size: 120%; }

#dataspan { font-size: 140%; }