/*top navi*/
.portfolio-content .hd { position:absolute; top:-40px; width:600px;}
.portfolio-content .hd .navi {-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background:#fafafa; padding:5px; float:right;}
.portfolio-content .hd .navi a{display:block; float:left; width:10px; height:10px; background:#ccc; margin:5px;-moz-outline: none 0; outline: none 0;-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.portfolio-content .hd .navi a.active, .portfolio-content .hd .navi a:hover.active {background:#333; cursor:default;}
.portfolio-content .hd .navi a:hover { background:#09C;}
/*bottom navi*/
.portfolio-content .fd {position:absolute; top:300px; right:-15px; width:650px;}
.portfolio-content .fd div{background:#fff; border:solid 1px #ccc; padding:2px 0 5px 5px; font:bold 22px Verdana; cursor:pointer;}
.portfolio-content .fd div:hover{ color:#09C;}
.portfolio-content .fd div.disabled{ display:none;}
.portfolio-content .fd .prev{float:left; border-right:none;-moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px;-webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-radius:5px 0 0 5px;}
.portfolio-content .fd .next{float:right; border-left:none;-moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0;-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-radius:0 5px 5px 0;}
/*main content*/
.portfolio-content .bd {background:#fff; padding:10px;}
.portfolio-content .scrollable{position:relative;overflow:hidden; height:582px;}
.portfolio-content .items{position:absolute; width:2000em;}
.portfolio-content .items > ul{ float: left; width:582px;}
.portfolio-content li{list-style:none;}
.portfolio-content ul{margin:0; padding:0;}
.portfolio-content li.web, .portfolio-content li.print, .portfolio-content li.logo, .portfolio-content li.illustration { margin:19px; float:left;}
.portfolio-content h4 {color:#fff;}
.portfolio-content .details {display:none; color:#fff; position:absolute; width:180px; height:134px; padding:10px; text-align:left; font:10px Verdana; z-index:100;}
.portfolio-content .details .arrow{position:absolute; top:5px; left:-20px;}
.portfolio-content .third .details { margin-left:-354px;}
.portfolio-content .third .details .arrow{left:200px;}
/*WEB Style*/
.portfolio-content .web .details,.sidebar-rail .key .web {background:#CC311D;}
.portfolio-content .web .details .arrow {border:solid 10px transparent; border-right-color:#CC311D;}
.portfolio-content .web.third .details .arrow {border:solid 10px transparent; border-left-color:#CC311D;}
.portfolio-content .web img {border: solid 2px #CC311D;}
/*PRINT Style*/
.portfolio-content .print .details,.sidebar-rail .key .print {background:#6D0839;}
.portfolio-content .print .details .arrow {border:solid 10px transparent; border-right-color:#6D0839;}
.portfolio-content .print.third .details .arrow {border:solid 10px transparent; border-left-color:#6D0839;}
.portfolio-content .print img {border: solid 2px #6D0839;}
/*LOGO Style*/
.portfolio-content .logo .details,.sidebar-rail .key .logo {background:#68AD1E;}
.portfolio-content .logo .details .arrow {border:solid 10px transparent; border-right-color:#68AD1E;}
.portfolio-content .logo.third .details .arrow {border:solid 10px transparent; border-left-color:#68AD1E;}
.portfolio-content .logo img {border: solid 2px #68AD1E;}
/*ILLUSTRATION Style*/
.portfolio-content .illustration .details,.sidebar-rail .key .illustration {background:#DA0367;}
.portfolio-content .illustration .details .arrow {border:solid 10px transparent; border-right-color:#DA0367;}
.portfolio-content .illustration.third .details .arrow {border:solid 10px transparent; border-left-color:#DA0367;}
.portfolio-content .illustration img {border: solid 2px #DA0367;}

.portfolio-content .images { position:absolute; margin:-156px 0 0 2px; z-index:200;}
.portfolio-content .images li{ display:none; padding:0; margin:0;}
.portfolio-content .images li.active { display:block;}
.portfolio-content .images li.active a {display:block; width:150px; height:150px; -moz-outline: none 0; outline: none 0; border:none;}
.portfolio-content .images li a span{ display:none;}
/*SIDEBAR*/
.sidebar-rail .key li{ display:inline-block; padding:4px 12px; color:#fff; list-style:none; font:bold 14px Times; margin-right:40%;}