/*
    LEGEND

    1. Globals
    2. Home
    3. Login Popup
    4. About
    5. Portfolio
    6. Portfolio Detailed
    7. Blog
    8. Contact
    9. Under Construction
    10. Error Page
    11. Gallery 
    12. Sitemap 
    13. Styles Page

*/


/*
    1. Globals
*/

* { padding: 0; margin: 0; outline: 0; }
body { font: 12px/18px Arial, sans-serif; text-align: left; }
body, html { height: 100%; }

a { color: #ccc; cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

a img { border: 0; }
.img img, img.img { display: block; }

input, select, textarea { font: 11px Arial, sans-serif; }

input.checkbox, input.radio { float: left; display: inline; height: 13px; width: 13px; margin: 2px 5px 0 0; }
label.checkbox, label.radio { float: left; display: inline; line-height: 13px; }
    
input.submit { cursor: pointer; }

input::-moz-focus-inner { border: none; padding: 0; }

textarea { overflow: auto; }
fieldset { border: 0; padding-bottom: 15px; }

ul, ol { list-style: none outside none; }

.ar { display: block; text-align: right; }
.al { display: block; text-align: left; }
.ac { display: block; text-align: center; }

.fr { float: right !important; display: inline; }
.fl { float: left !important; display: inline; }

.cl { display: block; clear: both; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.hidden { display: none; }
.rel { position: relative; }

.shell { width: 970px; margin: 0 auto; }

header,  footer, article, hgroup, section { display: block; }

h2, h3, h4, h5, h6 { margin-bottom: 15px; line-height: 1; font-weight: normal; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

hgroup h2 { margin: 0 0 10px; }


p { padding-bottom: 15px; }
small { font-size: 10px; }

.no-header { padding-top: 85px; height: auto; }
.no-header footer .shell { width: 679px; }
.no-header footer ul { display: none; }
.no-header header { display: none; }
.no-footer footer { display: none; }

#page { height: 100%; }
.footer-shadow { min-height: 100%; }

/*
    Header
*/
#header { width: 100%; position: relative; margin-bottom: 5px; }header { height: 109px;whitd margin: 0 0 30px; position: relative; z-index: 10; }
.logo-lights { position: absolute; top: 0; left: 0; width: 242px; height: 109px; }

h1#logo { position: relative; z-index: 2; height: 31px; padding: 23px 0 20px 20px; }
h1#logo a { }


/*
    Content
*/

#content { position: relative; z-index: 1; }
#content > .shell { padding: 35px; width: 900px; height: 100%; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

#main-content { width: 600px; }
#sidebar { width: 233px; }

.sidebar-right #main-content { padding-right: 29px; }
.sidebar-left #main-content { padding-left: 29px }

#sidebar .btn-1 { padding: 0; text-align: center; width: 231px; font-size: 19px; text-transform: none; }
#sidebar .widget { margin: 0 0 25px; }

article { position: relative; overflow: hidden; padding: 15px 0 5px; height: 100%; margin-bottom: 15px; }
article:last-child { padding-bottom: 0; margin-bottom: 0; }

article img.alignleft { float: left; display: inline; margin: 0 20px 0 0; }
article img.alignright { float: right; display: inline; margin: 0 0 0 20px; }

article blockquote { float: left; display: inline; padding: 0 25px 0 10px; margin: 0 0 20px; }
article ul { padding: 0 0 15px; }

.btn-1 { display: inline-block; padding: 0 40px; height: 40px; line-height: 40px; font-size: 21px; font-weight: bold; }
.btn-2,
.btn-3 { display: inline-block; padding: 0 14px; height: 26px; line-height: 26px; font-size: 12px; font-weight: bold; }

.btn-reply { padding-left: 13px; }
.btn-reply span { padding-left: 19px; }


.no-spacing { margin: 0; }

.project-thumbs-list {}
.project-thumbs-list li { float: left; display: inline; margin: 0 16px 5px 0; }
.project-thumbs-list li:last-child { margin-right: 0; }

.paging { font-size: 0; line-height: 0; }
.paging * { display: inline-block; font-size: 12px; font-weight: bold; line-height: 24px; margin: 0 7px 0 0; }
.paging a { padding: 0 9px; }

#page form fieldset { position: relative; overflow: hidden; padding: 0 0 20px; }
#page form label { float: left; display: inline; width: 92px; margin-right: 15px; font-weight: bold; text-align: right; line-height: 39px; }
#page form .field { float: left; display: inline; width: 336px; height: 15px; padding: 11px 14px; font-size: 12px; }
#page form textarea.field { width: 433px; height: 215px; resize: vertical; }
#page form .submit { width: 109px; margin-left: 107px; border: 0; }
#page form .error,
#page form .LV_validation_message { position: absolute; top: 12px; left: 376px; width: 16px; height: 16px; font-size: 0; line-height: 0; text-indent: -4000px; }
#page form .LV_invalid_message { font-size: 0; line-height: 0; text-indent: -4000px; }
#page form .msg-holder .LV_validation_message { left: 472px; }

#page table { margin: 0 0 25px; }
#page th { text-align: center; line-height: 28px; }
#page td { text-align: center; padding: 8px 0; font-weight: bold; }


.widget-socials { }
.widget-socials li { line-height: 27px; padding: 0 0 0 32px; margin: 0 0 10px; }
.widget-socials li:last-child { margin: 0; }

#page .subscribe-form {}
#page .subscribe-form .field { width: 181px; padding: 8px 14px 7px; }
#page .subscribe-form .submit { width: 93px; height: 32px; margin: 0 0 0 10px; font-size: 14px; }



/*
    Footer
*/

#footer { position: relative; overflow: hidden; padding: 25px 0; font-size: 10px; line-height: 12px; }
.footer-logo { position: relative; top: -2px; margin-right: 8px; }
#footer ul { float: left; display: inline; }
#footer ul li { float: left; display: inline; padding: 0 21px 0 20px; text-transform: uppercase; }

/*
    Flexslider Default Style
*/

/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/*
    2. Home
*/

#featured-content { position: relative; z-index: 2; }

#featured-content .slider { position: relative; top: -30px; margin-bottom: -59px; height: 352px; }
#featured-content .slider .text-container { width: 490px; height: 260px; padding: 55px 0 0 35px; position: relative; z-index: 2; }
#featured-content .loading { display: block; z-index: 100; width: 42px; height: 42px; position: absolute; top: 50%; margin-top: -12px; left: 50%; margin-left: -12px; background: url(images/loading.gif); }

#featured-content h2 { margin: 0 0 20px; font-size: 37px; line-height: 1; font-weight: normal; letter-spacing: -1px; }
#featured-content .slides > li { position: relative; }
#featured-content .featured-list { display: block; margin: 0 0 10px; }
#featured-content .featured-list li { padding: 0 0 0 25px; font-size: 20px; line-height: 30px; }
#featured-content .image-container { position: absolute; top: 0; right: 0; z-index: 1; height: 260px; width: 100%; }
#featured-content .image-container img { margin: 0 0 0 auto; }
#featured-content .video-container { position: absolute; top: 61px; right: 24px; width: 386px; height: 217px; z-index: 1; }

#featured-content .slider .shell { position: relative; }
#featured-content .slider .slider-clip { width: 100%; height: 352px; position: relative; overflow: hidden; }
#featured-content .slider-arrows { position: absolute; top: 100%; left: 50%; width: 970px; margin-left: -485px; }
#featured-content .slider-arrows a { position: absolute; width: 50px; height: 50px; top: -221px; font-size: 0; line-height: 0; text-indent: -4000px; opacity: .5; -moz-opacity: .5; }
#featured-content .slider-arrows a:hover { opacity: 1; -moz-opacity: 1; }

#featured-content .slider-arrows a.prev { left: -67px }
#featured-content .slider-arrows a.next { right: -67px; }


#featured-content .fader { position: relative; margin: -25px 0 10px -25px; width: 949px; height: 337px; }

#featured-content .fader-clip { width: 949px; height: 312px; position: relative; overflow: hidden; }
#featured-content .fader-clip > ul { height: 312px; }
#featured-content .fader .slides > li { position: relative; width: 949px; height: 312px; }
#featured-content .fader .text-container  { padding: 30px 0 0 25px; width: 490px; position: relative; z-index: 2; }
#featured-content .fader .image-container { position: absolute; top: 0; right: 0; height: 352px; }

#featured-content .fader-nav ol { font-size: 0; line-height: 0; text-align: center; padding: 10px 0 0; }
#featured-content .fader-nav ol li { display: inline-block; *display: inline; zoom: 1; width: 14px; height: 14px; margin-right: 3px; }
#featured-content .fader-nav ol li a { display: block; width: 13px; height: 13px; }


#home-content h2 { padding: 10px 0 0; font-size: 29px; }
#home-content .two-cols { position: relative; overflow: hidden; padding: 0 0 20px; margin: 0 0 20px; }
#home-content .two-cols .wide-col { width: 600px; }
#home-content .two-cols .short-col { width: 274px; }

#home-content .socials .twitter-follow { padding: 0 0 0 66px; }
#home-content .socials .facebook-like { padding: 0 0 0 22px; }

#home-content .socials * { display: inline-block; margin: 0 10px 0 0; }

#home-content .three-cols { position: relative; overflow: hidden; }
#home-content .three-cols .col { width: 275px; min-height: 108px; padding-right: 15px; margin-right: 20px; }


/*
    3. Login Popup
*/

#overlay { z-index: 9998; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

#login-popup { position: fixed; z-index: 99999; width: 338px; left: 50%; top: 150px; padding: 3px; margin: 0 0 0 -169px; }
.popup-container { padding: 20px 20px 10px; }

#login-popup .close { width: 33px; height: 33px; position: absolute; top: -8px; right: -12px; }

#login-popup h2 { padding: 0 0 10px; font-size: 19px; font-weight: normal; }

#login-popup label { padding: 0 0 10px; display: block; font-weight: bold; }
#login-popup .field { display: block; width: 268px; height: 15px; padding: 11px 14px; font-size: 12px; }
#login-popup .submit { padding: 0; width: 80px; height: 28px;  }
#login-popup label.checkbox { padding-top: 7px; }
#login-popup label .checkbox { margin-top: 0; }
#login-popup .error { padding: 10px 0 10px 22px; display: block; font-weight: bold; }
#login-popup .submit { border: 0; }
.popup { display: none; }

/*
    4. About
*/

.staff-list { position: relative; overflow: hidden; padding: 5px 0 0; }
.staff-list li { position: relative; float: left; display: inline; width: 200px; height: 110px; }
.staff-list li img { float: left; display: inline; margin: 0 15px 0 0; }
.staff-list li strong { display: block; padding-bottom: 5px; }
.staff-list li a { position: absolute; bottom: 25px; left: 95px; white-space: nowrap; }


/*
    5. Portfolio
*/


.portfolio li { position: relative; overflow: hidden; padding: 30px 0; }
.portfolio li:last-child { border: 0; }
.portfolio .thumb { position: relative; float: left; display: inline; width: 266px; }
.portfolio .thumb img { display: block; }
.portfolio .thumb .shadow { position: absolute; top: 100%; left: 0; width: 247px; height: 6px;  }

.portfolio h3 { margin: 0 0 5px; }
.portfolio .meta { display: block; margin: 0 0 15px; text-transform: uppercase; }

.portfolio .btn-1,
.portfolio .btn-2 { float: left; display: inline; margin: 0 10px 0 0; }

/*
    6. Portfolio Detailed
*/

.portfolio-detailed hgroup { margin: 0 0 15px; }
.portfolio-detailed .images { position: relative; overflow: hidden; width: 599px; margin: 0 0 30px; }
.portfolio-detailed .gallery-container { padding: 11px; }
.portfolio-detailed .fader { position: relative; overflow: hidden; width: 577px; height: 311px; }
.portfolio-detailed .slider { position: relative; overflow: hidden; width: 477px; height: 86px; padding: 21px 50px 22px 50px; }
.portfolio-detailed .jcarousel-container { position: relative; overflow: hidden; width: 477px; height: 86px; }
.portfolio-detailed .slider li { float: left; display: inline; width: 98px !important; height: 86px; }
.portfolio-detailed .slider .wrapper,
.portfolio-detailed .slider .jcarousel-clip { width: 490px; height: 86px; position: relative; overflow: hidden; }
.portfolio-detailed .slider .jcarousel-prev,
.portfolio-detailed .slider .jcarousel-next { position: absolute; top: 47px; left: 0; width: 38px; height: 38px; cursor: pointer; }
.portfolio-detailed .slider .jcarousel-next { left: auto; right: 0; }

.portfolio-detailed .details { width: 270px; margin: 0 0 30px; }
.portfolio-detailed .details li { padding: 0 0 10px; margin: 0 0 10px; }
.portfolio-detailed .details li:last-child { border: 0; }
.portfolio-detailed .details li strong { display: block; }
.portfolio-detailed .details  .btn-1,
.portfolio-detailed .details  .btn-2 { float: left; display: inline; margin: 0 10px 0 0; }

.portfolio-detailed .related { position: relative; overflow: hidden; padding: 20px 0 0; }
.portfolio-detailed .related li { margin: 0 12px 0 0; }

/*
    7. Blog
*/

.blog-page .article-header { position: relative; overflow: hidden; margin-bottom: 10px; }
.blog-page .article-header h3 { max-width: 50%; padding-top: 3px; margin: 0; }
.blog-page .article-header .meta { padding: 0 12px;  font-size: 11px; line-height: 26px; font-style: italic; }

.blog-page .article-bottom-meta { position: relative; overflow: hidden; margin-bottom: 20px; font-size: 11px; }
.blog-page .article-bottom-meta .btn-2 { position: relative; top: 5px; }
.blog-page .comments-count { margin-bottom: 5px; white-space: nowrap; line-height: 14px; }
.blog-page .comments-count a span { float: left; display: inline; width: 24px; height: 18px;  text-align: center; margin-right: 3px; }
.blog-page .tags { clear: both; }

.blog-page article:last-of-type { padding: 20px 0 0;  margin: 0; border: 0; }

.blog-page .tag-cloud { text-align: justify; }
.blog-page .tag-cloud li { display: inline-block; *display: inline; margin: 5px 0; white-space: nowrap; }
.blog-page .tag-cloud li a { line-height: 1; }
.blog-page .tag-cloud li a:hover { text-decoration: none; color: #31b0db; }

#total-comments { padding: 0 0 7px; margin: 0; font-size: 18px; }

.blog-page .list-comments ul ul { padding: 25px 0 0; }
.blog-page .list-comments li { padding: 30px 0; height: 100%; }
.blog-page .list-comments li li { margin: 0 0 30px 59px; padding: 25px 0; width: 537px; }
.blog-page .list-comments li li:last-of-type { margin-bottom: 10px; }
.blog-page .list-comments .author { float: left; display: inline; width: 135px; margin: 0 20px 0 0; }
.blog-page .list-comments .author * { display: block; text-align: right; }
.blog-page .list-comments .author .comment-num { font: bold 16px/18px Arial, sans-serif; }
.blog-page .list-comments .author .username { font-weight: bold; }
.blog-page .list-comments .author .username a { display: inline; padding: 0 0 0 20px; }
.blog-page .list-comments .author .date { font-size: 11px; line-height: 15px; }
.blog-page .list-comments .comment-text { float: left; display: inline; width: 445px; }
.blog-page .list-comments .comment-text p { line-height: 20px; }
.blog-page .list-comments li li .comment-text { width: 320px; }
.blog-page .post-comment { padding: 20px 0 0; height: 100%; }
.blog-page .post-comment h3 { margin-bottom: 25px; }
.blog-page textarea.field { width: 391px; height: 217px; }

/*
    8. Contact 
*/

#contact-form,
#contact-form h3 { margin: 0 0 25px; }
#contact-form .success { display: none; position: absolute; bottom: 25px; left: 230px; padding: 0 0 0 40px; width: 256px; height: 33px; font-size: 14px; line-height: 33px; color: #2c3800; text-align: left; background: #effeb9 url(images/icon-success.png) no-repeat 8px center; border: 1px solid #98c700;  
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

.widget-contact-info p { padding: 0; line-height: 26px; }

/*
    9. Under Construction
*/

.under-construction-wrapper .title { display: block; margin: 0 auto 30px; width: 443px; height: 30px; }

.under-construction-wrapper { width: 679px; margin: 0 auto; }
.under-construction-wrapper #content { margin: 0 0 30px; }
.under-construction-wrapper #content > .shell { width: 608px; }
.under-construction-wrapper #hgroup { margin: 0 0 25px; }

.progress-bar { position: relative; height: 37px; margin: 0 0 15px; }
.progress-bar .bar { position: relative; top: -1px; left: -1px; height: 37px; }

.progress-done { position: absolute; height: 16px; }
.progress-done span { display: none; position: absolute; display: block; top: -7px; width: 10%; text-align: center; padding-top: 20px; white-space: nowrap; font-size: 15px; }

.under-construction-wrapper .wide-box { width: 314px; padding: 20px 35px; min-height: 137px; }
.under-construction-wrapper .short-box { width: 214px; padding: 20px 35px; min-height: 137px; }

/*
    10. Error Page
*/

.error-page-wrapper .title { display: block; margin: 0 auto 30px; width: 335px; height: 46px; }
.error-page-wrapper #content { margin: 0 0 30px; }
.error-page-wrapper h2 { white-space: nowrap; }

.error-page-wrapper .btn-1,
.error-page-wrapper .btn-3  { float: left; display: inline; width: 95px; padding: 0; height: 33px; line-height: 33px; font-size: 12px; text-align: center; }
.error-page-wrapper .btn-1 { margin: 0 22px 0 210px; }


/*
    11. Gallery
*/

#gallery hgroup { margin:  0 0 30px; }
#gallery ul { position: relative; width: 920px; }
#gallery li { float: left; display: inline; padding: 0 21px 0 0; width: 209px; min-height: 260px; }
#gallery li .btn-2 { float: right; display: inline; }
#gallery li a.img { display: block; padding: 0 0 4px; }

/*
    12. Sitemap
*/

.sitemap article .list-1 > li > a { font-size: 21px; }
.sitemap article .list-1 > li ul {  padding: 15px 0 0; }
.sitemap article .list-1 > li ul li { padding-bottom: 10px; }

/*
    13. Styles Page
*/

.styles-page {}
.styles-page article hgroup * { margin: 0; }
.styles-page article hgroup { padding-bottom: 15px; }

.hidden-popups { display: none; }

#overlay { display: none; }