@charset "utf-8";
/* CSS Document */

/* general */
body, html { height: 100%; }
html { overflow: hidden; }

.visit-site { width: 100px; height: 30px; margin: 10px 0 0 0; }
.visit-site li { float: left; width: 100px; height: 30px; margin: 0; }
.visit-site li a { position: relative; display: block; text-indent: -9999px; overflow: hidden; width: 100px; height: 30px; background: url(../images/visit-site.png) no-repeat; }
.visit-site li.button a { background-position: 0 top; }
.visit-site li.button a:hover { background-position: 0 -38px; }

a { text-decoration: none; color: #dc0c05; outline: none; }
a:hover { text-decoration: none; color: #700404; }
ul, li { list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; }
img { border: none; }

h1 { color: #a00909; font-size: 12px; text-align: right; margin: 0; padding: 0; }

.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
div.clear { clear: both; height: 0; font-size: 1px; }
.last { margin-right: 0; }

/* header */
#header_bg { background: transparent url(../images/transp-bg.png) repeat-x top; height: 119px; width: 100%; position: fixed; top: 0; left: 0; z-index: 70; }
#header { width: 960px; margin: 0 auto; }
#player { float: left; margin-top: 7px; width: 360px; height: 20px; }
#main_nav { float: right; margin-top: 12px; }
#main_nav li { display: inline; margin-left: 15px; font-size: 12px; }
#main_nav li a { color: #fdfdfd; text-decoration: none; }
#main_nav li a:hover {color: #dc0c05; text-decoration: none; }
div#main_nav ul li a.selected { color: #dc0c05; }

/* content */
#page { width: 960px; height: 510px; margin: 0 auto; }

/* home */
#home { width: 960px; height: 510px; margin: 0 auto 600px auto; }
.welcome_txt { position: absolute; margin: 145px 0 0 510px; z-index: 10; }
.home_txt { position: absolute; margin: 445px 0 0 355px; z-index: 10; }
.available_tag { position: absolute; z-index: 10; margin: 280px 0 0 790px; }
.featured_work { background: url(../images/samsung.png) no-repeat; width: 390px; height: 375px; position: absolute; z-index: 10; top: 175px; overflow: hidden; }
.featured_gallery { width: 390px; height: 360px; padding: 0; margin: -10px 0 0 0; }
.featured_gallery li { height: 360px; }
.featured_gallery img { width: 390px; height: 360px; top: 0; left: 0; position: absolute; }

/* folio */
#portfolio { width: 960px; height: 510px; margin: 0 auto 600px auto; }
.portfolio_showcase_txt { position: absolute; z-index: 10; margin: 60px 0 0 700px; }
.slideshow_nav { position: absolute; z-index: 10; }
.prev_nav { position: absolute; z-index: 10; margin: 300px 0 0 10px; }
.next_nav { position: absolute; z-index: 10; margin: 300px 0 0 907px; }
.bg_portfolio { position: absolute; z-index: 10; width: 817px; height: 358px; background: transparent url(../images/portfolio-bg.png) no-repeat top center; margin: 150px 0 0 70px; padding-top: 8px; }
div.work_gallery { position: relative; z-index: 10; width: 743px; height: 307px; overflow: hidden; margin: 0 0 0 37px; }
div.work_gallery img { width: 743px; height: 307px; }
.work_info { position: absolute;  width: 250px; height: 307px; overflow: hidden; background: #000; left: 530px; text-align: justify; z-index: 20; /* opacity: 0.9; */ }
.work_info div { padding: 10px 20px 10px 20px; }
.work_info h1 { font-size: 12px; color: #a00909; margin-bottom: 20px; text-transform: uppercase; text-align:center; }
.work_info p { font-size: 11px; color: #fff; margin: 10px 0 5px 0; line-height: 15px; }
.work_info img { margin-top: 20px; }
.launched { font-size: 11px; font-style: italic; color: #777; }

/* petrof */
#about { width: 960px; height: 510px; margin: 0 auto 600px auto; }
.about_me_txt { position: absolute; margin: 60px 0 0 700px; z-index: 10; }
.bg_about { background: transparent url(../images/bg_about.png) no-repeat top center; width: 960px; height: 426px; position: absolute; z-index: 10; margin: 92px 0 0 0; }
.text { width: 629px; height: 310px; position: absolute; padding: 10px 30px 20px 210px; z-index: 5; }
.text p { margin-bottom: 15px; position: relative; z-index: 10; text-align: justify; line-height: 15px; }
.text a { color: #fff; text-decoration: underline; }
.text a:hover { color: #fff; text-decoration: none; }

.sec_nav { position: absolute; margin: 60px 0 0 0; z-index: 8; }
.sec_nav li { color: #fff; background: transparent url(../images/nav-separator.png) no-repeat bottom right; width: 163px; height: 30px; text-align: right; padding: 10px 15px 10px 0; }
.sec_nav li a { color: #fff; text-decoration: none; width: 167px; height: 31px; padding-top: 6px; display: block; position: absolute; margin: 0; }
.sec_nav ul li a.active { background: transparent url(../images/nav-active.png) no-repeat top right; width: 168px; height: 28px; padding: 6px 23px 0 0; }

/* contact */
#contact { width: 960px; height: 1200px; margin: 0 auto 600px auto; position: relative; z-index: 10; }
.contact_txt { position: absolute; margin: 60px 0 0 700px; z-index: 10; }
.contact_info_bg { position: absolute; width: 449px; height: 225px; background: transparent url(../images/contact-bg.png) no-repeat top center; margin: 130px 0 0 0; }
.conact_info { padding: 55px; }
.conact_info h1 { font-size: 24px; color: #fff; margin-bottom: 15px; }
.conact_info p { color: #fff; margin-bottom: 10px; font-size: 12px; text-align: center; }

/* footer */
#footer { position: fixed; top: 542px; background: #000 url(../images/transp-bg.png) repeat-x; width: 100%; height: 100%; margin: 0 auto; z-index: 70; border-top: 1px solid #444; }
.footer_content { margin: 0 auto; width: 960px; font-size: 11px; margin-top: 10px; color: #700404; }
.footer_content a { color: #dc0c05; text-decoration: none; }
.footer_content a:hover { color: #700404; text-decoration: none; }

.signature { font-size: 11px; font-style: italic; color: #fff; margin: 0 0 3px 0; padding: 0 0 0 8px; }
#sitemap { font-size: 14px; color: #fff; text-align: right; padding: 0 20px 20px 0; }


/* scrollbar */
.jScrollPaneContainer {
position: relative;
top:55px; 
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
background: #fff;
}

.jScrollPaneDrag {
position: absolute;
background: #a00909;
cursor: pointer;
overflow: hidden;
}

.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}

.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}

a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}

a.jScrollArrowUp:hover {
}

a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}

a.jScrollArrowDown:hover {
}

a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
}