/*
Theme Name: jrack.com

*/

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

a:active, a:focus {outline: 0;}


body {
	/* background: #333 url('/images/common/baybridge_pano.gif')  no-repeat fixed  left bottom;	*/
	background-color:#333;
	padding: 0;
	margin: 0;
	font-family: "MyriadPro-Regular", "Myriad Pro Regular", MyriadPro, "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 23px;
	font-weight: normal;
	text-align: left;
	color: #999999;
}

A:link, A:active, A:visited {
	color: #999999;
	text-decoration: none;
}

A:hover {
	color: #999999;
	text-decoration: underline;
}

p {
	margin: 0 0 18px 0;
	padding: 0;
}

p A:link, p A:active {
	color: #999999;
}

p A:visited {
	color: #999999;
}

p A:hover {
	color: #999999; text-decoration:underline;
}

h1  {
	size:16px; font-weight:lighter; text-decoration:none; color:#666666;
}

h1 a:link, h2 a:visited {
	text-decoration:none; color:#666666;
}

h1 a:hover {
	text-decoration:underline; color:#666666;
}


/* MAIN LAYOUT */

#shell {width:100%; /*background: url('/images/common/box_bg.png')  no-repeat   50% 122px;*/	 padding-bottom:25px;}

#topbar {width:100%; height:74px; background-color:#31c9e9; position:fixed; margin-top:11px; z-index:100; }

#topbar_content {width: 930px; height:74px; margin:0 auto; padding:3px 20px 0 0;}

#eyebrow {
width: 300px; float:right; height:26px; margin:24px 0 0 0; text-align:right; padding:3px 20px 0 0;
}

#eyebrow p {
color:#fff; font-size:16px;
}

#eyebrow p a:link,#eyebrow p a:visited, #eyebrow p a:active {
color:#fff; text-decoration:none;
}

#eyebrow p a:hover {
color:#fff; text-decoration:underline;
}



#header {
width: 950px; height:120px; margin:0 auto;
}

#header_left {
float:left; width: 500px; height:98px;
}
#header_right {
float:right; width: 400px; height:98px;  background-image:url(/images/common/header_image.png); background-repeat: no-repeat; background-position: 75%	100%;
}



a#logo {
display:block; float:left; width:391px; height:46px; background:url(/images/common/logo_white.png) no-repeat; background-position:16px 50%; text-indent:-9999px; margin:12px 0 0px 32px;
}
/* a#nav_web:hover {
background:url(/images/common/nav_thumb_web.jpg) no-repeat 0px -84px; */

#content_wrap1 {width:918px; background-color:#ececec; padding:16px; margin:0 auto;}
#content_wrap2 {float:left; width:918px; background-color:#FFF; background:url(/images/common/box_bg.jpg) repeat-y;  margin:0 0 0px 0px; padding:0;}


#outter {
width: 918px; height:518px; margin:0 auto 0 auto;
background-image:url(/images/common/outter_bg.jpg); background-repeat: repeat-x; background-position: 0 0; padding:16px;
background-color:#FFFFFF;
}

#inner {
width: 918px; height:518px; margin:0; background-color:#fff;
background-image:url(/images/common/inner_bg.jpg); background-repeat: repeat-y; background-position: 0 0;
}
#main_col{
width:657px; float:left; padding-left:20px; 
}

#main_col_home {
width:650px; height:585px; float:left; padding:0 0 0 0px; margin:0; position:relative; 
}

#main_col_noscroll {
width:650px; height:518px; float:left; padding-left:32px; 
}

#side_col {
width:228px; float:right; padding-top:70px;
background-image:url(/images/common/work_bg.png); background-repeat: no-repeat; background-position: 0 0;
}


.clear {clear:both; height:0;}
.clear5 {clear:both; padding-bottom:5px;}
.clear10 {clear:both; padding-bottom:10px;}
.clear15 {clear:both; padding-bottom:15px;}
.clear20 {clear:both; padding-bottom:20px;}
.clear25 {clear:both; padding-bottom:25px;}
.clear30 {clear:both; padding-bottom:30px;}
.clear35 {clear:both; padding-bottom:35px;}
.clear40 {clear:both; padding-bottom:40px;}




/* SIDE COL */


#nav_web_wrap {height:84px; width:170px; margin:0px 0px 0px 30px;}
a#nav_web {
display:block; width:170px; height:84px; background:url(/images/common/nav_thumb_web.png) no-repeat; text-indent:-9999px; margin:8px 0 0px 0px;
}
a#nav_web:hover {
background:url(/images/common/nav_thumb_web.png) no-repeat 0px -84px;
}
body#bodyonli a#nav_web {
display:block; width:170px; height:84px; background:url(/images/common/nav_thumb_web.png) no-repeat 0px -168px; text-indent:-9999px;;
}

#nav_print_wrap {height:84px; width:170px; margin:0px 0px 0px 30px;}
a#nav_print {
display:block; width:170px; height:84px; background:url(/images/common/nav_thumb_print.png) no-repeat; text-indent:-9999px; margin:8px 0 0px 0px;
}
a#nav_print:hover {
background:url(/images/common/nav_thumb_print.png) no-repeat 0px -84px;
}
body#bodyprin a#nav_print {
display:block; width:170px; height:84px; background:url(/images/common/nav_thumb_print.png) no-repeat 0px -168px; text-indent:-9999px;;
}


#nav_other_wrap {height:84px; width:170px; margin:0px 0px 0px 30px;}
a#nav_other {
display:block; width:170px; height:84px; background:url(/images/common/nav_thumb_other.png) no-repeat; text-indent:-9999px; margin:8px 0 0px 0px;
}
a#nav_other:hover {
background:url(/images/common/nav_thumb_other.png) no-repeat 0px -84px;
}
body#bodyothe a#nav_other {
display:block; width:170px; height:84px; background:url(/images/common/nav_thumb_other.png) no-repeat 0px -168px; text-indent:-9999px;;
}



#side_title {
width:193px; height:10px; color:#999; margin:0; padding:37px 0 0 35px; font-size:14px; font-weight:lighter; text-transform:uppercase;
}
.side_text {
width:180px; padding:0 0 2px 0px; margin:0 0 25px 25px;
}
.side_text h3 {
color:#333333; margin:0; padding:0; font-size:14px; font-weight:normal; line-height:14px; text-transform:uppercase; vertical-align:bottom; 
}
.side_text h3 a:link, .side_text h3 a:visited {
color:#333333; text-decoration:none;
}
.side_text h3 a:hover {
color:#333333; text-decoration:underline;
}
.side_text p {
margin:0; padding:0; line-height:14px;
}

#current, #current a:link, #current a:visited, #current a:hover {color:#2c2c2c;}


/* MAIN COL */

#page_nav_wrap {
width:640px;  border-bottom: 1px solid #ebebeb; margin:0 0 0 0;  display:table; vertical-align:bottom;
}

#page_nav_wrap_lower {
width:612px;  margin:0 0 0 0; padding-bottom:10px;
}
#current {
color:#333;
}
#home_feature {
margin:34px 0 0 0;
}
#page_title {
float:left; width:550px; height:17px; margin:20px 0 0 0;
}
#page_title h1 {
color:#333; padding:0; margin:0; font-weight:normal; font-size:17px;
}
#page_sub {
float:left; width:550px;  margin:0 0 0 0;
}
.lt_gray {
color:#666666;
}

#arrow_wrap {
float:right; width:49px; height:18px;
}
#arrow_wrap_bot {
float:left; width:17px; height:18px; margin:0 0px 0px 0; 
}
.arrow_box{
float:left; width:17px; height:18px;
}
a#left_arrow {
display:block; float:left; width:18px; height:18px; background:url(/images/common/nav_arrow_l.png) no-repeat; text-indent:-9999px; margin:0 11px 0px 0px;
}
a#left_arrowa:visited {
display:block; float:left; width:18px; height:18px; background:url(/images/common/nav_arrow_l.png) no-repeat; text-indent:-9999px; margin:0 11px 0px 0px;
}
a#left_arrow:hover {
background:url(/images/common/nav_arrow_l.png) no-repeat 0px -18px;
}
a#left_arrow.off {
background:url(/images/common/nav_arrow_l.png) no-repeat 0px -36px;
}
#arrow_div {
float:left; width:1px; height:14px; float:left; background-color:#ebebeb; margin:2px 8px 0 8px;
}
a#right_arrow {
display:block; float:right; width:18px; height:18px; background:url(/images/common/nav_arrow_r.png) no-repeat; text-indent:-9999px; margin:0 0 0px 0px;
}
a#right_arrow a:visited {
display:block; float:right; width:18px; height:18px; background:url(/images/common/nav_arrow_r.png) no-repeat; text-indent:-9999px; margin:0 0 0px 0px;
}
a#right_arrow:hover {
background:url(/images/common/nav_arrow_r.png) no-repeat 0px -18px;
}
a#right_arrow.off {
background:url(/images/common/nav_arrow_r.png) no-repeat 0px -36px;
}
a#up_arrow { 
display:block; width:18px; height:18px; background:url(/images/common/nav_arrow_u.png) no-repeat; text-indent:-9999px; margin:-10px 0 0px 0px;
}
a#up_arrow:hover {
background:url(/images/common/nav_arrow_u.png) no-repeat 0px -18px;
}

#view_link {width:150px; height:18px; float:left; padding:0px; margin:10px 0 0 0px;}

#view_link p {
color:#31c9e9; font-size:11px; padding-left:10px;
}

#view_link p a:link,#view_link p a:visited, #view_link p a:active {
color:#31c9e9;
}

#view_link p a:hover {
color:#31c9e9;
}




a#view_site { float:right; display:block; width:64px; height:11px; background:url(/images/common/view_site.png) no-repeat 0px 0px; text-indent:-9999px; margin:0px 0 10px 0;}
a#view_site:hover { background:url(/images/common/view_site.png) no-repeat 0px -11px; text-indent:-9999px;}



#artwork {
width:640px; margin:20px 0; text-align:center;
}
.artwork_img {
margin-bottom:0px; padding:0;
}
.work_rule 
{width:612px; height:1px; border-bottom: 1px solid #ebebeb; margin:35px 0 35px 0;
}



#flash_module {
width:629px; height:475px; padding:15px 0 0 20px; float:left;
}


div#home_head { float:left; display:block; width:431px; height:45px; background:url(/images/home/headline.png) no-repeat 0px 0px; text-indent:-9999px; margin:25px 0 0 32px;}


#footer {width:950px; padding:0px; margin:0 auto;}
#footer p {text-align:center; font-size:11px; color:#ececec; padding:15px 0 0 0; line-height:100%;}
#footer p a, #footer p a:visited {text-decoration:none; color:#31c9e9;}
#footer p a:hover {text-decoration:underline; color:#31c9e9;}



#error_404_text {margin:49px 0 0 28px; height:476px; width:425px; float:left;}







/* 

OVERLAY STYLES

*/ 



/* the overlayed element */ 
.contact { 
     
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#FFF; 
     
    width:400px;     
    height:500px; 
    border:1px solid #666; 
     

} 
 
/* close button positioned on upper right corner */ 
.contact .close { 
    background-image:url(/images/common/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:28px; 
    width:28px; 
}









/* 

HOME PAGE SLIDES STYLES

*/ 



/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 682px; 
    height:463px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    background-color:#fff; 
}


.home_slide {width:682px; height:440px; text-align:center;}
.home_slide img {border:none;}
.wl {margin-top:100px;}