@charset "utf-8";
/* Visionary Services - Portfolio CSS */

.portfolio {width:100%; float:left; clear:both; list-style:none; margin:0; padding:0;}

/* Featured Portfolio ---------------------------*/
.portfolio.featured {width:750px; margin-left:30px; margin-top:20px;}
.portfolio.featured li {display:block; float:left; margin:0 14px 14px 0; position:relative; font-size:16px; line-height:20px;}
.portfolio.featured li.last {margin-right:0;}
.portfolio.featured li.level1 {width:368px; height:221px;}
.portfolio.featured li.level2 {width:177px; height:253px;}

.portfolio.featured li a {display:block; padding:11px; text-decoration:none; background-color:#eaeaea; border:1px solid #ccc; border-radius:4px; color:#333; overflow:hidden;}
.portfolio.featured li a:hover {color:#c00; background-color:#ddd;}
.portfolio.featured li.level1 a {width:344px; height:197px;}
.portfolio.featured li.level2 a {width:153px; height:214px;}

.portfolio.featured li a .screen {width:100%; height:155px; display:block; background-position:50% 50%; background-repeat:no-repeat; background-color:#000; border-bottom:1px solid #ccc;}
.portfolio.featured li a .title {width:100%; line-height:20px; display:block; font-size:18px; font-weight:500; margin-top:4px;}
.portfolio.featured li a .client {width:100%; height:15px; display:block; font-size:12px; line-height:15px; text-transform:uppercase; margin-top:3px;}

.portfolio.featured li a .detail {display:none; padding:11px; z-index:30; position:absolute; top:12px; left:12px; background:url(/images/portfolio/opaque.png) repeat; font-size:13px; line-height:18px; color:#fff;}
.portfolio.featured li a:hover .detail {display:block;}
.portfolio.featured.jsready li a .detail {display:none;}
.portfolio.featured li.level1 a .detail {width:322px; height:133px;}
.portfolio.featured li.level2 a .detail {width:131px; height:133px;}


/* Listed Portfolio -----------------------------*/
.portfolio.listed {margin-top:20px;}
.portfolio.listed li {width:368px; height:89px; display:block; float:left; margin:0 14px 14px 0; position:relative;}
.portfolio.listed li.last {margin-right:0;}

.portfolio.listed li a {width:344px; height:65px; display:block; padding:11px; text-decoration:none; background-color:#eaeaea; border:1px solid #ccc; border-radius:4px; color:#333;}
.portfolio.listed li a:hover {color:#c00; background-color:#ddd;}

.portfolio.listed li a .screen {width:65px; height:65px; display:block; background-position:50% 50%; background-repeat:no-repeat; background-color:#000; float:left; clear:left;}
.portfolio.listed li a .detail {width:270px; height:65px; display:block; margin-left:9px; float:left; clear:right; font-size:10px; line-height:12px; overflow:hidden;}
.portfolio.listed li a .detail .title {font-size:15px; line-height:17px; font-weight:500;}
.portfolio.listed li a .detail .client {text-transform:uppercase;}

.portfolio.description p {margin-bottom:0;}


/* Browse By Box - Portfolio --------------------*/
.portfolio.browse.margin_up {margin-top:15px; padding-top:15px; border-top:1px solid #aaa;}
.portfolio.browse .browse_box {width:344px; padding:11px; float:left; margin:0 14px 14px 0; position:relative; font-size:12px; line-height:18px; background-color:#eaeaea; border:1px solid #ccc; border-radius:4px;}
.portfolio.browse .browse_box.last {margin-right:0;}
.portfolio.browse .browse_box h3 {padding:0; font-weight:500; font-size:18px; line-height:20px; color:#333;}

.portfolio.browse .browse_box ul {margin:4px 0 0 0; padding:0; list-style:none;}
.portfolio.browse .browse_box ul li {width:162px; height:18px; padding-left:10px; margin-bottom:3px; display:block; overflow:hidden; float:left; background:url(/images/portfolio/bullet.png) no-repeat 0 50%;}

/* Project Details - Portfolio ------------------*/
.portfolio.slideshow {width:748px; height:348px; border:1px solid #ccc; border-radius:4px; background-color:#eaeaea; margin:10px 0; position:relative; float:left; clear:both;}
.portfolio.slideshow .slide_holder {width:724px; height:324px; position:absolute; top:11px; left:11px; border:1px solid #ddd; z-index:5;}
.portfolio.slideshow .slide_holder .slide {width:100%; height:100%; position:absolute; top:0; left:0; background-position:50% 50%; background-repeat:no-repeat; background-color:#000;}
.portfolio.slideshow .slide_control {width:724px; height:324px; position:absolute; top:12px; left:12px; z-index:20;}
.portfolio.slideshow .slide_control div {width:30px; height:70px; background-color:#f00; position:absolute; top:127px; background:url(/images/portfolio/slide_control.png) no-repeat; display:none;}
.portfolio.slideshow .slide_control div:hover {cursor:pointer;}
.portfolio.slideshow .slide_control .prev {left:0; background-position:0 0;}
.portfolio.slideshow .slide_control .next {right:0; background-position:-30px 0;}

.portfolio.contentleft {width:480px; float:left; padding-bottom:20px; clear:none;}
.portfolio.contentleft h1 {margin-bottom:10px;}
.portfolio.contentleft .content_holder {width:100%; margin-bottom:10px; border-bottom:1px dotted #ccc;}
.portfolio.contentleft .content_holder h3 {padding:0;}
.portfolio.contentleft .content_holder p {padding-top:0; margin-top:0;}
.portfolio.contentleft .button_holder {width:100%; height:30px; float:left; clear:both; margin-top:25px;}
.portfolio.contentleft .button {width:100px; height:30px; display:block; padding:0; line-height:30px; font-size:13px; color:#fff; font-weight:bold; text-align:center; text-transform:uppercase; text-decoration:none; background:url(/images/body/submit-bg.gif) repeat-x; float:left; margin-right:20px;}
.portfolio.contentleft .button:hover {background-image:url(/images/body/submit-bg-hover.gif);}

.portfolio.contentright {width:250px; float:left; margin-left:20px; clear:none;}
.portfolio.contentright div {width:226px; padding:11px; float:left; clear:both; margin-bottom:15px; border:1px solid #ccc; border-radius:4px; color:#333; background-color:#eaeaea;}
.portfolio.contentright div h3 {padding:0 0 4px; color:#333; font-weight:500; font-size:18px; line-height:20px;}
.portfolio.contentright div ul {margin:0; padding:0; list-style:none;}
.portfolio.contentright div ul li {padding-left:10px; margin-bottom:3px; background:url(/images/portfolio/bullet.png) no-repeat 0 50%;}