@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'NobileRegular';
    src: url('../fonts/nobile-webfont.eot');
    src: url('../fonts/nobile-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nobile-webfont.woff') format('woff'),
         url('../fonts/nobile-webfont.ttf') format('truetype'),
         url('../fonts/nobile-webfont.svg#NobileRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {font-size: 62.5%;}
body {background: #fff url(../images/bg_x2.png); font-family: Arial, Helvetica, sans-serif;}
b {font-weight: bold;}
.indent {padding: 0 0 0 20px;}
ul.p {list-style: disc; padding-left: 20px;}
sup {font-size: .5em;}
.wrapper {max-width: 100%; width: 925px; margin: 0 auto; position: relative; min-height: 100%;}
header {max-width: 100%;}
#logo {max-width: 100%; width: 924px; text-align: center; margin: 10px 0;}

blockquote {background:#f9f9f9; border-left:10px solid #ccc; margin:1.5em 10px; padding:.5em 10px; quotes:"\201C""\201D""\2018""\2019";}
blockquote:before {color:#ccc; content:open-quote; font-size:4em; line-height:.1em; margin-right:.25em; vertical-align:-.4em;}
blockquote p {display:inline;}
.testimonial {margin: 0 20px 1.7em; font-size: 1.4em; line-height: 1.7em; color: #585651;}
.name {float:right;}

/*===========================================
//////////  NAVIGATION STYLES  //////////////
===========================================*/
#nav ul {position: relative; z-index: 50; list-style: none;}
#nav li {width: 185px; height: 18px; margin: 0 0 8px 0; padding: 5px 0; position: relative; float: left; border-bottom: 1px solid #dedede;}
#nav li a {font: 1.4em 'NobileRegular', sans-serif; height: 100%; display: block; color: #222; text-decoration: none; cursor: pointer; text-shadow: 1px 0px #aaa;}
#nav li li a {font: 1.1em 'NobileRegular', sans-serif; width: 100%; height: 100%; display: block; color: #111; text-decoration: none; margin: 0 0 0 22px; cursor: pointer; text-shadow: none;}
#nav li:hover {background: url(../images/ccc.png) repeat-x bottom;}
#nav li ul {width: 153px; overflow: hidden; visibility: hidden; position: absolute; top: 28px; left: 30px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
#nav li:hover ul {width: 153px; overflow: hidden; visibility: visible; transition: .5s; position: absolute; top:28px; left: 30px; background-color: #fff; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
#nav li div.contact_form {width: 185px; font: 1.1em Arial, Helvetica, sans-serif; padding: 20px; overflow: hidden; visibility: hidden; position:absolute; top: 28px; border: 1px solid #ccc;}
#nav li:hover div.contact_form {overflow: hidden; visibility: visible; transition: .5s; position:absolute; top: 28px; background: #fff; border: 1px solid #ccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; z-index: 55;}
form input, textarea {border-radius: 5px; box-shadow: none; border: 1px solid #ddd; width: 100%;}
form input.button {border-radius: 5px; border: 1px solid #ddd; width: auto; cursor: pointer;}
form input.button:hover {background: #dedede;}
#nav li:hover li {height: auto; padding: 5px 0; margin: 0; text-decoration: none; border-bottom: 1px dotted #ccc; background: url(../images/pointer.png) 10px 50% no-repeat;}
#nav li:hover li.last {border-bottom: 1px solid #ccc;}
#nav li li:hover {background: url(../images/pointer_hover.png) 10px 50% no-repeat;}
#nav li li a:hover {border: 0;}
/*.active {background-image: url(../images/dot.png); background-position: 0 50%; background-repeat: no-repeat;}*/

/*=============================================
//////////  END NAVIGATION STYLES  ////////////
=============================================*/
/*===============================
//////////  HEADINGS  //////////
===============================*/
h2,h4 {text-transform: capitalize;}
/* intro large text */
h1 {font-family: 'NobileRegular', sans-serif; font-size: 2.7em; line-height: 1.25em; color: #585651; font-weight: normal; margin: 20px;}
/* intro large text second color */ 
h1 span {color: #b48339;} 
/* content headings */
h2 {font-family: 'NobileRegular', sans-serif; font-size: 2em; line-height: 1.25em; color: #2d0100; margin: 1em 20px; font-weight: normal;}
/* intro smaller text */ 
h3 {font-family: 'NobileRegular', sans-serif; font-size: 1.7em; line-height: 1.25em; color: #585651; font-weight: normal; margin: 0 20px 20px;}
/* showcase headings */ 
h4 {font-family: 'NobileRegular', sans-serif; font-size: 1.7em; padding: 0 0 4px; color: #fff; margin: 1em 20px 0px; font-weight: normal; text-shadow: 2px 2px 5px #000;}
/* portfolio headings */ 
h5 {font-size: 1.2em; color: #585651; padding: 2px 5px ; font-weight: normal; background: #fff; max-width: 130px; position: absolute; top: 13px; text-transform:uppercase;}
/* content secondary headings */ 
h6 {font-size: 1.7em; color: #585651; margin: 0 20px 10px; font-weight: normal; border-bottom: 1px dotted #ccc;}
/*===============================
/////////  END HEADINGS  ////////
===============================*/ 
#intro {width: 924px; max-width: 100%; margin: 50px 0 15px; position: relative; background: #fff; clear: both; border: 1px solid #ddd;}
hr {border: 0; color: #dedede; background-color: #dedede; height: 1px; margin: 0 0 15px;}
/* PORTFOLIO IMAGES */
/* SMALL */
#portfolio_preview {max-width: 100%;}
.port_small {max-width: 100%; background-color: #fff; float: left; margin: 0 0 13px 12px; position: relative; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
.first {margin: 0;}
img.example {width: 286px; height: 165px; margin: 5px; border: 1px solid #eee;} 
.port_small p {font-size: 1.4em; line-height: 1.3em; width: 100%; height: auto; padding: 0 5px 2px; color: #aaa; position: absolute; bottom: -30px; left: 0px; background: #fff url(../images/ccc.png) 80% 50% no-repeat;}
.port_small:hover p {transition: .3s; font-size: 1.4em; line-height: 1.3em; width: 100%; padding: 0 5px 2px; color: #aaa; position: absolute; bottom: 0px; left: 0px; background: #fff url(../images/ccc.png) 95% 50% no-repeat;  border-radius: 5px;}
img.mouse_link {border: 0; float: right; margin: 8px 8px 0 0;}
/* END PORTFOLIO IMAGES */

.background_100 {background: #755e13 url(../images/bg_x2.png); padding: 15px 0 0;}

#content {max-width: 100%; width: 535px; float: left; margin: 0 15px 0 0;}
#content div {max-width: 100%; margin-bottom: 15px; padding: 0 0 15px 0; background: #fff; border-radius: 5px;}
#content a {color: #999;}
.p {margin: 0 20px 1.7em; font-size: 1.4em; line-height: 1.7em; color: #585651;}

#content .contact_form {font: 1.1em Arial, Helvetica, sans-serif; padding: 20px 20px 0; overflow: hidden;}
#content form input {border-radius: 5px; box-shadow: none; border: 1px solid #ddd; width: 50%;}
#content form textarea {border-radius: 5px; box-shadow: none; border: 1px solid #ddd; width: 100%;}
#content form input.button {border-radius: 5px; border: 1px solid #ddd; width: auto; cursor: pointer;}
#content form input.button:hover {background: #dedede;}
.illustration {margin: 0 20px; position: relative;}
.illustration img {width:50%; height:50%; float: left; position: relative;}
/*.illustration img:hover {width: auto; height: auto; position: absolute; left: 300px; z-index: 100;}*/


#showcase {width: 372px; max-width: 100%; margin: 0 0 15px 0; padding: 0 0 15px 0; float: left; background: #754e13; box-shadow:inset 0 0 150px #070501; border: 1px solid #685924;}
#showcase img {float: right; margin: 20px 20px 5px 20px; width: 200px; height: 125px; border: 1px solid #685924;}
#showcase p {margin: 1.5em 20px; font-size: 1.2em; line-height: 1.5em; color: #fff;}
#showcase a, a:visited {color: #fff; font-weight: bold; text-decoration: underline;}
#showcase a:hover {color: #aaa;}

footer {width: 924px; font-size: 1.1em; line-height: 1em; clear: both; max-width: 100%; background: #111;}
.footer_wrap {margin: 0 auto;}
.footer_nav {float: left;}
.copyright {float: right; text-align: right; color: #302c10;}
footer p {color: #ccc; font-size: 1em; margin: 10px;}
footer ul {margin: 10px 0;}
footer ul li {padding: 0 14px 0 10px; display: inline; border-right: 1px solid #ccc;}
.last {border-right: 0;}
footer a, a:visited {color: #ccc; text-decoration: none;}
footer a:hover {text-decoration: underline;}

/*////////////////////// slideshow /////////////////////////////////
//////////////////////////////////////////////////////////////////*/