/*
Theme Name: Bespoke
Description: Bespoke Theme
Version: 1.0
Author: Ian Atkins
Author URI: http://www.kith-kin.co.uk
Tags:


*/
*{margin: 0px; padding: 0px;}
.left {float: left;}
.right {float: right;}
a,img {outline: none; border: 0px;}
.clear {clear: both;}
li {list-style-type: none;}
a {color: #14B300; text-decoration: none;}
body {background-image: url('images/content-bg.gif'); background-repeat: repeat-x; color:#333333; font-family: Helvetica, arial, sans-serif;}

/* container */
#container {margin-left: auto; margin-right: auto; width:946px; position: relative;}

/* header */
#header {clear: both;}
#header .logo {margin-top: 35px; float: left;}
#header .right {margin-top: 5px; width: 386px; text-align: right;}
#header .right img {margin-bottom: 26px; float: right;}
#header .right .clients-open img {margin-top: -5px; margin-left: 2px;}

/* menu */
#menu {width: 386px; height: 83px; background-image: url('images/menu.gif'); background-position:top left; float: right; margin-bottom: 10px}
#menu li {float: left; height: 40px; overflow: hidden;}
#menu a { padding-top: 40px; display: block;}
#menu li.page-item-3 {width: 101px;}
#menu li.page-item-5 {width: 83px;}
#menu li.page-item-7 {width: 73px;}
#menu li.page-item-9 {width: 126px;}
#menu li.page-item-3 a:hover, body.page-id-3 #menu li.current_page_item a {background-image: url('images/menu_active.gif');}
#menu li.page-item-5 a:hover, body.page-id-5 #menu li.current_page_item a , body.parent-pageid-5 #menu li.current_page_ancestor a{background-image: url('images/menu_active.gif'); background-position: -101px 0px;} /* work */
#menu li.page-item-7 a:hover, body.blog #menu li.current_page_item a, .archive #menu li.page-item-7 a, .single #menu li.page-item-7 a {background-image: url('images/menu_active.gif'); background-position: -184px 0px;}
#menu li.page-item-9 a:hover, body.page-id-9 #menu li.current_page_item a {background-image: url('images/menu_active.gif'); background-position: -257px 0px;}

/* client area menu */
#menu.clients {width: 326px; background-image: url('images/menu-clients.gif');}
#menu.clients li.page-item-92 {width: 158px; }
#menu.clients li.page-item-3 {width: 168px;}
#menu.clients li.page-item-3 a:hover, .page-id-3 #menu.clients li.current_page_item a {background-image: url('images/menu-clients_active.gif'); background-position: -158px 0px;}
#menu.clients li.page-item-92 a:hover, .page-id-92 #menu.clients li.current_page_item a, .page-template-client-area-php  #menu li.page-item-92 a {background-image: url('images/menu-clients_active.gif');}


/* content */
#content {width: 627px; float: right; margin-top: 30px; margin-bottom: 100px; overflow: hidden;}
#content h1, #left h1.blog {font-size: 18px; font-family: Georgia; background-image:url('images/header-bg.gif'); background-position: bottom; background-repeat: repeat-x; padding-bottom: 4px; margin-bottom: 20px; font-weight: normal;}
#content h1 a {text-decoration: none; color: #333333;}
#content ul { margin-right: -14px; width: 640px;}
#content ul li {width: 306px; height: 212px; float: left; margin-right: 14px; margin-bottom: 22px; position: relative;}
#content ul li h2 {font-size: 11px; font-weight: normal; text-transform: uppercase; line-height: 20px;}
#content ul li h2 a {text-decoration: none; color: #333333;}
#content ul li .image {padding: 10px 10px 0px 10px; background-image: url('images/portfolio-bg.gif'); background-repeat: no-repeat;}
#content ul li img {position: relative;}
#content ul li .caption {left: 0px; top:20px; z-index: 2; display: none; position: absolute; width: 286px; height:172px; background-image: url('images/green-bg.gif'); background-repeat: no-repeat; padding: 10px;}
#content ul li .caption a {color: #FFFFFF; padding: 12px; display: block; font-size: 18px; line-height: 20px; font-family: Georgia;text-decoration: none; width: 262px; height:158px; }
#content ul li .caption a span {color: #000000;}

#left {width: 306px; float: left; margin-top: 30px; font-size: 12px;font-family: Helvetica, arial, sans-serif;}
#left h1 {font-size: 20px; line-height: 24px; font-weight: normal; font-family: Georgia; margin-bottom: 26px; color: #14B300;}
#left h1 span {color: #14B300;}
#left h2 {color: #666666; font-size: 20px; line-height: 24px; font-family: Georgia; font-weight: normal;}
#left h3 {line-height:24px; font-weight:normal; font-size: 12px; color:#14B300; margin-bottom: 0px; font-family: Helvetica, arial; margin-top: 20px;}
#left p {color: #000000; font-size: 12px; }
#left blockquote {margin-top: 15px; margin-bottom: 15px; font-size: 14px; font-family: Georgia; font-style: italic; color: #333333; padding: 10px; background-color: #EFEFEF; display: block; clear: both;}
#left h1.blog {margin-top: 50px; width: 280px; color: #000000;}
#left h1.blog a {color: #000000; text-decoration: none;}
#left ul.blog {width: 280px;} 
#left ul.blog li {margin-bottom: 10px;}
#left ul.blog li a {color: #14B300; text-decoration: none;}
#left ul.blog li p {font-size: 10px; color: #666666; margin-bottom: 15px;}

/* sidebar */
#sidebar {width: 306px; float: left; margin-bottom: 100px; font-size: 12px;font-family: Helvetica, arial, sans-serif;}
#sidebar ul {width: 266px; margin-top: 35px; overflow: hidden;}
#sidebar ul li.title {background-image: url('images/blog-bg.gif'); background-position: top left; line-height: 25px; padding-left: 0px; margin-left: 0px; list-style-type: none; list-style-image: none; width:266px;}
#sidebar ul li.title h2 {margin: 0px; line-height: 25px; text-transform: uppercase; font-family: Georgia; font-size: 14px; font-weight: bold; text-indent: 10px;  margin-bottom: -30px; height: 68px;}
#sidebar ul li { margin-left: 10px; white-space:nowrap; font-size: 0px; }
#sidebar ul li a {color: #000000; text-decoration: none; line-height: 14px; display: block; padding-left: 17px; background-image: url('images/blog-arrow.gif'); background-position: top left; background-repeat: no-repeat; white-space:normal; font-size: 12px;}
#sidebar ul li.feed {list-style-image: none;}
#sidebar #feed {margin-left:30px; width: 200px; }
#sidebar #feed li {position: relative; height: 160px; width: 160px; overflow: hidden; margin-bottom: 16px; list-style-type: none; list-style-image: none; color: #FFFFFF; }
#sidebar #feed li img {overflow: hidden; position:absolute; clip:rect(0px,160px,160px,0px); display: block; top:0px; left: 0px;}
#sidebar #feed li a {display: inline;}


/* work */
#content.wide {width: 946px;}
#content.wide ul {margin-right: -16px; width: 962px;}

/* portfolio & clients*/
.parent-pageid-5 #content ul li, .parent-pageid-92 #content ul li  {width: 608px; height: 391px; display: block; background-image:url('images/portfolio-large-bg.gif'); background-position: top; background-repeat: no-repeat; padding: 10px; margin-bottom: 36px; height: auto;}
.parent-pageid-5 #left h1,.parent-pageid-92 #left h1  {color: #14B300; margin-bottom: 2px;}
.parent-pageid-5 #left a.url,.parent-pageid-92 #left a.url {display: block; color: #000000; line-height: 15px; text-decoration: underline;}
.parent-pageid-5 #left h2, .parent-pageid-92 #left h2 {margin-bottom: 20px;  margin-top: 26px;}
.parent-pageid-5 #left .add-this, .parent-pageid-5 #left .share-this, .parent-pageid-92 #left .add-this, .parent-pageid-92 #left .share-this  {margin-top: 20px; float: left;}
.parent-pageid-5 #left .more, .parent-pageid-92 #left .more {display: none; overflow: visible;}
.parent-pageid-5 #left .more h2, .parent-pageid-92 #left .more h2 {font-size: 12px; color:#14B300; margin-bottom: 0px; font-family: Helvetica, arial; margin-top: 20px;}
.parent-pageid-5 ul div.image-caption, .parent-pageid-92 ul div.image-caption {font-size: 10px; font-family: Helvetica,arial,sans-serif; color:#666666; position: relative; line-height: 20px;}
.parent-pageid-5 #left p,  .parent-pageid-92 #left p {padding-top: 10px;}
#left a.download {color: #14B300;}

/* client area template */
.page-template-client-area-php #content ul li {width:inherit; height: inherit; background-image: none;float:left;
height:212px; margin-bottom:22px; margin-right:14px; position:relative; width:306px; padding: 0px;}
#go-back {position: absolute; right: 0px; top:120px;}
.read-more {display: block; width:106px ; height:16px ; background-image: url('images/read-more.gif'); float: left; margin-top: 20px; margin-right: 2px; cursor: pointer;}
.read-more.open {background-image: url('images/read-less.gif');}

/* contact */
.map {width: 606px; height: 391px; display: block; background-image:url('images/portfolio-large-bg.gif'); background-position: top; background-repeat: no-repeat; padding: 10px;}
#map {width: 606px; height: 401px;}
.gmnoprint {font-size: 12px;}

/* blog */
.postmetadata {margin-bottom: 26px; font-size: 11px;}
.postmetadata a {color: #333333; text-decoration: underline;}
.blog #content h1, .single #content h1, .archive #content h1 {margin-bottom: 5px;}
.blog #content .entry, .single #content .entry , .archive #content .entry {margin-bottom: 45px; color: #333333; font-size: 12px;}
.blog #content .entry p, .single #content .entry p, .archive #content .entry p {margin-bottom: 26px;}
.blog #content  a, .single #content a, .archive #content a  {color: #14B300;}

/* blog comments */
#respond {font-size: 12px;}
.navigation {font-size: 12px; margin-top: 26px; background-image:url('images/header-bg.gif'); background-position: top; background-repeat: repeat-x; line-height: 30px; height: 30px; clear: both;}
.navigation .alignleft {float: left;}
.navigation .alignright {float: right;}
#comment {width: 100%; margin-bottom: 16px;}

/* client area */
#client-area {width: 386px; height: 145px; position: absolute; right:0px; top:25px; z-index: 2; display: block; background-image: url('images/login-area.png'); display: none;}
#client-area .close {position: absolute; top: 0px; right:0px; height: 30px; width: 80px; display: block; cursor: pointer; z-index: 3;}
#client-area .text {position:relative; padding: 16px; color: #FFFFFF; font-size: 11px; padding-top: 38px; position: relative;}
#client-area a.manage, #client-area a.engage {background-image: url(images/login-arrow.png); background-position: right; background-repeat: no-repeat; padding-right: 22px; margin-left: 16px; line-height: 20px; height: 20px; display: block; float: left; margin-top: 16px}
#client-area a.manage {width: 120px;}
#client-area a.engage {width: 115px;}
#client-area a img {margin-top: 2px;}
form.login-form {margin-bottom: 200px;}

/* creds */
#creds {width: 386px; height: 514px; position: absolute; right:0px; top:25px; z-index: 2; display: block; background-image: url('images/request-credentials.gif'); display: none; overflow: hidden;}
#creds .text {height: 120px;}
#creds .text, #newsletter .text {position:relative; padding: 16px; color: #FFFFFF; font-size: 11px; padding-top: 38px;}
#creds .text p, #newsletter .text p {padding-bottom: 10px;}
#creds .text  a, #newsletter .text  a {color: #14B300; text-decoration: none;}
#creds form {padding: 16px; padding-left: 40px; padding-right: 40px; position:relative;}
#creds form input, #newsletter input {width: 146px; height: 18px; padding-top: 2px; background-color: #FFFFFF; text-indent: 5px; color: #333333; border: 0px; font-size:11px; margin-top: 2px; margin-bottom: 4px;}
#creds form label, #newsletter label {color: #FFFFFF; display: block; line-height: 15px; font-size: 11px;}
#creds form label span {color: #14B300;}
#creds textarea {width: 296px; height: 70px; padding: 5px; font-family: Arial; font-size: 11px;  margin-bottom: 5px;}
#creds input.submit {width: 306px; height: 20px; margin-top: 24px; padding-top: 0px; clear: both;}
#creds .close {position: absolute; top: 0px; right:0px; height: 30px; width: 80px; display: block; cursor: pointer; z-index: 3;}
#creds .error, #newsletter .error {color:red;}
#creds label.error {margin-bottom: 5px; width: 146px; font-size: 10px;}
#creds select {width: 150px;}
#creds .relative {position: relative; width: 306px;}
#creds .confirmation.error, #newsletter .confirmation.error {font-size: 11px; color: red;}
#creds .confirmation {font-size: 11px; color: #14B300; display: none; line-height: 30px; height: 30px; clear: both;}
#creds .loading {background-image:url(images/loading.gif); height:16px; position:absolute; right:4px; top:26px; width:16px; z-index:2; display: none;}


/* newsletter */
#newsletter {width: 386px; height: 180px; position: absolute; right:0px; top:25px; z-index: 2; display: block; background-image: url('images/newsletter-signup.png'); display: none;}
#newsletter .close {position: absolute; top: 0px; right:0px; height: 30px; width: 80px; display: block; cursor: pointer; z-index: 3;}
#newsletter .text {position: relative;}
#newsletter form {padding-left: 16px; padding-right: 10px; position: relative;}
#newsletter input {width: 166px;}
#newsletter input.submit {width: 20px; height: 20px; margin: 0px; padding: 0px; position: absolute; margin-left: 2px;margin-top: 2px; right:0;
top:15px;}
#newsletter .right {padding-right: 22px; position: relative;}
#newsletter .confirmation {font-size: 11px; color: #14B300; display: none;padding-left: 16px; line-height: 30px; height: 30px; clear: both;}
#newsletter .loading {background-image:url(images/loading.gif); height:16px; position:absolute; right:2px; top:19px; width:16px; z-index:2; display: none;}


/* footer */
#footer { background-image:url(images/header-bg.gif); background-position:center top; background-repeat:repeat-x; width:946px; font-size: 11px; line-height: 30px; display:block; clear: both;}
#footer a {text-decoration: none; color: #333333;}
#footer .left {text-align: left;}
#footer .right {text-align: right;}
#footer .right a {padding-left:10px;}
#footer ul li {display: inline;}
#footer ul li.current_page_item a {color: #14B300}

/* add this reskin */
#atffc {display: none;}
body #at15s_head {background-color: #FFFFFF; color: #333333;}
body #at_hover, body #at15s {border: 0px; background-color: #FFFFFF;}
body #at_hover .at_item {width:92px !important;}
body #at15s {width: 210px !important;}
body .at-promo-content {display: none;}
body .at-promo-single {display: none;}

/* content page */
.page-template-content-php #left {width: 612px;}
.page-template-content-php #left p {margin-bottom: 20px;}
.page-template-content-php #left {margin-bottom: 20px;}