/* SITE SELECTORS
---------------------------------*/

/* PAGE */
html { background:#000; }
body { color: #fff; }
a:link,a:visited,a:hover,a strong { color: #fff; }
.home,.internal { }
.home > .t,.internal > .t { background: url(../img/site-x.png) 0 -229px repeat-x; width: 100%; top: 416px; left:0; height:66px; }
.internal .t { background-position:0 0; height:296px; top: 91px; }
.internal.alt .t { background-position:0 -229px; height:66px; top: 96px; }
.site { width: 951px; text-align:left; margin: 0 auto 0 auto; padding: 0 0 30px 0; position:relative; }

/* BRANDING */
#branding { height: 416px; position:relative; z-index:100; }
.internal #branding { height:320px; }
.internal.alt #branding { height:96px; }
#logo { width:187px; height:47px; position:absolute; top:19px; left:0; background: url(../img/site-24.png) 0 0 no-repeat; text-indent:-6000px }

#nav-quick-links { position:absolute; z-index:110; top:0; right:0; width: 244px; }
#nav-quick-links > ul { height:20px; }
#nav-quick-links > ul > li { float:left; margin: 0 0 0 4px; height:20px; width: 119px; }
#nav-quick-links > ul > li:first-child { margin-left:0; }
#nav-request-a-quote { height:20px; background:url(../img/site.png) 0 0 no-repeat; top:0; right:123px; text-indent:-6000px; }

#nav-client-services { position:relative; }
#nav-client-services > a { cursor:pointer; display:block; background:url(../img/site.png) no-repeat -155px 0; }
#nav-client-services.active a { background-position: -155px -30px; }
#nav-client-services ul { position:absolute; z-index:10; top:20px; left:0; width:119px; }
#nav-client-services ul li { background:#2868a5; }
#nav-client-services ul li.even { background:#2868a5; }
#nav-client-services ul li a { text-decoration:none; color:#fff; display:block; height: 27px; line-height: 27px; padding: 0 12px; }
#nav-client-services ul li a:hover { background:#4687c2; }

/*NAV*/
#nav { top:51px; right:0; position:absolute; z-index: 100; width:auto; height:10px; }
#nav > ul > li { float:left; display:block; width: auto; margin: 0 0 0 23px; position:relative; }
#nav > ul > li:first-child { margin:0; }
#nav > ul > li a { font-family:Arial, Helvetica, sans-serif; font-size:1.1em; display:block; height:20px; text-decoration:none; text-transform:uppercase; }
#nav > ul > li a:hover { color:#0d6cb6; }
#nav > ul > li.active a { color:#0d6cb6; text-decoration:underline; }

/*PORTFOLIO*/
#portfolio { position:absolute; top:0; left: -87px; height:416px; width:1038px; }
#portfolio dl { }
.js #portfolio dl dt{ display:none; }
#portfolio dl dd{ height:415px; width:464px; position:absolute; top:0;left:0; z-index:18; padding: 1px 0 0 660px; background:#000; }
#portfolio dl dd .t { z-index:1; left:0; display:block; width:1121px; height:270px; background:url(../img/site.jpg) 0 0 no-repeat; }
#portfolio dl dd .img { z-index:5; top:0; width:660px; height:100%; background-position:0 0; background-repeat: no-repeat; }
#portfolio dl dd .title{ position:relative; z-index:10; margin: 138px 0 0; font-size:2.1em; color:#0d6cb6; }
#portfolio dl dd .tagline{ position:relative; z-index:10; font-size:1.5em; margin: 18px 0 0; font-style: italic; }
#portfolio dl dd .desc{ position:relative; z-index:10; margin: 20px 0 0; width:379px; }
#portfolio .link { position:absolute; z-index:1500; bottom:40px; left:660px; width: auto; }
#portfolio .link a { text-decoration:none; }
#portfolio .link a:hover { text-decoration:underline; }
#portfolio .link:before { content:"\00BB   "; }
#portfolio .nav { position:absolute; z-index:1500; display:block; width:68px; height:27px; bottom: 13px; right:-10px; }
#portfolio .nav a { cursor: pointer; display:block; position:absolute; top:0; width:26px; height:27px; background:url(../img/site.png) #fff; }
#portfolio .nav .prev { left:0; background-position: 0 -171px; }
#portfolio .nav .next { right:0; background-position: 0 -30px; }
#portfolio .nav .prev:hover { background-position: 0 -124px; }
#portfolio .nav .next:hover { background-position: 0 -77px; }

#portfolio dl dd.active { z-index:20; }
#portfolio dl dd.last-active { z-index:19; }

/*PHOTO*/
#photo { font-weight:normal;position:absolute; top:92px; left:-17px; width:949px; height:77px; background:url(../img/photo.jpg) no-repeat 0 0; text-align:right; font-size: 3em; padding: 152px 30px 0 0; text-transform:uppercase; }
#photo .l { z-index:10; left:72px; top:16px; width:383px; height:197px; background-image: url(../img/photos.jpg); }
#photo .cufon { position:relative; z-index:20;}
#photo-what-we-do { background-position: 0 0; }
#photo-contact-us { background-position: 0 -197px; }
#photo-about-us { background-position: 0 -394px; }

/*PAGE TITLE*/
#page-title { position:absolute; top:344px; left:0; width: 931px; }
.internal.alt #page-title { position:absolute; top:119px; left:0; width: 931px; }

/*MAIN*/
#main { overflow:hidden; width: 100%; margin: 0 0 27px; padding:23px 0 0; position:relative; }
.internal #main { padding-top: 66px; }
#main > .t { top:0; left: -37px; background: url(../img/site.png) 0 -218px no-repeat; width: 1025px; height: 1px; }

/* CONTENT */
#content { overflow:hidden; width:100%; position:relative; }
.internal #content { background:#1e1e1e; padding:16px; width: 919px; }

.home #content .col { background:#1e1e1e; width:311px; height:376px; float:left; margin: 0 0 0 9px; position:relative; overflow:hidden; }
.home #content .col.first-child { margin-left:0; }
.home #content .col > h2 { }
.home #content .col .link { position:absolute; bottom:20px; right:20px; }
.home #content .col .link:before { content:"\00BB  "; }
.home #content .col .link a { text-decoration:none; text-transform: lowercase; }
.home #content .col .link a:hover { text-decoration:underline; }

/*NEWS & ANNOUNCMENTS */
#news-announcements {}
#news-announcements h2 {}
#news-announcements dl { margin:0 20px 0 20px; }
#news-announcements dt { font-weight:bold; font-size: 1.1em; height:20px; padding:12px 0 0 0; border-top: 1px solid #363636; }
#news-announcements dt a { display:block; text-decoration:none; }
#news-announcements dt a:hover { text-decoration:underline; }
#news-announcements dt:first-child { border-top:0; }
#news-announcements dd { position:relative; line-height:1.4em; padding: 0 0 12px; }
#news-announcements dd .desc {}
#news-announcements dd .date { color:#959595; position:absolute; top:-41px; left:0; overflow:hidden; }
#news-announcements dd .date-internal { color:#959595; }

/*INTRO*/
#intro {}
#intro .c { padding: 0 20px 5px 20px; }

/*NAV:WHAT WE DO*/
#what-we-do {}
#what-we-do ul{ margin: 20px 20px 0 20px; border-bottom: 1px solid #4d4d4d; background:url(../img/site.jpg) 0 -289px no-repeat; }
#what-we-do ul li{ height: 66px; border-top: 1px solid #4d4d4d; border-bottom: 1px solid #222; }
#what-we-do ul li a{ text-transform:lowercase; display:block; height:100%; padding: 0 0 0 20px; line-height:66px; font-size:1.2em; text-decoration:none; }
#what-we-do ul li#nav-ecommerce-works a { text-transform:none; }
#what-we-do ul li a span{ font-weight:bold; text-transform:uppercase; }
#what-we-do ul li a:hover{ background:url(../img/site.jpg) no-repeat; }

#nav-website-design a:hover{ background-position: -271px -289px!important; }
#nav-ecommerce-works a:hover{ background-position: -271px -358px!important; }
#nav-custom-integration a:hover{ background-position: -271px -426px!important; }
#nav-hosting-solutions a:hover{ background-position: -271px -494px!important; }

/*content panel*/
#content-panel { float:left; width: 218px; display:inline; margin:0; }

/* content main */
#content-main { position:relative; min-height:300px; }
#content-main.col { float:right; width: 651px; padding:0 0 0 20px; display:inline; border-left: 1px solid #555; }

/* SITE INFO */
#site-info { background: url(../img/site.png) -1019px -75px no-repeat; padding: 0; text-align:right; line-height: 1.4em; position:relative; }
#site-info address { margin:0; font-style: normal; position:absolute; top:22px; right: 0;  }
#site-info address span { background: url(../img/site.png) -1019px -70px no-repeat; padding: 0 0 0 22px; margin: 0 19px 0 0; }
#site-info address span:first-child { background:none; padding-left:0; }
#site-info address span.last { margin-right:0; }
#site-info address br { display:none; }
#site-info ul { position:absolute; top:0; right:0; }
#site-info li { display:inline; background: url(../img/site.png) no-repeat -1024px -139px; padding: 0 0 0 1px; }
#site-info li#site-info-contact-us { padding:0 0 0 17px; background-position: -1010px 3px; }
#site-info li a { line-height: 1.1em; margin: 0 5px 0 9px; }

/*CUSTOM SELECTORS*/
.heading { line-height:45px; font-weight:normal; background:#2c2c2c; font-size: 1.5em; text-transform:uppercase; color:#0d6cb6; height:43px; padding: 0 0 0 20px; }
.msg { font-size: 1.1em; padding:10px; }
.error { background:#e4adb1; color:#ab0511; }

/*PAGES*/
#page-what-we-do .content { }
#page-what-we-do .content .item { }
#page-what-we-do .content .item h2 { cursor:pointer; font-weight:normal; text-transform:lowercase; line-height:45px; font-size:1.5em; height:45px; background:url(../img/site-x.png) 0 -315px repeat-x; position:relative; padding: 0 0 0 20px; }
#page-what-we-do .content .item h2:hover { background-position: 0 -559px; }
#page-what-we-do .content .item h2 span { color:#b7b7b7; text-transform:uppercase; }
#page-what-we-do .content .item.active h2 { background-position:0 -380px !important; }
#page-what-we-do .content .item h2 .r { display:block; position:absolute; right:22px; top:11px; background: url(../img/site.png) 0 -284px; width: 25px; height: 25px; }
#page-what-we-do .content .item.active h2 .r { background-position: 0 -239px; }
.js #page-what-we-do .content .item .c { display:none; }

#page-what-we-do .content .container { overflow:hidden; width:auto;}
#page-what-we-do .content .item .col { float:left; width: 200px; margin: 0 0 0 15px; }
#page-what-we-do .content .item .col:first-child { margin-left: 0; }
#page-what-we-do .content .item .col h3 { text-transform: uppercase; font-size: 1em; font-weight:normal; color:#0D6CB6; }

#page-featured-work {}
#page-featured-work .content{}
#page-featured-work .content dl{ border: solid #555; border-width: 1px 0 0 1px; overflow:hidden; width: 100%; }
#page-featured-work .content dl dt{ float:left; padding:5px 0 0 5px; display:block; width:300px; height:168px; border: solid #555; border-width: 0 1px 1px 0; text-indent:-6000px; }
#page-featured-work .content dl dt a{ cursor:pointer; display:block; width: 300px; height:164px; background-position: 0 0; background-repeat: no-repeat; }
#page-featured-work .content .portfolio-details { display: none; }

#page-featured-work .content dt a:hover { background-position: 0px bottom; }

.portfolio-details { width: 758px; height: 396px; position:relative; border:1px solid #dadada; position:relative; z-index:10; }
.portfolio-details .b{ left:0; background:url(../img/site-x.png) repeat-x 0 -445px; height:94px; width: 100%; }
.portfolio-details .img{ position:absolute; z-index:10; top:23px; left:23px; width:400px; height:372px; }
.portfolio-details .title{ color:#0d6cb6; font-size:2em; position:absolute; top:23px; left:452px; }
.portfolio-details .tagline{ color:#959595; font-size:1.5em; position:absolute; top:53px; left:452px; font-style:italic; }
.portfolio-details .desc{ color:#000; z-index:10; position:absolute; top:97px; left:452px; line-height: 16px; width: 255px; }
.portfolio-details .link{ z-index:10; background:url(../img/site.png) -155px -62px; position:absolute; bottom:57px; right:25px; width:116px; height:28px; text-indent: -5000px; overflow: hidden; }
.portfolio-details .link a{ cursor:pointer; display: block; width: 100%; height: 100%; }

#page-case-tracker #case-tracker-legend{}
#page-case-tracker #case-tracker-legend h2{color:#CCC; font-weight:normal; font-size:1.4em; border: 1px solid #4D4D4D; padding: 10px; margin: 0 0 2px; }
#page-case-tracker #case-tracker-legend dl{background:#2C2C2C; width: 204px; padding: 7px; overflow:hidden; }
#page-case-tracker #case-tracker-legend dl dt{ color:#919594; font-weight:bold; float:left; width:80px; height:50px; background: url(../img/site.png) no-repeat -950px -290px; }
#page-case-tracker #case-tracker-legend dl dd{ color:#787878; float:left; width:124px; height:50px;}

#page-case-tracker .content{}
#page-case-tracker .content h2{ font-weight:normal; font-size: 1.5em; }
#page-case-tracker .content dl{}
#page-case-tracker .content dt{ font-weight:bold; float:left; width: 90px; }
#page-case-tracker .content dd{ float:left; width:500px; margin: 0; }

#page-case-tracker .content dt.status{ margin: 0 0 5px; }
#page-case-tracker .content dd.status{ margin: 0 0 5px; }
#page-case-tracker .content dt.desc{ color:#0D6CB6; float:none; clear:both; margin: 5px 0 0; }
#page-case-tracker .content dd.desc{ width:640px; color:#74c1fe; background:#0f3655; border:1px solid #0D6CB6; padding: 10px; float:none; clear:both; width: auto; height:auto; }
#page-case-tracker .content dt.resolution{ color:#678D36; float:none; clear:both; margin: 5px 0 0; }
#page-case-tracker .content dd.resolution{ width:630px; color:#acc987; background:#344420; border:1px solid #678D36; height:auto; padding: 10px; float:none; clear:both; }

#page-about-us {}`
#page-about-us .content{}
#page-about-us .content .item { position:relative; border:1px solid; padding: 10px; margin: 0 0 20px 0; }
#page-about-us .content .item.listen { border-color: #0D6CB6; }
#page-about-us .content .item.create { border-color: #9ABE49; }
#page-about-us .content .item h2 { text-transform: uppercase; font-size:1.3em; margin:0;padding:0 10px; position:absolute; top:-10px; left: 10px; background:#1E1E1E; }
#page-about-us .content .item.listen h2 { color: #0D6CB6; }
#page-about-us .content .item.create h2 { color: #9ABE49; }