/*
Theme Name: Douglas and King
Theme URI: http://imperodesign.com/
Description: WordPress theme for Douglas And King
Version: 1.0
Author: IMPERO Design
Author URI: http://imperodesign.com/
*/

/* Eric Meyer Reset */
/*html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0px; padding: 0px; border: 0px; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }*/

/*****************************************************************************/
/*****************************     General       *****************************/
/*****************************************************************************/
* {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    height: 100%;
    min-height: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

body {
    height: 96%;
    /*background: url('images/backgrounds/main.jpg');*/
    font-family: "Arial";
    font-size: 12px;
    color: black;
    padding: 10px;
    background: white;
}


#wrapper {
    height: auto;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: url('images/backgrounds/main.jpg');
	background-position: center center;
}

/*****************************************************************************/
/*****************************     Sidebar       *****************************/
/*****************************************************************************/

#wrapper #sidebar {
    height: auto;
    width: 174px;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 20px;
}

#wrapper #sidebar a {
    position: relative;
    z-index: 1;
}

#wrapper #sidebar #sidebar-container {
    height: auto;
    position: absolute;
    padding: 20px 20px 0 20px;
    top: 0;
    bottom: 20px;
    width: 154px;
    background: url('images/sidebar/bg.png') repeat-y;
}

#wrapper #sidebar #sidebar-container #logo {
    margin: 0 0 30px 0;
}

#wrapper #sidebar #sidebar-container #nav {
    border-bottom: 1px solid #0D1217;
    font-family: "Courier New";
    font-size: 16px;
}

#wrapper #sidebar #sidebar-container #nav ul li {
    padding: 5px 0;
    border-top: 1px solid #0D1217;
    list-style: none;
}

#wrapper #sidebar #sidebar-container #nav ul li a {
    text-decoration: none;
    color: white;   
    text-transform: uppercase;
}

#wrapper #sidebar #sidebar-container #nav ul li a:hover {
    color: #61bc00;
}

#wrapper #sidebar #sidebar-container #contact {
    z-index: 1;
    position: absolute;
    bottom:8px;
    font-family: "Courier New";
    font-size: 11px;
    color: white;
}

#wrapper #sidebar #sidebar-container #contact a {
    border-bottom: 2px solid #5D5D5C;
    text-decoration: none;
    color: white;
}

#wrapper #sidebar #sidebar-container #contact a:hover {
    color: #61bc00;
}

#wrapper #sidebar #author {
    position: absolute;
    bottom: -4px;
    height: 15px;
    margin: 3px 0;
    left: 110px;
}

/*****************************************************************************/
/***************************     Navigation       ****************************/
/*****************************************************************************/

.spacerdiv {
    width: 100%;
    height: 28px;
    display: block;
}

#wrapper #navigation {
    background: black;
    height: auto;
    display: block;
    overflow: hidden;
    position: absolute;
    left: 222px;
    bottom: 0px;
    top: 20px;
    width: 165px;
    padding: 0px 20px 0 20px;
    
}

#wrapper #navigation h2 {
    font-size: 24px;
    color: white;
    margin: 20px 0 20px 0;
    font-weight: normal;    
}

#wrapper #navigation #navigation-content p {
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    color: white;
    margin: 0 0 34px 0;
}

#wrapper #navigation #navigation-content h3 {
    font-size: 14px;
    font-weight: normal;
    color: #5c9935;
    line-height: 12px;
    text-transform: uppercase;
}

#wrapper #navigation #navigation-content ul {
    list-style: none;
    color: white;
}

#wrapper #navigation #navigation-content ul li {
    padding: 5px 0;
    line-height: 12px;
}

#wrapper  #navigation #navigation-content ul li a {
    color: white;
    text-decoration: none;
}

#wrapper #navigation #navigation-content ul li a:hover {
    color: #5c9935;
}

#wrapper #navigation #navigation-content {
    height: auto;
    position: absolute;
    top: 70px;
    bottom: 0;
    padding: 0 20px 0 0;
}

/*****************************************************************************/
/*********************     Content  - IMAGE SLIDER      **********************/
/*****************************************************************************/

div.wrap {
    width : 446px;
    margin : 0 auto;
    text-align : left;
}

#slide-holder {
    z-index : 40;
    width : 446px;
    height : 315px;
    position : relative;
}

#slide-runner {
    width : 446px;
    height : 315px;
    overflow : hidden;
    position : relative;
}

#slide-holder img {
    margin : 0;
    display : none;
    position : absolute;
}

#slide-controls {
    left : 0;
    bottom : 0px;
    width : 446px;
    height : 20px;
    display : none;
    position : absolute;
    background : transparent;
}

#slide-controls p.text {
    float : left;
    color : #fff;
    display : inline;
    font-size : 10px;
    line-height : 16px;
    margin : 15px 0 0 20px;
    text-transform : uppercase;
}

p#slide-nav {
    float : right;
    height : 24px;
    display : inline;
    margin : 0px 15px 20px 0;
}

p#slide-nav a {
    float : left;
    width : 17px;
    height : 16px;
    display : inline;
    font-size : 10px;
    font-weight: bold;
    margin : 0 5px 0 0;
    color: white;
    padding: 2px 0 0 0;
    text-align : center;
    text-decoration : none;
    background-position : 0 0;
    background-repeat : no-repeat;
    font-family: "arial";
}

p#slide-nav a.on {
    background-image : url(images/core/slider-hover.png);
}

p#slide-nav a {
    background-image : url(images/core/slider-active.png);
}

/*****************************************************************************/
/****************************     Content       ******************************/
/*****************************************************************************/

#wrapper #content {
    width: 446px;
    padding: 9px;
    background: white;
    top: 20px;
    bottom: 0;
    position: absolute;
    left: 436px;
    height: auto;
    float: left;
}

#wrapper #content h1 {
    font-size: 24px;
    font-family: "arial";
    font-weight: normal;
    margin: 0 0 20px 0;
}


#wrapper #content #content-text {
    height: auto;
    position: absolute;
    top: 382px;
    bottom: 0;
    padding: 0 30px 0 0;
}

#wrapper #content #content-text p {
    font-size: 12px;
    margin: 0 0 20px 0;
}

/*****************************************************************************/
/****************************     Home Content       *************************/
/*****************************************************************************/

#wrapper #home-content {
    width: 378px;
    padding: 20px;
    position: absolute;
    background: white;
    bottom: 0;
    top: 152px;
    left: 222px;
    display: block;
}

#wrapper #home-content p {
    font-size: 24px;
    color: black;
}

#wrapper #home-content a {
    color: #4a8e01;
}

#wrapper #home-content a:hover {
    background: #4a8e01;
    color: white;
    text-decoration: none;
}

.trigger {
    position: absolute;
    top: 136px;
    left: 222px;   
}

.open {
    position: absolute;
    top: -4px;
    left: 408px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1;
    background: url('images/close.png') no-repeat;
}

.open2 {
    position: absolute;
    top: -8px;
    left: 453px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 1;
    background: url('images/close.png') no-repeat;
}

a.open {
	background-color: transparent;
	color: transparent !important;
}

a.open:hover {
	background: url('images/close.png') no-repeat !important;
	background-color: transparent !important;
}

.close {
    position: absolute;
    top: 400px;
    left: 135px;
    width: 60px;
    height: 20px;
    cursor: pointer;
    background: url('images/open.png') no-repeat top right;
	font-size: 12px;
	vertical-align: middle;
	text-transform: uppercase;
	font-family: courier new;
	color: white;
}

.nodsiplay {
	display: none;
	text-indent: -9999px;
}

a.nodisplay {
	text-indent: -9999px;
	display: none;
}

a.nodisplay:hover {
	text-indent: -9999px;
	display: none;
}

/*****************************************************************************/
/**************************     Selected Works       *************************/
/*****************************************************************************/

#wrapper #sw-nav {
    position: absolute;
    width: 465px;
    left: 222px;
    top: 20px;
    bottom: 0;

    height: auto;
    background: transparent;
}

#wrapper #sw-nav .sw-nav-element {
    width: 418px;
    height: 192px;
    margin: 0 0 8px 0;
    position: relative;
}

#wrapper #sw-nav .sw-nav-element .sw-nav-element-text {
    width: 154px;
    height: 152px;
    padding: 20px;
    background: black;
    font-size: 24px;
    line-height: 26px;
    color: white;
    position: absolute;
}

#wrapper #sw-nav .sw-nav-element .sw-nav-element-text a {
    font-family: "Courier new";
    font-size: 16px;
    text-transform: uppercase;
    color: white;
    bottom: 24px;
    position: absolute;
    padding: 0 5px;
}

#wrapper #sw-nav .sw-nav-element .sw-nav-element-text a:hover {
    color: white;
    background: #61bc00;
    text-decoration: none;
    padding: 0 5px;
}

#wrapper #sw-nav .sw-nav-element .sw-nav-element-thumb {
    width: 224px;
    height: 209px;
    position: absolute;
    left: 194px;
}

#wrapper #scroll-for-more {
    position: absolute;
    left: 662px;
    top: 20px;
    width: 10px;
    height: 119px;
    background: transparent url('images/core/scrollformore.png') no-repeat;
}

/*****************************************************************************/
/******************************     People      ******************************/
/*****************************************************************************/

#wrapper #people {
    height: auto;
    width: 194px;
    position: absolute;
    left: 222px;
    top: 20px;
}

#wrapper #people .people-container {
    width: 154px;
    position: relative;
    height: 135px;
    padding: 20px;
    background: black;
    margin-bottom: 8px;
}

#wrapper #people .people-container h2 {
    font-size: 24px;
    color: white;
    font-weight: normal;
}

#wrapper #people .people-container a {
    position: absolute;
    bottom: 18px;
    font-family: "courier new";
    text-transform: uppercase;
    color: white;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid #404040;
}

#wrapper #people .people-container a:hover {
    color: white;
    background: #61bc00;
    text-decoration: none;
}

#wrapper #people-details {
    width: 425px;
    padding: 20px;
    background: white;
    position: absolute;
    left: 424px;
    top: 20px;
    bottom: 0;
}

#wrapper #people-details h1 {
    color: #62be00;
    line-height: 26px;
    margin: 0 0 30px 0;
    font-weight: normal;
}

#wrapper #people-details p {
    font-size: 15px;
    line-height: 21px;
    margin: 0 0 20px 0;
}

/*****************************************************************************/
/*******************************     MISC      *******************************/
/*****************************************************************************/

#image-holder {
    z-index : 40;
    width : 446px;
    height : 353px;
    position : relative;
}

/*****************************************************************************/
/******************************     Contact      *****************************/
/*****************************************************************************/

#wrapper #contact-page {
    width: 425px;
    padding: 20px;
    background: white;
    position: absolute;
    left: 435px;
    top: 20px;
    bottom: 0;
}

#wrapper #contact-page h1 {
    color: black;
    font-size: 24px;
    font-weight: normal;
    margin: 0px 0 20px 0;
}

#wrapper #contact-page form {
    float: right;
    text-align: right;
}

#wrapper #contact-page label {
    vertical-align: top;    
}

#wrapper #contact-page input {
    width: 307px;
    margin: 5px 0;
    padding: 5px 4px;
    border: 1px solid #c9c9c9;
}

#wrapper #contact-page .textfield {
    width: 307px;
    height: 180px;
    overflow: hidden;
    padding: 5px 4px;
    border: 1px solid #c9c9c9;
}

#wrapper #contact-page input[type="button"] {
    background: #61bc00;
    width: 115px;
    border: 1px solid #C9C9C9;
    cursor: pointer;
}

/*****************************************************************************/
/**********************     Selected Works Inner      ************************/
/*****************************************************************************/

#wrapper #sw-inner {
    height: auto;
    width: 154px;
    position: absolute;
    top: 20px;
    height: 322px;
    background: black;
    left: 20px;
    padding: 20px;
}

#wrapper #sw-inner h1 {
    font-size: 24px;
    font-weight: normal;
    color: white;
    margin: 0 0 65px 0;
}

#wrapper #sw-inner ul li {
    margin: 8px 0;    
}

#wrapper #sw-inner ul li a {
    font-family: "courier new";
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    border-bottom: 2px solid #404040;
}

#wrapper #sw-inner ul li a:hover {
    background: #61bc00;
    border: none;
    padding: 0 0 2px 0;
}

#wrapper #sw-inner a.back {
    font-family: "courier new";
    font-size: 14px;
    text-transform: uppercase;
    position: absolute;
    bottom: 24px;
    color: white;
    text-decoration: none;
    border-bottom: 2px solid #404040;
}

#wrapper #sw-inner a.back:hover {
    background: #61bc00;
    border: none;
    padding: 0 0 2px 0;
}

#wrapper #sw-inner-text {
    width: 425px;
    padding: 20px;
    position: absolute;
    top: 20px;
    left: 222px;
    bottom: 0;
	display: block;
    background: white;
}

#wrapper #sw-inner-text h1 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: normal;
    color: #62be00;
    line-height: 26px;
}

#wrapper #sw-inner-text p {
    font-size: 15px;
    line-height: 21px;
}

.wpcf7-validates-as-required {
	border:1px solid #C9C9C9;
	margin:5px 0;
	padding:5px 4px;
	width:307px;
}

.zabutton {
	background:#61BC00 none repeat scroll 0 0;
	border:1px solid #C9C9C9;
	cursor:pointer;
	width:115px !important;
}

textarea {
	border:1px solid #C9C9C9;
	height:180px;
	overflow:hidden;
	padding:5px 4px;
	width:307px;
}

#wrapper #contact-page label span { }
