/*:: Imports
------------------------------------- */
    @import url(base.css);
    @import url(content.css);
    @import url(print.css);


/*:: Shared Styles
------------------------------------- */
    .col3, .col2, .col1{float:left; margin-right:40px;}
    .col3{width:560px;}
    .col2{width:600px;}
    .col1{width:27.333333333333%;margin-right:6%;}
    .last{margin-right:0;}
    .title{font-size:2.25em; }
    .sub{word-spacing:3px;}
    h3.sub{padding:0 0 3px 0; font-size:1.454545454545455em; color:#363636;}
    h4.sub{padding:.25em 0 .35em 0; font-size:1.25em; /* 20 / 16 */ color:#363636;}
    h5.sub{padding:0 0 6px 0; font-size:13px;}
    .sub a:hover{text-decoration:none !important;}
    .subTitle{font-size:1.125em; padding:.25em 0 .9em; line-height:28px; /* 26 / 22 */ }
    .chameleon{display:block; text-indent:-1000em; background-repeat:no-repeat; background-position:0 0; line-height:0px;}
    .chameleon:hover{background-position:bottom left;}
    h4.chameleon{height:10px; clear:both; line-height:1px; margin-bottom:5px;}
    .menu{border:1px solid #ccc; padding:24px; -moz-border-radius:5px; -webkit-border-radius:5px; width:230px; }
    .clear{clear:both;}
    
    /* - Fluid Grid - */
        .row {margin:0 auto; max-width:940px; width:100%; float:left;}
        .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {margin-right:3.8%;float:left;min-height:1px;}
        .row .onecol {width:4.85%;}
        .row .twocol {width:13.45%;}
        .row .threecol {width:22.05%;}
        .row .fourcol {width:30.75%;}
        .row .fivecol {width:39.45%;}
        .row .sixcol {width:48%;}
        .row .sevencol {width:56.75%;}
        .row .eightcol {width:65.4%;}
        .row .ninecol {width:74.05%;}
        .row .tencol {width:82.7%;}
        .row .elevencol {width:91.35%;}
        .row .twelvecol {width:100%;float:left;}
        .last {margin-right:0;}
        .fr {float:right;}

      
/*:: Body
------------------------------------- */
    html{background-color:#fff;} /* 444 */
    body{background:#444 url(/Content/images/bg.png) 0 0 repeat;}
    .wrapper{width:940px; margin:0 auto; padding:0 10px;}
    #grid {display:none;background:url(/Content/images/grid-940.png) top center repeat-y;width:940px;height:1000px;position:absolute;top:0;left:50%;margin-left:-470px;z-index:10000;}


/*:: Header
------------------------------------- */
    #header{background:transparent; position:relative; z-index:10;}
    #header .wrapper{/*background:url(images/bg-headerWrapper.png) no-repeat top left;*/ width:960px; padding:0; }
    #header h1{margin:23px 0 0 10px; float:left; width:23%; /* 220 / 960 */ }
    /* - Logos - */
        /* Regular #header h1 a{display:block; height:38px; width:100%; background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/logo.png) no-repeat top left; text-indent:-100em;}*/ 
        /* Christmas */  #header h1 a{display:block; height:43px; margin:-5px 0 0 -6px; width:226px; }
        /* Halloween  #header h1 a{display:block; height:46px; margin:-8px 0 0 -1px; width:221px; background:url(images/logo_halloween.png) no-repeat top left; text-indent:-100em;}*/
    /* - Navigation - */
        #header ul{height:56px; width:auto; float:right; list-style:none; margin-right:-5px;}
        #header h1 a img{max-width:100%;vertical-align:middle;}
        #header .home #nav_home,
        #header .work #nav_work,
        #header .services #nav_services,
        #header .about #nav_about,
        #header .contact #nav_contact{background:rgba(0,0,0,.2);}
        #header ul li{float:left; height:56px;}
        #header ul a{display:block; height:21px; padding:35px 10px 3px 10px; margin-right:5px; position:relative; z-index:100; text-decoration:none; color:#fff; font-size:15px; text-align:center; border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -o-border-radius:0 0 5px 5px; transition:all .2s linear; -moz-transition:all .2s linear;  -webkit-transition:all .2s linear;}
        #header ul a:hover,
        #header ul a.hover{background:#363636;}
        #header ul #nav_contact a{margin-right:0;}
        
        
/*:: Hero
------------------------------------- */
    #hero{position:relative; min-height:200px; background-color:#464646; background-image:url(/Content/images/bg.png); background-repeat:repeat; overflow:hidden;}
    .mask{z-index:100;}
    #hero .mask{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-hero.png) no-repeat bottom center; position:absolute; left:0; bottom:0; width:100%; height:31px;}
    #hero .mask .wrapper{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-heroWrapper.png) no-repeat bottom center; height:31px; padding:0; width:960px;}
    #hero a.controls{display:block;  text-indent:-1000em; background-repeat:no-repeat; background-position:top left; position:absolute; top:50%; margin-top:-15px; height:27px; width:31px; z-index:100;}
    #hero a#next{background-image:url(images/btn-homeNext.png); right:20px;}
    #hero a#previous{background-image:url(images/btn-homePrevious.png); left:20px;}
    #hero .wrapper{padding:0; max-width:960px;}
    #hero #arrow{width:73px; height:59px; background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/arrow.png) no-repeat top left; right:84px; margin-top:-103px; position:absolute; top:50%; display:none;}


/*:: Content
------------------------------------- */
    #content {padding:63px 0;background:#fff;}
    #content .wrapper {max-width:940px; position:relative;}
    .home #content {padding:48px 0;}


/*:: Footer
------------------------------------- */
    #footer{background:#464646 url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-footerWrapper.png) no-repeat top center; clear:both; padding-bottom:3em;}
    #footer a{color:#fff;}
    #footer .wrapper{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-footer.png) no-repeat top center; padding:55px 20px 20px; width:920px;}
    #footer h6{color:#fff; text-transform:uppercase; font-size:1em; word-spacing:2px; float:left; margin:6px 0 0;}
    #footer address{font-style:normal; font-size:0.6875em; line-height:1.636363636363636em; /* 18 / 11 */ color:#fff; clear:both; padding-top:2px;}
    .country-name, .org, .type{display:none;}
    .adr{display:block; padding-bottom:12px;}
    .tel,
    .email{float:left; clear:left; background-repeat:no-repeat; background-position:left center; background-image:url(images/footer-phone.png); padding-left:20px;}
    .fax{background-image:url(images/footer-fax.png);}
    .email{background-image:url(images/footer-email.png); color:#fff; text-decoration:none;}
    #footer ul#social{float:right; list-style:none; margin-top:3px; padding-bottom:13px;}
    #footer ul#social li{float:left; margin-left:6px;}
    #footer ul#social li a{height:20px; width:20px; display:block; text-indent:-1000em; background-image:url(images/icon-social.png); background-repeat:no-repeat;}
    #footer ul#social li#twitter a{background-position:0 -20px;}
    #footer ul#social li#facebook a{background-position:-20px -20px;}
    #footer ul#social li#flickr a{background-position:-40px -20px;}
    #footer ul#social li#twitter a:hover,
    #footer ul#social li#twitter a.on{background-position:0 0;}
    #footer ul#social li#facebook a:hover,
    #footer ul#social li#facebook a.on{background-position:-20px 0;}
    #footer ul#social li#flickr a:hover,
    #footer ul#social li#flickr a.on{background-position:-40px -0;}
    #footer #socialHolder{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-socials.png) repeat top left; -moz-border-radius:3px; -webkit-border-radius:3px; clear:both; font-size:14px; color:#fff; line-height:16px; padding:20px; height:58px;}
    #footer #socialHolder a{color:#fff;}
    #footer #socialHolder .socialSlide{display:none;}
    #footer #socialHolder .twitter{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-twitter.png) no-repeat 4px 11px; display:block;}
    #footer #socialHolder .twitter ul.tweet_list{list-style:none; padding:8px 12px 8px 46px;}
    #footer #socialHolder .twitter p{padding:8px 12px 8px 46px;}
    #footer #socialHolder .twitter a.time {text-decoration:none; font-style:italic;}
    #footer #socialHolder .twitter a.time :hover{text-decoration:underline;}
    #footer #socialHolder .flickr{height:77px;}
    #footer #socialHolder .flickr img{border:1px solid #fff; float:left;}
    #footer #socialHolder .flickr a{margin-right:19px; float:left;}
    #footer #socialHolder .flickr a.last{margin-right:0;}
    #footer ul#nav{color:#fff; list-style:none; padding-top:15px; clear:left; float:left; width:33%; font-size:.6875em;}
    #footer ul#nav li{float:left; padding-right:3px;}
    #footer ul#nav li img{float:left; margin-right:4px;}
    #footer ul#nav li a.first{border-left:none; padding-left:0px;}
    #footer ul#nav li a{padding-left:5px;}
    #footer ul#nav li a:after{content:'•';position:relative;top:50%;left:4px;}
    #footer ul#nav li a:hover{text-decoration:none;}
    #footer ul#nav li:nth-last-child(1) a:after{content:'';}
    #footer ul#nav a{color:#fff; text-decoration:none;}
    #footer ul#nav a:hover{text-decoration:underline;}
    #footer .col1 {width:30.75%;margin-right:3.8%;}
    #footer .col2 {width:65.45%;float:right;}
    
    
/*:: Bottom
------------------------------------- */
    #bottom{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-bottom.gif) no-repeat top center;}
    #bottom div.wrapper{background:url(http://c0688472.cdn.cloudfiles.rackspacecloud.com/bg-bottomWrapper.png) no-repeat top center; height:6px; line-height:0;}
    

/*:: Media Queries
------------------------------------- */

@media screen and (max-width: 1023px) {    
    
    /* Reset */
    .row,
    .services .row,
    #footer .wrapper,
    #footer ul#nav{width:100%;overflow:hidden;padding-left:0;padding-right:0;}    
    #hero .wrapper,
    #footer .inner,
    #content .wrapper{width:650px; margin:0 auto;}    
    #header ul a{font-size:14px;}
    #hero h4{font-size:2em;}
    #header h1 a{width:206px;}
    #content{padding:41px 0;}
     
    /* Hide */
    #footer ul#nav li img{display:none;}
    
    /* Footer */
    #footer #socialHolder .flickr a{width:12.5%;}
    #footer #socialHolder .flickr img{max-width:100%;}
    
    /* About */
    .about .sub{padding-bottom:10px;}
    .about .fourcol p{clear:left;}
    .about .row{margin:1em 0;}        
    #team a{width:25%;}
        
    /* Work */
    #portfolio li{width:205px; padding:3px;}
    #portfolio li:nth-child(3n + 3){margin-right:0;}
    html > body #portfolio li{margin:0 5px 18px 0;}
    html > body #portfolio li span{width:auto; padding-right:7px; display:block;}

    /* Contact */
    fieldset input,
    fieldset textarea{width:100%;}
    #mapLink{width:100%; height:195px; overflow:hidden; display:block; margin-bottom:1em;}
    form#contactform span.error{left:170px;}
    img.map{margin-left:-8px !important;}
    
    .home #content p {width:100%;}
    
    /* Hero Slides */
    #hero .slide h3{font-size:2.5em;}
    #hero .slide p{width:400px;}
    #hero #neroli p{width:500px;}
    #hero #mu p{width:480px;}
    #hero #swedishAmerican p{width:350px;}
    #hero #ap2010 p{width:100%;}
    #hero .slidecopy{}    
    #hero #neroli #clouds .wrapper{background:none;}
    #hero #neroli #clouds {background:url("images/slide-neroli-modals.png") no-repeat scroll left bottom transparent;}
}

@media screen and (max-width: 775px) {    
    
    /* Reset */
    .row .fourcol,
    .row .sevencol,
    .row .eightcol,
    #footer .col2{width:100%;overflow:hidden;padding-left:0;padding-right:0;}        
    #hero .wrapper,
    #footer .inner,
    #content .wrapper{width:470px;margin:0 auto;}    
    #header h1 a{width:180px;}
    #header ul a{padding-left:6px;padding-right:6px;}
    
    /* Hide */
    #hero h4,
    #header #nav_home,
    #header ul li:first-child{display:none}

    /* Footer */
    #footer .col1{margin-bottom:2em;}
    #footer{font-size:larger;}
    #footer #nav{clear:both;float:left;} 
    .ie7 .col2 {display:none;}

    /* Hero */
    #hero{min-height:108px;}
    
    /* Work */
    #portfolio li{padding:7px;}
    #portfolio li:nth-child(3n+3){margin-right:5px;}
    #portfolio li:nth-child(2n+2){float:right;margin-right:0;}
    
    /* Services */
    #content .s,
    #content .s ul{background:none;}
        
    /* About */
    #team a{width:33%;}
    .about .row .fourcol{width:30.75%;}
    
    /* Contact */
    form#contactform span.error{left:320px;}
    a#send{float:none;margin-bottom:4em;}
    
    /* Slides */
    #hero #mu p{width:380px;}
    #hero #mu img{bottom:-25px;}
    #hero #neroli p{width:100%;}
    #hero .slide a.tunneler{font-size:.875em;}
    

}

@media screen and (max-width: 520px) {

    /* Reset */
    body,
    #hero,
    #team,
    #content,
    #footer .col1,
    #footer .col2,
    #footer ul#nav,
    #hero .wrapper,
    #content .wrapper{width:100%;overflow:hidden;padding-left:0;padding-right:0;}
    
    /* Hide */
    .home #arrow,
    #footer .col2,        
    .home #hero a#next,
    .home #hero .slide,
    .home #hero a#previous,
    #footer ul#nav li a:after{display:none}
    
    /* Padding */
    #footer .wrapper,
    #content .wrapper{padding-left:5%;padding-right:5%;width:auto;}
    #content{padding:2em 0;}
    
    /* Hero */
    #hero{min-height:168px;}
    
    /* Header */
    #header h1{float:none;width:100%;margin-left:0;}
    #header h1 a{display:block;float:none;width:100%;margin:0;text-align:center;}
    #header ul{float:none;width:100%;text-align:center;margin:20px 0 0;height:auto;}
    #header ul a,
    #header ul li,
    #header ul h5{float:none;display:inline;width:auto;}
    #header ul a{display:inline-block;padding:7px 10px 3px;margin:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
 
    /* Footer */
    #footer #socialHolder{background:none;padding:0;height:auto;float:left;width:100%;}
    #footer #socialHolder .twitter{height:auto;}
    
    /* Home */
    .title,
    .homeTitle{font-size:1.6875em;}
    .subTitle{font-size:1.125em;line-height:1.5em;}
    .subHome{font-size:1.125em;line-height:1.5em;}
    .home .fourcol{margin-bottom:2em;}
    .home .fourcol:last-child{margin-bottom:0;}
    .home #content h2 a{color:#363636;}
    
    /* Work */
    #portfolio li{width:50%;padding:0;margin-right:0;overflow:hidden;max-width:205px;box-shadow:none;border:0;border-radius:0;}
    #portfolio li:nth-child(2n + 2),
    #portfolio li:nth-child(3n+3){margin-right:0;}
    html > body #portfolio li span{width:auto;padding-right:7px;display:block;}
    html > body #portfolio li,
    #content #portfolio li {margin-right:0;}
    
    
    /* About */
    #team a{width:50%;}
    .about .row{margin-top:1em;}
    .about .sub{padding-bottom:50px;}
    .about .row .fourcol{width:100%;}
    .about .fourcol p{clear:none;}
    
    /* Contact */
    #content .contactForm{margin:1em 0 2em;}
    form#contactform span.error{left:1000px;}
}