/*
Theme Name: Westside London
Theme URI: http://wordpress.org/
Description: Wordpress theme for Westside London
Version: 1.6
Author: Jon Brain
Author URI: http://jonathanbrain.com/
Tags: white, custom header, fixed width, two columns, widgets, gallery
*/

/* Reset CSS - thanks, Eric */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* my own reset */

input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  }

/* end of reset */


/* ====== basics ====== */

body { 
background-image: url(images/bg.gif); 
color: #494848; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 0.75em;   
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4em; font-family: "Trebuchet MS", Helvetica, sans-serif; }

p,
address { line-height: 1.6em; margin-bottom: 18px; font-style: normal; }
  
li { line-height: 1.6em; }

a,
a:link,
a:visited,
a:active { color: #00aeff; text-decoration: none; line-height: 1.6em; }
a:hover { color: #494848; }

.cleared { clear: both; }
.hidden { display: none; }
.invisible { visibility: hidden; }
  
  
/* ====== main structures ====== */
  
#wrapper { width: 954px; margin: 0 auto; position: relative; }
#container { float: left; background-color: #fbffff; }

#header { width: 884px; border-left: 1px solid #a2a5a5; border-right: 1px solid #a2a5a5; padding: 110px 34px 12px 34px; float: left; position: relative; }
#header #logo a { width: 315px; height: 30px; background: transparent url(images/logo.gif) 0 0 no-repeat; position: absolute; top: 57px; left: 49px; }
#header #logo a span { display: none; }
#header #tagline { width: 228px; height: 20px; background: transparent url(images/tagline.gif) 0 0 no-repeat; position: absolute; top: 69px; left: 679px; }
#header #tagline span { display: none; }
#header #nav { width: 856px; min-height: 26px; background: transparent url(images/bg_nav.gif) bottom left no-repeat; padding: 24px 14px 7px 14px; }
#header #nav li { display: block; float: left; font-family: "Trebuchet MS", Helvetica, sans-serif; }
#header #nav li a { display: block; float: left; font-size: 120%; font-weight: bold; color: #494848; }
#header #nav li a:hover { color: #00aeff; }
#header #nav .current_page_item a { color: #00aeff; }
#header #nav li span { padding: 0 8px; font-size: 120%; line-height: 1.6em; font-weight: normal; }
#header #nav li a:hover span { color: #494848; }
#header #nav .current_page_item span { color: #494848; }

#main { width: 884px; border-left: 1px solid #a2a5a5; border-right: 1px solid #a2a5a5; padding: 0 34px 12px 34px; position: relative; float: left; }

#footer { width: 884px; color: #fbffff; background: #262828; padding: 0 35px 0 35px; position: relative; border-bottom: 14px solid #000; float: left; }
#footer address { float: left; margin: 15px 0 0 0; padding: 0 0 15px 15px; font-size: 90%; line-height: 1.2em; }
#footer address #footer-address-top { margin-bottom: 9px; display: block; }
#footer #copyright { float: right; margin: 65px 0 0 0; font-size: 90%; line-height: 1.2em; }


/* ====== content ====== */

.section { float: left; width: 884px; display: block; margin: 0 0 12px 0; clear: both; }
.section h2 { font-size: 200%; padding: 0 0 2px 0; }
.section h2 .hi-lite { color: #00aeff; }
.section .extra-margin { padding: 15px 0 2px 0; }
.column-left { float: left; width: 433px; }
.column-right { float: right; width: 433px; }
.column-section { width: 433px; display: block; padding: 14px 0 0 0; }
.column-section-copy { width: 405px; padding: 14px 14px 1px 14px; margin: 0 0 6px 0; background: transparent url(images/bg_gradient.gif) left bottom no-repeat; }
.column-section-copy .date-and-title { margin: 0; }
.column-section-client-list h2 { padding: 0 0 0 14px; }
.column-section-client-list #client-list { display: block; float: left; width: 100%; padding: 9px 0 0 0; }
.column-section-client-list #client-list li { display: block; float: left; width: 141px; height: 67px; margin: 0 5px 5px 0; }
.column-section-client-list #client-list a { display: block; float: left; width: 141px; height: 67px; }
.column-section-client-list #client-list img { display: block; width: 141px; height: 67px; }
.column-section-client-list #client-list .last { margin: 0 0 5px 0; }
.column-section-latest-projects { width: 416px; padding: 14px 0 0 18px; }
.column-section-latest-projects h2 { padding: 0 0 2px 14px; }
.column-section-latest-projects #latest-projects li { width: 416px; height: 204px; display: block; margin: 0 0 21px 0; }
.column-section-latest-projects #latest-projects a { width: 416px; height: 204px; display: block; background: transparent url(images/bg_latestprojects.gif) left bottom no-repeat; position: relative; }
.column-section-latest-projects #latest-projects .latest-projects-image { width: 394px; height: 127px; position: absolute; left: 11px; top: 12px; z-index: 10; }
.column-section-latest-projects #latest-projects .latest-projects-image-frame { width: 396px; height: 129px; position: absolute; left: 10px; top: 11px; z-index: 5; }
.column-section-latest-projects #latest-projects .latest-projects-header { width: 394px; padding: 152px 0 0 14px; display: block; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 150%; }
.column-section-latest-projects #latest-projects .latest-projects-copy { width: 394px; padding: 2px 0 0 14px; display: block; color: #494848; }

#gallery { margin: 5px 0 0 0; float: left; width: 884px; }
#gallery li { display: block; width: 193px; height: 194px; margin: 0 37px 0 0; float: left; position: relative; padding: 0 0 66px 0; }
#gallery .last { margin: 0 0 0 0; }
#gallery a { display: block; width: 193px; height: 188px; border-bottom: 6px solid #00aeff; background: transparent url(images/frame_gallery.gif) 0 0 no-repeat; position: relative; float: left; }
#gallery a:hover { border-bottom: 6px solid #494848; }
#gallery img { width: 185px; height: 114px; position: absolute; left: 4px; top: 4px; }
#gallery span { color: #494848; display: block; float: left; }
#gallery .row-client { width: 100%; padding: 141px 0 0 0; }
#gallery .row-project { clear: both; width: 100%; }
#gallery .gallery-client { width: 48px; font-weight: bold; }
#gallery .gallery-client-name { width: 145px; }
#gallery .gallery-project { width: 48px; font-weight: bold; }
#gallery .gallery-project-detail { width: 145px; }

#map { float: left; padding: 0 0 7px 0; }


/* ====== lightbox ====== */

#lightbox-overlay { width: 100%; height: 100%; position: absolute; z-index: 100; top: 0; left: 0; background-color: #000; opacity: 0.5; filter: alpha(opacity=50); }
#lightbox-frame { position: absolute; left: 50%; width: 700px; height: 480px; z-index: 250; padding: 19px; margin: 60px 0 0 -369px; background: transparent url(images/frame_lightbox.png) 0 0 no-repeat; }
#lightbox-outer { position: relative; width: 700px; height: 480px; overflow: hidden; background: #fff; }
#lightbox-inner { height: 480px; }
#lightbox-inner img { width: 700px; height: 480px; float: left; }
#lightbox-close { background: transparent url(images/button_close.png) 0 0 no-repeat; width: 32px; height: 32px; display: block; position: absolute; left: 6px; top: 6px; }
#lightbox-close span { display: none; }
#lightbox-previous { position: absolute; top: 200px; left: 50px; width: 47px; height: 78px; display: block; z-index: 200; background: transparent url(images/button_previous.png) 0 0 no-repeat; }
#lightbox-previous span { display: none; }
#lightbox-next { position: absolute; top: 200px; right: 50px; width: 47px; height: 78px; display: block; z-index: 200; background: transparent url(images/button_next.png) 0 0 no-repeat; }
#lightbox-next span { display: none; }


/* ====== blog ====== */

.section-news { float: left; width: 580px; display: block; margin: 0 0 12px 0; clear: both; }
.section-news h2, .section-news h3 { font-size: 200%; padding: 0 0 2px 0; }
.section-news h2 .hi-lite { color: #00aeff; }
.section-news h2.pagetitle { font-size: 140%; padding: 14px 0 2px 14px; }
.section-news .date { margin-top: -4px; }
.column-section-news { width: 580px; display: block; padding: 14px 0 0 0; }
.column-section-news-copy { width: 552px; padding: 14px 14px 1px 14px; margin: 0 0 6px 0; background: transparent url(images/bg_gradient_news.gif) left bottom no-repeat; }
#sidebar { float: right; width: 286px; display: block; margin: 0 0 12px 0; }
#sidebar h2 { font-size: 200%; padding: 0 0 2px 0; }
#sidebar h2 .hi-lite { color: #00aeff; }
#sidebar .sidebar-copy { width: 258px; padding: 14px 14px 16px 14px; margin: 0 0 6px 0; background: transparent url(images/bg_gradient_sidebar.gif) left bottom no-repeat; }

/* services list */
#serv_list ul li
{
 margin-left: 15px;
 list-style-type: disc;
}
