/**
 * CSS for web site
 *
 */

/** Mass Reset 
 -----------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,header,hgroup,footer,nav,aside,section,article { margin:0; padding:0; }
header,hgroup,footer,nav,aside,section,article { display: block; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { 	border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:bold; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
input,select { vertical-align:middle; }
a:hover,a:active { outline: none; }
/** End Mass Reset
------------------------------*/

/***** PREFERRED STYLING *****
 -----------------------------
el/class { position/float/display/list-type margin/padding/border width/height background/color font/text CSS3 }
------------------------------
*/

/** Fonts
 -----------------------------*/
@font-face {
 font-family: DroidBold;
 src: url(/fonts/DroidSerif-Bold.eot) /* EOT file for IE */
}
@font-face {
 font-family: DroidBold;
 src: url(/fonts/DroidSerif-Bold.ttf) /* TTF file for CSS3 browsers */
}

/***** BEGIN STYLES ******
 -----------------------------------*/
html, body, form { height: 100%; }
html { -webkit-font-smoothing: antialiased; }
body { color: #333; background: #efede7; font-family: Arial, Sans-Serif; font-size: 10pt; text-align: left; }


/** Global Styles 
 -----------------------------*/
p { margin: 15px 0; }
p.mrg-top-ten { margin-top: 10px; }
.content { margin: 0 auto; width: 900px; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }


/** Headers
 -----------------------------*/
h1, h2, h3, h4 { font-family: DroidBold; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em;}
h4 { margin-top: 25px; font-size: 1.2em; }


/** Icons
 -----------------------------*/
span.icon { float: left; display: inline; margin-top: -4px; width: 32px; height: 32px; background: url(/images/icons/icons.png); vertical-align: middle; }
span.icon-face { background-position: 0px 0px; }
span.icon-mail { background-position: -32px 0px; }
span.icon-folder { background-position: -64px 0px; }
span.icon-gear { background-position: -96px 0px; }
span.icon-wrench { background-position: -128px 0; }
span.icon-plug { background-position: -150px 0; }
span.icon-plus { background-position: -192px 0; }


/** Links
 -----------------------------*/
a { color: #666; }
a:hover { color: #333; }


/** Forms
 -----------------------------*/
.form div { margin-top: 10px; }
.form label { float: left; display: inline; padding: 6px 0; width: 120px; text-align: right; }
.form input[type=text], .form textarea { margin-left: 4px; padding: 6px; width: 250px; font-family: Arial; }


/** Rows + Columns
 -----------------------------*/
section.row { margin-top: 20px; }
section.row:first-child { margin-top: 0; }
section.column { float: left; display: inline; margin-left: 30px; }
section.two-cols { width: 435px; }
section.three-cols { width: 280px; }
section.column-left { margin-left: 0; }


/** Validator classes
 -----------------------------*/
.error { border: solid 1px red; background: #ffdddd; color: Red; }
.status-error { color: Red; }


/** Page wrapper
 -----------------------------*/
#page-wrapper { margin-bottom: -100px; min-height: 100%; }


/** Header
 -----------------------------*/
header { width: 100%; height: 80px; background: url(/images/layout/header/bg.jpg) repeat-x; }
header #logo { float: left; display: inline; border: 0; }
/** Nav 
 -----------------------------*/
header nav { float: right; display: inline; margin-top: 22px; font-size: 0.9em; }
nav li { float: left; display: inline; margin-left: 3px; } 
nav a { display: block; padding: 7px 10px; border: 1px solid transparent; color: #bdbcac; text-decoration: none; font-size: 1.1em; }
nav a:hover { 
    border: 1px solid #333; 
    color: #dbdacc; 
    background: #545454; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 2px 2px 2px #313131, inset 0 0 15px #686868;
    -moz-box-shadow: 2px 2px 2px #313131, inset 0 0 15px #686868;
    box-shadow: 2px 2px 2px #313131, inset 0 0 15px #686868;
}


/** Promo area
 -----------------------------*/
#promo-area { height: 278px; background: url(/images/layout/promo/bg.jpg) repeat-x top; }
#promo-content { padding: 28px 0 20px 0; height: 230px; }
#promo-left { width: 443px; }
#promo-right { width: 387px; }
#promo-area img.img-cycle-img { padding: 1px; border: 1px solid #999; background: white; }


/** Page Content
 -----------------------------*/
#page-content { padding: 20px 0; background: #efede7; }


/** Latest Projects
 -----------------------------*/
#ul-latest { margin-top: 15px; }
#ul-latest li { margin-top: 5px; }
#ul-latest li:first-child { margin-top: 0; }
#ul-latest img { padding: 1px; border: 1px solid #666; background: white; }


/** Footer
 -----------------------------*/
#clear-footer { height: 100px }
footer { margin-top: -100px; padding-top: 15px; height: 85px; color: #ebebeb; background: url(/images/layout/footer/bg.jpg) repeat-x; font-size: 0.85em; }
footer ul.footer-links { margin-top: 8px; }
footer ul.footer-links li { float: left; display: inline; margin-right: 2px; }
footer ul.footer-links a { display: block; color: #e1e1e1; padding: 3px 5px; width: 100px; background: #262525; text-decoration: none; }
footer ul.footer-links a:hover { background: #363636; }


/** About
 -----------------------------*/
#about-col-left { width: 240px; }
#about-col-right { margin-left: 50px; width: 610px; }
img.team { 
    float: left; 
    display: inline; 
    margin: 0 15px 10px 0; 
    padding: 8px; 
    border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf;
    width: 150px; 
    height: 150px; 
    background: #f6f6f6; 
    -webkit-box-shadow: 2px 2px 2px #999;
    -moz-box-shadow: 2px 2px 2px #999;
    box-shadow: 2px 2px 2px #999;    
}


/** Portfolio
 -----------------------------*/
#portfolio-container a { display: block; margin: 5px 0 20px 0; }
#portfolio-container img { padding: 8px; border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; width: 409px; height: 200px; background: #f6f6f6; -webkit-box-shadow: 1px 1px 1px #999; -moz-box-shadow: 1px 1px 1px #999; box-shadow: 1px 1px 1px #999; -webkit-transition: -webkit-box-shadow 0.2s linear, margin 0.15s linear; }
#portfolio-container img:hover { margin: -2px 0 2px 0; -webkit-box-shadow: 5px 5px 5px #999; -moz-box-shadow: 5px 5px 5px #999; box-shadow: 5px 5px 5px #999; }


/** Mobile Devices
 -----------------------------*/
@media screen and (max-device-width: 480px) {
  
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }

}