/* caymans.css */


/** Global **/
/* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/  */

* {
    margin:0;
    padding:0;
}


/* links */
a {
	color: #000;
	text-decoration: none;
}
a:focus, a:hover, a:active {
	color: #999;
}
/** end global **/

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body {
/*	background: #fff7d9; */
/* background color set via javasscript */
	background: #fff;
	font: 1.0em/1.2 verdana, sans-serif;
	font-size:90%;
}


/********
the #outer div is the key element to the flexibility of this design.
By setting maximum and minimum widths in 'em', whilst the width is set in '%', 
we effectively create the perfect combination of 'fluid' and 'elastic' layouts.
Javscript is used to add support for min/max width in IE

Any elements inside #outer that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #outer div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/

#outer {
	position: relative;
    	margin: 0 auto;
	margin-top: 20px;
	width: 958px;
	text-align: left;
	background: transparent;
}

#cent {
	position: relative;
	margin: 0 auto;
	text-align: center;
}

#cent a:link {
	border: 0;
}

#cent img {
	border: solid 1px #ccc;
}

/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */

#content:after, #content_3_slideshow_1_scrollbar:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}

* html# content, * html#content_3_slideshow_1_scrollbar {
	height:1%;
}

.fixclear:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}

/* divs  */

/* home page */

/* content */



/* front page content */

#content {
	position: relative;
	width: 958px;
	height: 512px; 
	background: transparent;
}


#content_1 {
	position: relative;
	float: left;
	width: 158px;
	height: 512px;
	background: transparent url(images/content_1.jpg) top left no-repeat;
}

#content_1 p {
	font-family: verdana, sans-serif;
	font-size: 11px;
	text-align: left;
	margin-right: 5px;
	margin-top: 18px;
	color: #fff;
	margin-left: 10px;
}

#content_1 p a:link {
	color: #133238;
	text-decoration: none;
}

#content_1 p a:visited {
	color: #133238;
	text-decoration: none;
}

#content_1 p a:hover {
	color: #fff;
	text-decoration: none;
}

#content_1 p.top {
	margin-top: 80px;
}

#content_1 p.submenu {
	font-size: 10px;
	margin-top: 6px;
	margin-left: 20px;
}

#content_1 p.subsubmenu {
	font-size: 9px;
	margin-top: 4px;
	margin-left: 30px;
}

#content_1 p.extraspace {
	padding-top: 15px;
}

#content_2 {
	position: relative;
	float: left;
	width: 2px;
	height: 512px;
	background: #fff;
}

#content_3 {
	position: relative;
	float: left;
	width: 550px;
	height: 512px;
	background: transparent url(images/content_3.jpg) top left no-repeat;
}

#content_3_body {
	position: relative;
	margin-top: 89px;
	margin-left: 18px;
	margin-right: 18px;
	color: #fff;
}

#content_3_body img {
	padding-right: 18px;
	padding-bottom: 12px;
	border: 0;
	float: left;
}

#content_3_body p {
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 18px;
	letter-spacing: 0.1em;
	color: #fff;
}

#content_3_body p.left_col {
	width: 200px;
}

#content_3_body h1 {
	font-size: 12px;
	margin-bottom: 18px;
	font_style: normal;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	color: #fff;
}


#content_3_body a:link {
	color: #133238;
}

#content_3_body a:visited {
	color: #133238;
}

#content_3_body a:hover {
	color: #fff;
}

#content_3_body a:active {
	color: #fff;
}

#map {
	position: absolute;
	top: 89px;
	left: 250px;
	width: 282px;
	height: 250px;
}

#content_3_smallbox {
	position: absolute;
	top: 89px;
	left: 18px;
	margin-right: 18px;
	margin-bottom: 18px;
	width: 253px;
	height: 253px;
}

#content_3_slideshow_1 {
	position: absolute;
	top: 63px;
	right: 9px;
	width: 396px;
	height: 406px;
	background: transparent;
}

#content_3_slideshow_1_image {
	position: relative;
	width: 396px;
	height: 350px;
}

#content_3_slideshow_1_scrollbar {
	position: relative;
	width: 396px;
	height: 48px;
	margin-top: 8px;
}

#content_3_slideshow_2 {
	position: absolute;
	top: 63px;
	right: 9px;
	width: 514px;
	height: 406px;
	background: transparent;
}

#content_3_slideshow_2_image {
	position: relative;
	width: 514px;
	height: 350px;
}

#content_3_slideshow_2_scrollbar {
	position: relative;
	width: 514px;
	height: 48px;
	margin-top: 8px;
}

#thFrame {
	position: relative;
	float: left;
	height: 48px;
	width: 350px;
	overflow: hidden;
	white-space: nowrap;
	margin:0;
	padding:0;
}

#arrow_left {
	position: relative;
	float: left;
	height: 48px;
	width: 23px;
border: 0;
}

#arrow_left img {
	border: 0;
}

#arrow_right {
	position: relative;
	float: right;
	height: 48px;
	width: 23px;
border: 0;
}

#arrow_right img {
	border: 0;
}

#slideshow_1_thumb_1 {
	position: relative;
	float: left;
	width: 55px;
	height: 48px;
	margin-left: 7px;
	margin-right: 8px;
background: white;
}

#slideshow_1_thumb_2 {
	position: relative;
	float: left;
	width: 55px;
	height: 48px;
	margin-left: 7px;
	margin-right: 8px;
background: white;
}

#slideshow_1_thumb_3 {
	position: relative;
	float: left;
	width: 55px;
	height: 48px;
	margin-left: 7px;
	margin-right: 8px;
background: white;
}

#slideshow_1_thumb_4 {
	position: relative;
	float: left;
	width: 55px;
	height: 48px;
	margin-left: 7px;
	margin-right: 8px;
background: white;
}

#slideshow_1_thumb_5 {
	position: relative;
	float: left;
	width: 55px;
	height: 48px;
	margin-left: 7px;
	margin-right: 8px;
background: white;
}

#content_4 {
	position: relative;
	float: left;
	width: 2px;
	height: 512px;
	background: #fff;
}

#content_5 {
	position: relative;
	float: left;
	width: 212px;
	height: 512px;
	background: transparent url(images/whatsnew_img.jpg) top left no-repeat;
}

#whatsnew {
	position: absolute;
	top: 433px;
/*	left: 19px; */
left: 16px;
	width: 178px;
	height: 62px;
}

#navlink1a {
position: absolute;
top: 0;
left: 0;
	margin: 0;
	padding: 0;
	border: 0;
    	width: 178px;
	height: 62px;
    	background:url(images/whatsnew_over.jpg) no-repeat;
	}


#navlink1b {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	width: 178px;
	height: 62px;
    	background:url(images/whatsnew_btn.jpg) no-repeat;
	}	


a#navlink1b:hover {
    	background:url(images/whatsnew_over.jpg) no-repeat;
	}

.alt	{
	display: none;
}


#content_6 {
	position: relative;
	float: left;
	width: 2px;
	height: 512px;
	background: #fff;
}

#content_7 {
	position: relative;
	float: left;
	width: 32px;
	height: 512px;
	background: transparent url(images/content_7.jpg) top left no-repeat;
}



#footer {
	position: relative;
	width: 958px;
	height: 25px;
	background-color: #fff;
}

#footer img {
	border: 0;
}


form {
	font-family: verdana, sans-serif;
	font-size: 12px;
	color: #fff;
}




/* form row display */

div.form_row {
        clear: both;
	font-size: 11px;
	width: 450px;
	margin-top: 12px;
}

div.form_row span.label {
        float: left;
        width: 150px;
        text-align: right;
}

div.form_row span.data {
        float: right;
        width: 290px;
        text-align: left;
}

div.form_row select {
	font-size: 1.0em;
}

div.form_row input {
	font-size: 11px;
}




/* join form row display */


div.join_form_row {
        clear: both;
	font-size: 10px;
	width: 535px;
#	margin-top: 5px;
margin: 0;
padding: 0;
	margin-top: 4px;
}

div.join_form_row span.label {
        float: left;
        width: 135px;
        text-align: right;
}

div.join_form_row span.data {
        float: left;
	margin-left: 10px;
        width: 180px;
        text-align: left;
}

div.join_form_row span.brands {
        float: right;
        width: 195px;
        text-align: left;
}

div.join_form_row select {
	font-size: 1.0em;
}

div.join_form_row input {
	font-size: 10px;
}

#join_response {
	margin-top: 20px;
}

#contact_response {
	margin-top: 20px;
}

#picDesc {
	position: absolute;
	top: 65px;
	left: 9px;
	width: 122px;
	height: 350px;
color: #133238;
font-size: 12px;
}

#picDescData {
	position: relative;
	float: left;
	width: 110px;
	height: 320px;
	margin-top: 8px;
	font-size: 11px;
}


#picDescScroll {
	position: relative;
	float: left;
	width: 110px;
	height: 320px;
	margin-top: 8px;
overflow: hidden;
}

#thumbScroll {
	width: 4px;
	float: right;
	margin-top: 8px;
height: 325px;
overflow: hidden;
background-color: #999;
}

#thumb {
	position: relative;
	height: 125px;
	width: 4px;
	background-color: #fff;
}


#picDesc p {
	font-size: 10px;
	color: #fff;
	line-height: 16px;
	letter-spacing: 0.1em;
	margin-bottom: 8px;;
	line-height: 11px;
}

#picDesc h1 {
	font-size: 10px;
	font-weight: normal;
	color: #fff;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#picDesc h2 {
	font-size: 10px;
	font-weight: normal;
	color: #133238;
	line-height: 16px;
	letter-spacing: 0.1em;
}

#picDesc ol {
	font-size: 10px;
	color: #133238;
	line-height: 16px;
	letter-spacing: 0.05em;
	margin-top: 0;
}

#picDesc ul {
	font-size: 10px;
	color: #133238;
	line-height: 16px;
	letter-spacing: 0.05em;
	margin-top: 0;
}

#picDesc li {
	list-style-position: inside;
}



#image_tool_tip {
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	width: 200px;
	font-size: 11px;
	color: #fff;
}

#scrollcontent a:link {
	color: #133238;
}

#scrollcontent a:visited {
	color: #133238;
}

#scrollcontent a:hover {
	color: #fff;
}

#scrollcontent a:active {
	color: #fff;
}


#brandcontent {
	position: absolute;
	top: 40px;;
	left: 143px;
	color: #fff;
	font-size: 14px;
	text-align: left;
}


#designercontent {
	position: absolute;
	top: 44px;;
	left: 425px;
	color: #fff;
	font-size: 14px;
	text-align: left;
	font-size: 11px;
}


#designercontent a:link {
	color: #133238;
}

#designercontent a:visited {
	color: #133238;
}

#designercontent a:hover {
	color: #fff;
}

#designercontent a:active {
	color: #fff;
}

/* fleXcroll css */

/* .scrollgeneric is required for proper scrollbar display,
not for user customization, and is mandatory*/
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
.vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
/* width: 15px; */
width: 8px;
background-color: white;
}

.vscrollerbar {
/* width: 15px; */
width: 8px;
background-color: black;
}

.hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
background-color: white;
}

.hscrollerbar {
height: 15px;
background-color: black;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */


/* styles for scrollbar images start here */

.hscrollerbar {
/* Main body of horizontal scrollbar */
background: #99CBCB url(horizontalbarbody_cornerjog.png) 0px -30px repeat-x;
}

.vscrollerbar {
/* Main body of vertical scrollbar */
/* background: #99CBCB url(basebarcaps_verticalbarbody.png) -15px 0px repeat-y; */
background: #ffffff url(basebarcaps_verticalbarbody.png) -5px 0px repeat-y;
/* color of scrollbar */
}

.vscrollerbar, .hscrollerbar {
/*padding information of these elements are only used for
padding of the scroll-bar with respect to the scroll-base,
the padding will automatically be turned off by the script
The greater the padding, the further away the scrollbar
stops away from both ends. This may be used, for example,
to provide space for our "faux" arrow heads.
*/
padding: 15px;

/* z-index for scrollbars define the z-index for the content, if left at
"auto" or "0", they are set to "2", if defined, content z-index is set the
same as the scrollbars. Version 1.7.5 and higher does not need this setting
to function properly, earlier versions need this for proper operation */
z-index: 2;
}

.vscrollerbarbeg {
/* Top image holder for vertical scrollbar*/
background: url(basebarcaps_verticalbarbody.png) -45px -30px no-repeat;
width: 8px;
/* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
height: 15px !important;
}

.vscrollerbarend {
/* Bottom image holder for vertical scrollbar*/
background: url(basebarcaps_verticalbarbody.png) -45px 0px no-repeat;
width: 8px;
height: 15px;
}

.hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url(basebarcaps_verticalbarbody.png) -60px -15px no-repeat;
height: 15px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

.hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url(basebarcaps_verticalbarbody.png) -30px -15px no-repeat;
height: 15px;
width: 15px;
}

.scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
background: #4E727C url(horizontalbarbody_cornerjog.png) 0px 0px;
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}


/* Following are for scrollbase images, may not always be required */

.vscrollerbase {
/* Vertical scrollbar's base body */ 
/* orig background: #D7EBDF url(basebarcaps_verticalbarbody.png) 0px 0px repeat-y; */
background: #888888;
/* color of the scroll bar background */
}

.vscrollerbasebeg {
/* Vertical scrollbar's base top-cap */
/* This may be used for holding the up arrow */
/* background: url(basebarcaps_verticalbarbody.png) -30px -30px no-repeat; */
/* width: 15px;*/
background: url(images/scroll_cap_top.jpg) 0px 0px no-repeat;
width: 8px;
/* height of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
/* height: 15px !important; */  
/*  Safari BG repeat fix */
height : 12px !important;
}

.vscrollerbaseend {
/* Vertical scrollbar's base bottom-cap */
/* This may be used for holding the down arrow */
/* background: url(basebarcaps_verticalbarbody.png) -60px -30px no-repeat; */
/* height: 15px; */
/* width: 15px; */
background: url(images/scroll_cap_bottom.jpg) 0px 0px no-repeat;
height: 12px;
width: 8px;
}

.hscrollerbase {
/* Horziontal scrollbar's base body */ 
background: #D7EBDF url(horizontalbarbody_cornerjog.png) 0px -15px repeat-x;
}

.hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url(basebarcaps_verticalbarbody.png) -60px 0px no-repeat;
height: 15px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

.hscrollerbaseend {
/* Horizontal scrollbar's right-cap */
/* This may be used for holding the right arrow */
height: 15px;
width: 15px;
background: url(basebarcaps_verticalbarbody.png) -30px 0px no-repeat;
}

.scrollerjogbox:hover {
background: #5E828C url(basebarcaps_verticalbarbody.png) -45px -15px;
}

/* Scroll Bar Master Styling Ends Here */

#mycustomscroll {
/* Typical fixed height and fixed width example */
/* width: 300px; */
/* height: 250px; */
/* overflow: auto; */
/* IE overflow fix, position must be relative or absolute*/
/* position: relative; */
/* background-color: #E7EADE; */
/* margin: 0.3em auto; */
/* padding: 15px; */
/* text-align: left; */
	
position: relative;
width: 122px;
height: 329px;
overflow: auto;
margin-top: 3px;
} 

#mycustomscroll a:link {
	color: #133238;
}

#mycustomscroll a:visited {
	color: #133238;
}

#mycustomscroll a:hover {
	color: #fff;
}

#mycustomscroll a:active {
	color: #fff;
}