/*
 Copyright Andrew Smith
 Author: Andrew Smith
*/
 
/*
COLOR SCHEME
- black		 #000
- white		 #fff
- mid grey   #999
- light grey #333
*/

/* GLOBALS */
body { font-family: Arial, sans-serif; background: #fff url(../images/background.jpg) no-repeat scroll 50% 10%; margin: 0; }
.container { position: relative; width: 800px; /*padding: 0 56px;*/ }
.container hr, .container p, .container ul, .container ol, .container dl, .container pre, .container blockquote, .container address, .container table, .container form { margin-bottom: 0.6em; }
.container h1 { font-size: 1.2em; }
.container h2 { font-size: 1em; }
.container h3 { font-size: 0.8em; }

/* HEADER */
#header { position: relative; /*width: 950px;*/ height: 380px; top: 0px; left: 0; background: transparent url(../images/header_background.jpg) no-repeat scroll top left; }
#paperclip { position: relative; top: 0px; width: 160px; height: 189px; background: transparent url(../images/paperclip.png) no-repeat; z-index: 99; }
#main_image { height: 260px; position: absolute; top: 42px; left: 70px; width: 678px; }
#logo	{ position: absolute; top: 61px; left: 88px; background: transparent url(../images/logo_background.png) no-repeat; padding: 25px 24px 21px; }

/* NAVIGATION */
#nav { position: relative; /*float: left;*/ width: 800px; height: 24px; background-color: #333; padding: 7px 0; }
#nav ul, #sub-nav ul { float: left; width: 780px; height: 22px; list-style-type: none; margin-left: 20px; }
#nav ul li { float: left; text-transform: lowercase; margin: 0; }
#nav ul li.active { font-weight: bold; }
#nav ul li a { display: block; color: #fff; text-align: center; text-decoration: none; padding: 4px 12px; margin: 0; }

#sub-nav { float: left; width: 838px; height: 20px; background-color: #527da7; }
#sub-nav ul li { float: left; padding: 0 20px; margin-left: 0; }
#sub-nav ul li.last { background: none; }
#sub-nav ul li a { display: block; color: #fff; text-decoration: none; padding: 0; }

/* MAIN CONTENT */
#main-image { position: relative; float: left; width: 800px; height: 369px; }
#long-title { position: absolute; bottom: 0; width: 800px; height: 22px; }
#long-title span { float: left; width: 250px; height: 20px; color: #fff; text-transform: lowercase; text-align: right; padding: 2px 15px 0 0; }
#long-title em { float: left; width: 535px; height: 22px; background-color: #fff; }
#wrapper { float: left; background-color: #fff; width: 760px; font-size: 1em; line-height: 16px; padding: 24px 20px 5px; margin-top: 10px; }
#content { float: left; width: 700px; padding: 0 30px; }
#content h1 { color: #000; font-family: Georgia, Arial; font-size: 18px; font-weight: normal; padding: 0 0 10px; border-bottom: 1px solid #ccc; }
#content .col { padding: 10px 8px; }
#content .col-wide { float: left; width: 430px; min-height: 280px; padding: 20px 8px; }
#content #col-1 ul { float: left; list-style-type: none; margin-left: 0px; }
#content #col-1 ul li { background: #fff url(../images/list_arrow.gif) no-repeat scroll 0 6px; margin: 0; padding-left: 14px; }
#content #col-1 ul li.active a { color: #999; }
#content #col-1 ul li a { color: #000; text-decoration: none; }
#content #col-1 .image { margin-right: 10px; border: 1px solid #d1d1d1; }
#content #col-1 { float: left; width: 220px; }
#content.about-us #col-1 { float: left; font-size: 1.2em; padding: 10px 86px 0 30px; width: 120px; }
#content #col-2 { float: left; width: 460px; padding: 10px 0px; }
#content #col-2 h2 { color: #000; font-family: Georgia, Arial; font-size: 18px; font-weight: normal; padding: 0 0 10px 120px; margin: 0 0 15px; }
#content #col-2 #good-salon h2 { color: #000; font-family: Georgia, Arial; font-size: 18px; font-weight: normal; padding: 0 0 10px 0px; margin: 0 0 15px; }
#content #col-2 #good-salon { padding-bottom: 15px; }
#content #col-2 .artist { float: left; width: 460px; border-bottom: 1px solid #ccc; padding-bottom: 25px; margin-bottom: 30px; }
#content #col-2 .artist .image { float: left; width: 100px; }
#content #col-2 .artist h4 { font-size: 1.0em; margin: 0 0 5px; }
#content #col-2 .artist .right-content { float: right; width: 338px; }
/*#content #col-2 .artist .right-content .more { display: none; }*/
/*#content #col-2 .artist a.url { display: block; }*/
#content #col-2 .artist .right-content .image-list { margin: 0 0 0 2px; list-style-type: none; padding: 20px 0; }
#content #col-2 .artist .right-content .image-list li { float: left; margin: 0 5px 0 0; list-style-type: none; }
#content #col-wide #posts { float: left; width: 507px; }
#content #col-wide #posts .post { border-bottom: 1px solid #ccc; display: inline-block; padding-bottom: 20px; margin-bottom: 27px; }
#content #col-wide #posts .last { border-bottom: none; margin-bottom: 0; }
#content .meta { float: left; width: 84px; }
#content .meta .author { float: left; width: 84px; padding: 10px 0; }
#content .meta .tags { float: left; padding: 0 0 2px; margin: 0 0 15px; width: 92px; }
#content .meta .date { background: #666 url(../images/date_gradient.gif) no-repeat scroll top left; border: 4px solid #d0d0d0; color: #fff; float: left; font-size: 0.9em; height: 32px; padding: 2px 1px 0px 32px; width: 40px; }
#content .meta .date .year { display: block; width: 30px; }
#content #col-wide #posts .summary { float: left; padding: 0 0 0 18px; position: relative; width: 405px; }
#content #col-wide #posts .summary .comments { position: absolute; right: 10px; top: 2px; width: 80px; }
#content #col-wide #posts .summary a { color: #000; text-decoration: none; }
#content #col-wide #posts .summary a:hover { color: #333; text-decoration: underline; }
#content #col-wide #posts h2 { color: #000; font-family: Georgia, Arial; font-size: 18px; font-weight: normal; padding: 0 0 15px; margin: 0 0 15px; }
#content.post-single #col-2 h2 { padding: 0 0 10px 0; }
#content.post-single .meta { width: auto; }
#content.post-single .meta .author { padding: 4px 20px 6px; }
#content.post-single #bookmarks { margin-top: 70px; width: 92%; }
#content.post-single #bookmarks h3 { font-size: 1.3em; font-weight: normal; }
#content.post-single #comments { border-top: 1px dashed #ccc; margin: 30px 0 0; padding: 10px 0 10px 0; }
#content.post-single #comments .info p { background-color: #eaeaea; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; margin-bottom: 0; padding: 10px; }
#content.post-single #comments h3 { font-family: Arial,sans-serif; font-size: 1.3em; font-weight: normal; margin: 0 0 2px; }
#content.post-single #comments h2 { margin: 10px 0 15px; }
#content.post-single #comments .jot-comment { overflow: hidden; padding: 10px; }
#content.post-single #comments .jot-list ul { list-style-type: none; }
#content.post-single #comments .jot-row { background: none; border: none; border-top: 1px solid #eee; position: relative; margin: 1px 0 0; }
#content.post-single #comments .jot-row-alt { background-color: #eee; border: none; border-top: 1px solid #eee; }
#content.post-single #comments .comment-title { color: #669933; padding-right: 40px; position: relative; z-index: 10; }
#content.post-single #comments .comment-num { color: #ddd; font-size: 3.1em; position: absolute; right: 0; top: 6px; }
#content.post-single #comments .comment-user img { float: left; height: 60px; margin: 3px 10px 3px 0 !important; position: relative; width: 60px; z-index: 999; }
#content.post-single #comments .comment-message { position: relative; z-index: 10; }
#content.page #col-2,
#content.about-us #col-2 { background: none; }
#content #col-3 { width: 218px; background: none; }
#content #press .press { border: 1px solid #ccc; float: left; width: 121px; height: 166px; margin: 0 30px 70px 0; }
#content #press .press h4 { font-size: 1.2em; font-weight: normal; margin: 5px 0 0; }
#content #press .press small { font-size: 0.8em; font-weight: normal; }
#content a.handler { color: #000; background: transparent url(../images/arrow_down.gif) no-repeat 100% 65%; padding-right: 10px; text-decoration: none; }
#content a.handle { color: #000; text-decoration: none; }
#content a.close { background: transparent url(../images/arrow_up.gif) no-repeat 100% 65%; }
#categories { float: left; padding: 0 30px; width: 700px; }
#categories .component { position: relative; float: left; width: 233px; }
#categories .component h3 { color: #333; font-family: Georgia, Arial; font-size: 1.5em; font-weight: normal; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; margin: 6px 0 0; }
#categories #comp-2.component { width: 232px; height: 149px; border: none; }
#categories .component ul { list-style-type: none; margin-left: 3px; }
#categories .component ul li { background: #fff url(../images/list_arrow.gif) no-repeat scroll 0 4px; margin: 0; padding-left: 14px; }
#categories .component img { padding: 10px 0; }
#categories .component p { padding: 0px 10px; }
#categories .component p a, #categories .component p a:link { color: #000; }

#pagination { text-align: right; }
.ditto_paging { border-top: 1px solid #ccc; color: #000; font-size: 86%; padding: 10px; }
#ditto_pages .ditto_currentpage { border: 1px solid black; padding: 1px 5px 2px; margin-right: 1px; background-color: #008CBA; color: #fff; }
#ditto_pages .ditto_off { border: 1px solid #ccc; padding: 1px 5px 2px; margin-right: 1px; color: #ccc;}
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited { border: 1px solid #008CBA; padding: 1px 5px 2px; margin-right: 1px; text-decoration: none !important; color: black; }
#ditto_pages a:hover { background-color: #fff; color: #000; }

/* Homepage Specific */
#content.home p { color: #333; font-family: Georgia, Arial; font-size: 1.7em; line-height: 1.2em; }
#content.home #col-2 .component { position: absolute; bottom: 64px; }

.errors { color: #f00; padding: 0 0 20px 77px; }

#booking-form { float: right; width: 372px; margin-right: 20px; }
#booking-form p { padding: 0 10px; margin: 0 0 .8em; border: none; }
#booking-form p label { float: left; font-weight: normal; color: #ccc; width: 50px; }
#booking-form p input.size, 
#booking-form p textarea.size { width: 290px; }
#booking-form p input.action { background: #FFFFFF url(../images/submit_btn.gif) no-repeat scroll left top; border: none; height: 15px; margin: 10px 0 0 0; overflow: hidden; padding: 15px 0 0 64px; width: 64px; }

.smart-form { /*float: right; width: 372px; margin-right: 20px; */}
.smart-form p { padding: 0 10px; margin: 0 0 .8em; border: none; }
.smart-form p label { float: left; font-weight: normal; color: #ccc; width: 90px; }
.smart-form p label strong { color: #f00; }
.smart-form p input.size, 
.smart-form p textarea.size { width: 336px; }
.smart-form div.captcha { margin: 2px 0 0 100px; }
.smart-form p.action { margin: 2px 0 0 90px; }
.smart-form p.action input { background-color: #eee; border: 1px solid #ccc; }

#websignupfrm p label { width: 120px; }
#websignupfrm p input.inputBox { width: 298px; }

/* SIDEBAR CONTENT */
#sidebar { float: right; width: 160px; }
#sidebar .widget { background: #666 url(../images/date_gradient.gif) repeat-x scroll top left; border: 4px solid #d0d0d0; color: #fff; padding: 2px 10px 10px 12px; }
#sidebar .widget .widget-head { padding: 2px 0px; }
#sidebar .widget .widget-head h3 { font-family: Georgia,Arial; font-size: 1.2em; font-weight: normal; margin: 2px 0px; }
#sidebar .widget .widget-body a { text-decoration: none; }
.box { text-align: left; margin-bottom: 10px; }
.box .head { background-color: #527da7; }
.box .head h3 { color: #fff; font-size: 1.1em; font-weight: normal; text-transform: uppercase; padding: 5px 8px; margin: 0; }
.box .body { background-color: #272b30; color: #fff; }
.box .body table { width: 100%; }
.box .body table,
.box .body table td,
.box .body table th { font-size: .9em; text-transform: uppercase; border: none; padding: 0 10px; }

/* Sidebar Form Elements */
#login .login-form { padding: 8px 0 0; }
#login .login-form p { margin-bottom: 10px; }
#login .login-form p label { float: left; width: 105px; padding: 10px 0pt; }
#login .login-form p.checkbox label { padding: 0; }
#login .login-form p input { font-family: Verdana, Arial, sans-serif, sans-serif; font-size: 1.1em; font-weight: normal; }
#login .login-form p input.size { border: 1px solid #ccc; padding: 8px 10px; width: 105px; }
#login .login-form p textarea.size { border: 1px solid #ccc; padding: 8px 10px; width: 105px; }
#login .login-form div.actions { /*float: right;*/ margin-top: 9px; padding-right: 2px; text-align: right; }
#login .login-form div.actions input { background-color: #333; border: 1px solid #999; color: #fff; font-weight: bold; padding: 4px 10px 4px 12px; }
#login .login-form div.actions #checkbox { display: block; margin-top: 10px; text-align: right; }
#login .login-form div.actions #checkbox input { background: none; border: 1px solid; margin: 0; padding: 0; }
#login .login-form div.actions #checkbox label { margin: 0; padding: 0 0 0 5px; }
#login .login-form p input.submit { float: right; margin: 0 20px 0 0; }

/* Overide styles */
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #aaa; outline: none; }

/* FOOTER */
#footer { float: left; width: 710px; margin-top: 15px; padding: 0 50px; }
#footer p { color: #ccc; font-size: 0.9em; text-align: center; border-top: 1px solid #ccc; padding: 10px 0; }