@charset "UTF-8";

/* CSS Document */
/*-------------AUTOCOMPLETE------------------------------------------------------------------------------------------*/

/* styles for this implementation */

#autocomplete {
	float:right;
	width: 131px;
	height:65px;
	background: url(http://www.ofs.com/images/search/search_box_bg.gif);
	z-index:9049;
}

/* styles for entire widget */
.yui-ac {
    position:relative;font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* styles for results container */
.yui-ac-container {
	clear:both;
	width:328px; position: absolute; top: 52px; right: 6px;
}

/* styles for header/body/footer wrapper within container */
.yui-ac-content {
    position:absolute;width:100%;border:4px solid #e0e0e0;background:#fbfbfb;overflow:hidden;z-index:9050;
}

/* styles for container shadow */
.yui-ac-shadow {
	position:absolute; left:-3px; top:-3px; padding-right:6px; padding-bottom:6px; width:100%;background:#000;-moz-opacity: 0.07;opacity:.07;filter:alpha(opacity=7);z-index:9049; 
}

#resultHeader {
	height: 15px;
	width: 333px;
	font-weight: bold;
	font-size: 12px;
	color: #a2c1cd;
}

#ysearchresult #resultCopy {
	float:right;
	width: 240px;
}

#ysearchresult #resultImage {
	float:left;
	display:block;
	padding-right:10px;
}

#ysearchresult .title{
	font-weight: bold;
	font-size: 11px;
	color: #a0c5db;
	display:block;
}

#ysearchresult .desc{
	font-size: 9px;
	color: #525759;
	line-height:13px;
	display:block;
}

/* styles for results list */
.yui-ac-content ul{
    margin:0;padding:0;width:100%;
}

/* styles for result item */
.yui-ac-content li {
	height:auto;
	margin:0;padding:5px 5px;cursor:pointer;
}

/* styles for prehighlighted result item */
.yui-ac-content li.yui-ac-prehighlight {
    background:#a2c1cd;
}

/* styles for highlighted result item */
.yui-ac-content li.yui-ac-highlight {
    background:#f1f1f1;color:#FFF;
}

#autocomplete #search_form {
	float:right;
	width:131px;
}

#autocomplete #s {
	float: left;
	margin: 27px 0 0 8px;
	border: 0;
	width: 97px;
	background: none;
	font-size:12px;
	color:#525759;
}

#autocomplete #go {
	float: left;
	margin: 26px 0 0 5px;
}

/*-------------BASE--------------------------------------------------------------------------------------------------------------*/

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }

*:focus { outline: none; }

*::-moz-focus-inner { border: none; }


/* LAYOUT */
.clear { clear:both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }

/***** Page Title *****/
#main #pageTitle {
	width:937px;
	padding-left:25px;
	padding-top:25px;
	padding-bottom:20px;
	height:20px;
	/*background-color:#00FF00;*/
}
#main #pageTitle #title { float:left; height:20px; /*background-color:#FF0000;*/ width:352px; color:#a2c1cd; font-size: 19px; font-weight:normal; text-decoration:none; }
#main #pageTitle #bread { float:right; height:20px; /*background-color:#FF00FF;*/ width:585px; color:#a2c1cd; font-size: 12px; text-align:right;}

#main #pageTitle a {
	color:#a2c1cd; text-decoration:none;
}
#main #pageTitle a:hover {
	color:#525759; text-decoration:none;
}

#copy a {
	color:#a2c1cd; text-decoration:none;
}
#copy a:hover {
	color:#a2c1cd; text-decoration:underline;
}

#moreStuff  {
	font-size: 10px; color:#525759;clear:left; padding:20px 0 0 50px;
}
#moreStuff a {
	font-size: 10px; color:#525759; text-decoration:none;
}
#moreStuff a:hover {
	color:#a2c1cd; text-decoration:none;
}

#tooltip {
	color: #fff;
	width: 200px;
	border-color: #e0e0e0;
	border-width: 1px;
	border-style:solid;
	background: url(http://www.ofs.com/images/nav/bubble.png);
}
 
.tool-title {
	font-weight: bold;
	font-size: 12px;
	color: #a0c5db;
	padding: 10px 10px 4px;
	display:block;
}
 
.tool-text {
	font-size: 9px;
	color: #525759;
	line-height:15px;
	padding: 0px 8px 8px;
	display:block;
}

/*Button*/
.buttonSubmit{width:69px; height:26px; color:#FFF; font-weight:bold; padding:2px 5px; background:url(http://www.ofs.com/includes/refer/button.gif) no-repeat left top; cursor:pointer; border:none;
}

button:hover, input[type='button']:hover { background-position:left bottom; }

/* Breadcrumbs */
#breadcrumbs { float:left; font-size: 10px; color: #444; height: 34px; line-height: 34px; text-shadow: 2px 2px 1px #fff; }
#breadcrumbs a { color: #444; text-decoration: none; float: left; padding: 0 10px; position: relative; margin-left: -10px; _cursor: hand; }
#breadcrumbs a:hover { color: #a2c1cd; text-decoration: none !important; }
#breadcrumbs a.home { margin: 0; width: 15px; height: 0; padding-top: 34px; overflow: hidden; background: url(http://www.ofs.com/images/nav/breadlogo.gif) no-repeat;}
#breadcrumbs span { float: left; width: 9px; margin: 0 10px 0 0; position: relative; height: 0; padding-top: 34px; margin-top: 0px; overflow: hidden; background: url(http://www.ofs.com/images/nav/breadcrumb_sep.png) no-repeat; behavior: url(http://www.ofs.com/images/nav/iepngfix.htc);}
#breadcrumbs .nolink {float:left; padding: 0 10px; position: relative; margin-left: -10px;}

.iframeTooltip
{
	position: absolute;
	z-index: 100;
	filter:alpha(opacity:0.1);
}

/* TYPE */
body {
	font: 12px/18px "Verdana", Geneva, Arial, Verdana, sans-serif;
	background-color:#525759;
	color:#414547;
}
a { color: #2971a7; }
strong, b { font-weight:bold; }
.sosumi { font-size: 10px !important; color:#76797c; }

/* GLOBAL FOOTER */
/* sosumi */
#main ol.sosumi, #main ul.sosumi, #main p.sosumi { padding-top:2em; margin-bottom:-1em; line-height:1.4em; }

/*------------CAROUSEL-----------------------------------------------------------------------------------------------------*/

/**
 * Standard Configuration. It is advised that this section NOT be modified as the
 * carousel.js expects the behavior outlined below.
 **/
.carousel-component { 
	position:relative;
	overflow:hidden;   /* causes the clipping */
	display:none; /* component turns it on when first item is rendered */
	left:-20px;
	top:3px;
}
				
.carousel-component ul.carousel-list { 
	width:10000000px;
	position:relative;
	z-index:1; 
}

.carousel-component .carousel-list li { 
	float:left;
	list-style:none;
	overflow:hidden;
	
    
}

/**
 * VERTICAL CAROUSEL DEFAULTS
 **/
.carousel-component .carousel-vertical li { 
	margin-bottom:0px;

	/* Fix for extra spacing in IE */
	float:left;
    clear:left;  
	
	/* Force the LI to respect the HEIGHT specified */
	overflow:hidden;
	display:block;
}

/* For vertical carousel, not set, width defaults to auto */
/* Note if you explicitly set width to auto, this might cause */
/* problems with Safari... as in up/down button not working in some examples. */	 
.carousel-component ul.carousel-vertical {
/*	width:auto;*/
}

.carousel-component .carousel-clip-region { 
	overflow:hidden; /* Secret to the clipping */
	margin:0px auto;
	position:relative; 
}
.carousel-component { 
    padding:0px;
    margin:0px;
}

.carousel-component .carousel-list li { 
    margin-right:7px;
    width:107px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) + 
                   img.border-left (1) + img.border-right (1)*/
    height:88px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
    /*    margin-left: auto;*/ /* for testing IE auto issue */
}

.carousel-component .carousel-list li a { 
    display:block;
    border:1px solid #e0e0e0;
    outline:none;
}

.carousel-component .carousel-list li a:hover { 
    border: 1px solid #bdbdbd; 
}

.carousel-component .carousel-list li img { 
    border:none;
    display:block; 
}
                                
.carousel-component .carousel-prev { 
    position:absolute;
    z-index:3;
    cursor:pointer; 
    left:8px; 
	top:29px;
}

.carousel-component .carousel-next { 
    position:absolute;
    z-index:3;
    cursor:pointer; 
    right:15px;
	top:29px; 
}

/*------------HIGHSLIDE---------------------------------------------------------------------------------------------------*/

.highslide {
	/*cursor: url(http://www.ofs.com/ofsmock/highslide/graphics/zoomin.cur), pointer;*/
    outline: none;
}
.highslide-active-anchor img {
	visibility: hidden;
}
.highslide-html {
    background-color: #a2c1cd;
	color:#fff;
	border: 2px solid white;
	text-align:center;
}
.highslide-html-blur {
}
.highslide-html-content {
	position: absolute;
    display: none;
}
.highslide-html-content {
    width: 405px;
    padding: 10px;
}
.highslide-html-content a {
	color:#fff;
	text-decoration:none;
}
.highslide-html-content a:hover {
	text-decoration:underline;
}

.highslide-wrapper {
	background: white;
}
.highslide-image {
	border: 4px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
	text-align:center;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: #fff;
	color:#525759;
	font-family:Arial, Helvetica, sans-serif;
}
.highslide-loading {
    display: block;
	width:105px;
	height:79px;
    background-color: white;
    background-image: url(http://www.ofs.com/highslide/graphics/ajax-loader.gif);
    background-repeat: no-repeat;
	background-position:center;
}

a.highslide-full-expand {
	background: url(http://www.ofs.com/highslide/graphics/fullexpand.gif) no-repeat;
	display: block;
	margin: 0 10px 10px 0;
	width: 34px;
	height: 34px;
}
.highslide-move {
    cursor: pointer;
}

.highslide-overlay {
	display: none;
}

/* Controlbar example */
.controlbar {	
	background: url(http://www.ofs.com/highslide/graphics/controlbarnew.gif);
	width: 96px;
	height: 30px;
}
.controlbar a {	
	display: block;
	float: left;
	/*margin: 0px 0 0 4px;*/	
	height: 30px;
}
.controlbar a:hover {
	background-image: url(http://www.ofs.com/highslide/graphics/controlbarnew-hover.gif);
}
.controlbar .print {
	width: 32px;
}
.controlbar .highslide-move {
	width: 32px;
	background-position: -32px 0;
}
.controlbar .close {
	width: 32px;
	background-position: -64px 0;
}

/* These must always be last */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

/*-----------------------------LAYOUT---------------------------------------------------------------------------------------------*/
/* MAIN LAYOUT */

/*-------------Navigation-------------------*/

#headerWrapper{
	width: 100%;
}

#headerCenter{
	width: 960px;
	height:65px;
	margin: 0 auto;
}
#headerLogo{
	float: left;
	width: 45px;
	height:65px;
}

/*-----End Header----------*/
#mainWrapper {
	clear:both;
	width: 100%;
	min-width:964px;
	background-color: #fff;
	padding-bottom:20px;
}

#main {
	width: 960px;
	margin: 0 auto;
}

#content {
	width: 960px;
	border: 1px solid #e0e0e0;
}

#filterControls{
	width: 915px;
	margin: 15px 0 0 25px;
	height:20px;
}
/*----------End Main--------------------------*/

#bread {
	clear:both;
	width: 960px;
	height:34px;
	border: 1px solid #e0e0e0;
	margin-top:20px;
}

/*------- Footer--------------------------------------------------*/ 

#footerWrapper {
	clear:both;
	width:960px;
	height:100px;
    margin: 0 auto;
	padding-top:15px;
	font-size: 10px !important; color:#fff;
	/*background-color:#FF0000;*/
}
#footerLeft {
	float: left;
	width:260px;
}
#footerCenter {
	float: left;
	width:380px;
}
#footerRight {
	float: left;
	width:320px;
	text-align:right;
}

/* links */
#footerWrapper a { color:#a2c1cd; text-decoration:none; }
#footerWrapper a:hover { text-decoration:underline; }

/*----------------------------NAV-----------------------------------------------------------------------------------------------*/
#nav-example {
    background:url("http://www.ofs.com/images/nav/navmain.gif") no-repeat;
    width:784px;
    height:65px;
    margin:0;
    padding:0;
    }
	
    #nav-example.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

    #nav-example span {
    display: none;
    }

    #nav-example li, #nav-example a {
    height:65px;
    display:block;
    }

    #nav-example li {
    float:left;
    list-style:none;
    display:inline;
    }
	
    #nav-example-01 {width: 112px;}
    #nav-example-02 {width: 128px;}
    #nav-example-03 {width: 135px;}
    #nav-example-04 {width: 162px;}
	#nav-example-05 {width: 101px;}
	#nav-example-06 {width: 146px;}
			
    #nav-example-01:hover, #nav-example-01 a:hover {background:url("http://www.ofs.com/images/nav/navmain.gif") 0px -65px no-repeat; }
    #nav-example-02:hover, #nav-example-02 a:hover {background:url("http://www.ofs.com/images/nav/navmain.gif") -112px -65px no-repeat; }
    #nav-example-03:hover, #nav-example-03 a:hover {background:url("http://www.ofs.com/images/nav/navmain.gif") -240px -65px no-repeat; }
    #nav-example-04:hover, #nav-example-04 a:hover {background:url("http://www.ofs.com/images/nav/navmain.gif") -375px -65px no-repeat; }
	#nav-example-05:hover, #nav-example-05 a:hover {background:url("http://www.ofs.com/images/nav/navmain.gif") -537px -65px no-repeat; }
	#nav-example-06:hover, #nav-example-06 a:hover {background:url("http://www.ofs.com/images/nav/navmain.gif") -638px -65px no-repeat; }



/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#nav-example.menu2 a:hover {visibility:visible; position:relative; z-index:8001;}

#nav-example.menu2 li:hover {position:relative; z-index:8001;}


/* keep the 'next' level invisible by placing it off screen. */

#nav-example.menu2 ul, 

#nav-example.menu2 :hover ul ul, 

#nav-example.menu2 :hover ul :hover ul ul,

#nav-example.menu2 :hover ul :hover ul :hover ul ul,

#nav-example.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0;z-index:8001; list-style:none;}



#nav-example.menu2 :hover ul.sub {left:0; top:65px; white-space:nowrap; width:198px; height:auto; z-index:8001; background: url(http://www.ofs.com/images/nav/bubble.png); border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
}
#nav-example.menu2 :hover ul.sub li {display:block; height:25px; float:left; width:198px; font-weight:normal; z-index:8001; }
#nav-example.menu2 :hover ul.sub li.new {display:block; height:25px; float:left; width:198px; font-weight:normal; background: url(http://www.ofs.com/images/nav/submidtest-new.gif) no-repeat;}


#nav-example.menu2 :hover ul.sub li a {display:block; position:relative; font-size:11px; height:25px; width:198px; line-height:25px; text-indent:17px; color:#545454; text-decoration:none;background:url(http://www.ofs.com/images/nav/trans.gif);z-index:8001;	outline:none;}
#nav-example.menu2 :hover ul.sub li a:hover {color:#fff; background:url(http://www.ofs.com/images/nav/insidehover.gif);}
#nav-example.menu2 :hover ul.sub :hover > a {color:#fff; background:url(http://www.ofs.com/images/nav/insidehover.gif);}
#nav-example.menu2 :hover ul.sub li.new a:hover {color:#fff; background:url(http://www.ofs.com/images/nav/insidehover-new.gif);}


#nav-example.menu2 :hover ul :hover ul,

#nav-example.menu2 :hover ul :hover ul :hover ul,

#nav-example.menu2 :hover ul :hover ul :hover ul :hover ul,

#nav-example.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul

{left:200px; top:0; white-space:nowrap; width:198px; z-index:8001; height:auto;}


#nav-example.menu2 :hover ul.sub li.subtop,

#nav-example.menu2 :hover ul :hover ul li.subtop,

#nav-example.menu2 :hover ul :hover ul :hover ul li.subtop,

#nav-example.menu2 :hover ul :hover ul :hover ul :hover ul li.subtop

{padding-top:7px;}


#nav-example.menu2 :hover ul.sub li.subbot,

#nav-example.menu2 :hover ul :hover ul li.subbot,

#nav-example.menu2 :hover ul :hover ul :hover ul li.subbot,

#nav-example.menu2 :hover ul :hover ul :hover ul :hover ul li.subbot

{padding-bottom:7px;}

/*---------------PREVIEW & FINISHES TOOLTIP---------------------------------------------*/
.finishes a { 
    border:1px solid #e0e0e0;
    outline:none;
	display:block;
}

.finishes a:hover { 
    border: 1px solid #bdbdbd; 
}
.finishes img{
	border:none;
	display:block;
}
#screenshot{
	position:absolute;
	background:#a2c1cd;
	padding:3px;
	display:none;
	color:#fff;
	text-align:center;
	font-size:10px;
	font-weight:bold;
}