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



#html {position:relative; padding:0; margin:0; background:url(../images/bkg-html.jpg) top left repeat-x; width:100%; min-height:600px}
#body {position:relative; padding:0; margin:0; background:url(../images/bkg-body.png) top left repeat-x; width:100%; min-height:600px; z-index:3}

#header {position:relative; width:930px; height:171px; top:0; left:50%; margin-left:-465px; background:url(../images/header-bg.png) bottom left no-repeat}
#logo {position:absolute; width:358px; height:171px; top:0; left:50%; margin-left:-179px; background:url(../images/so-logo.png) no-repeat}

#banner-holder {position:relative; width:930px; height:65px; left:50%; margin-left:-465px; background:url(../images/banner-gradient.png) no-repeat; margin-bottom:21px; z-index:99}
#banner {position:absolute; width:914px; height:129px; top:10px; left:50%; margin-left:-457px; z-index:10}
#banner div {position:relative; width:914px; height:129px;}

#banner div #title {position:absolute; top:66px; left:18px; width:auto; height:auto; z-index:11}

#contentContainer {position:relative; float:left; top:0; left:0; width:100%; height:100%;; background:url(../images/content-main.png) bottom left repeat-x}

#content-holder {position:relative; top:0; left:50%; margin-left:-473px; width:946px;height:100%; background:url(../images/content-top.png) top left no-repeat; padding:78px 0 0 0; z-index:3;}
#content {float:left; width:846px; padding:80px 50px 30px 50px; background:url(../images/content-bg.png) 0 0 repeat-y; min-height:300px}


#foot {position:relative; top:0px; left:0; width:100%; float:left; height:136px; background:url(../images/footer-bg.png);}
#footer {width:886px; height:56px; position:relative; top:0; left:50%; margin-left:-473px; padding:40px 30px; background:url(../images/footer.png) no-repeat; color:#fff; font-size:9px}

#aboutPic {float:right; width:305px; height:337px; background:url(../images/coolersGroup.jpg) no-repeat;}
#text {width:500px; float:left}
#text2 {width:846px; float:left}

#illustration {float:right; width:305px; margin-top:60px;}

#content-hdr {position:absolute; top:68px; left:50px; width:760px; height:52px; padding:28px 0 0 86px; background:url(../images/hdr.png) no-repeat; color:#fff; font-size:16px}

#backtotop {float:right; margin-top:5px;}

.hidden-pic {display:none}


/* Manual/FAQ page */

	ul.faq {list-style:none; padding:0; margin:20px 0 0 0}
	ul.faq li {padding:20px 10px; margin-bottom:5px; border-bottom:4px solid #1b5680; line-height:16px; background:url(../images/faq-bg.png) bottom left repeat-x}
	ul.faq li ul {margin-top:10px;}
	ul.faq li ul li {border:none; margin:0; padding:0; line-height:16px; background:none}
	
	.module {position:relative; float:left; width:418px; height:72px; margin:0 10px 20px 0; background:url(../images/manual-module.png) no-repeat;}
	.module.end {position:relative; float:left; width:418px; height:72px; margin:0 0 20px 0; background:url(../images/manual-module.png) no-repeat;}
	
	.download {position:absolute; left:10px; top:12px; width:158px; height:48px; background:url(../images/manual-dwnld.png) 0 0;}
	.download a {width:158px; height:48px; display:block; background:url(../images/manual-dwnld.png) 0 0; cursor:pointer;}
	.download a:hover {background:url(../images/manual-dwnld.png) 0 -48px}
	.download span {display:none}
	
	.no-download {position:absolute; left:0; top:0; width:158px; height:48px; background:url(../images/NOmanual-dwnld.png) 0 0; z-index:10}
	
	.module .product-name {position:absolute; left:178px; top:25px; font-size:16px; color:#1b5680;}


/* Contact Page & Contact Form styles */
	#map {width:210px; height:181px; float:right}
	
	div.mapPop {position:relative; width:560px; height:589px; background:url(../images/mapPop.png) no-repeat; padding:28px; display:none}
	div.mapPop div.close {position:absolute; left:440px; top:578px}

	#contacthead {color:#1b5680; font-weight:bold; font-size:16px}
	.column1 {width:240px; float:left; padding:0 0 0 10px; margin-top:9px; line-height:16px}
	.column2 {width:240px; float:right; padding:0 10px 0 30px; margin-top:9px; line-height:16px}
	
	form {margin:0; padding:0}
	.form-head {position:relative; width:803px; padding:0 0px 10px 0; border-bottom:1px solid #666; float:left; margin-bottom:25px; font-size:14px; font-weight:bold; color:#666}
	
	.row {position:relative; width:803px; float:left; margin-bottom:8px}
	.row-end {position:relative; width:803px; float:left; margin-bottom:8px}
	.row-end2 {position:relative; width:803px; float:left; margin-bottom:25px}
	.label-short {width:134px; font-family:Arial; font-size:12px; padding-right:10px; margin-top:9px; text-align:right; float:left}
	.label-long1 {width:332px; font-family:Arial; font-size:12px; padding-right:10px; margin-top:9px; text-align:right; float:left}
	.label-long2 {width:332px; font-family:Arial; font-size:12px; padding-right:10px; margin-top:4px; text-align:right; float:left}
	.label-long {width:222px; font-family:Arial; font-size:12px; padding-right:10px; margin-top:9px; text-align:right; float:left}
	
	.field-1 {width:230px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield1.png) no-repeat; border:none; margin-right:px}
	.field-2 {width:142px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield2.png) no-repeat; border:none; margin-right:px}
	.field-3 {width:628px; height:83px; padding:9px 10px 0 10px; float:left; background:url(../images/textarea.png) no-repeat; border:none}
	.field-4 {width:628px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield3.png) no-repeat; border:none}
	.select {width:250px; height:34px; padding:5px 7px 7px 10px; float:left; background:url(../images/textfield1.png) #fff no-repeat; border:none; display:block}
	
	.formerror input {width:230px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield1-error.png) no-repeat; border:none; margin-right:px}
	.formerror-2 input {width:142px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield2-error.png) no-repeat; border:none; margin-right:px}
	.formerror-3 textarea {width:628px; height:83px; padding:9px 10px 0 10px; float:left; background:url(../images/textarea-error.png) no-repeat; border:none}
	.formerror-4 input {width:628px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield3-error.png) no-repeat; border:none}
	.formerror select {width:230px; height:25px; padding:9px 10px 0 10px; float:left; background:url(../images/textfield1-error.png) no-repeat; border:none; margin-right:px}
	
	.checkbox {margin-right:15px; width:15px; height:15px; float:left; display:block}
	.checkbox-label {width:px; height:27px; padding-top:7px; margin:9px 0px 0 5px; color:#fff;}
	.row-end #main-menu #mm-1 ul li {float:left; width:215px;}
	.row-end #main-menu #mm-1 ul li a {float:left;}
	
	#controls {width:798px; padding-right:25px; text-align:right}
	
	a input.submit {background:url(../images/submit.png) no-repeat; color:#fff; width:102px; height:36px; padding:0 15px 4px 0; border:none; font-size:12px; font-weight:bold;} 
	a:hover input.submit {background: url(../images/submit.png) 0 -36px no-repeat; color:#fff; width:102px; height:36px; padding:0 15px 4px 0; border:none;}
	
	a input.clear {background: url(../images/clear.png) no-repeat; color:#fff; width:102px; height:36px; margin-right:0px; padding:0 15px 4px 0; border:none; font-size:12px; font-weight:bold;} 
	a:hover input.clear {background: url(../images/clear.png) 0 -36px; color:#fff; width:102px; height:36px; padding:0 15px 4px 0; border:none}


 /* -- checkbox dropdowns -- */
  	.row-end .slideDown                { height: 180px !important; }
  	.row-end #main-menu                { position: relative; overflow: hidden; width:657px; height: 100%; text-align: center; }
  	.row-end #main-menu ul			 {list-style:none; margin:0; padding:0}
  	.row-end #main-menu li             { overflow: hidden; width: 208px; min-height: 34px; float: left; padding-bottom: 0; margin-right: 12px; background: #1b5680}
  	* html .row-end #main-menu li      { height: 34px; }
  	.row-end #main-menu li a           { display: block; height: 30px; font-size: 14px; padding:15px 0 0 0; color: #c1f3f4; text-decoration: none; }
  	.row-end #main-menu li a:hover     { text-decoration: none !important; color: #aeff00; }
  	.row-end #main-menu li .count      { color: #57686c; }
  	.row-end #main-menu li strong.fl   { font-weight: normal; }
  	.row-end #main-menu ul .overlay_0    { position: absolute; width: 657px; height: 123px; top: 50px; z-index: 10; background: #1b5680 }
  	.row-end #main-menu ul .menu       { padding: 0px 15px 0 30px; overflow: hidden; height: 100%; }

    /* Active item, overlay */
    .row-end #main-menu li.active,
    .row-end #main-menu li.active_js             { overflow: visible; }
    .row-end #main-menu li.active a,
    .row-end #main-menu li.active_js a           { color: #aeff00; }
    .row-end #main-menu ul .active_js .menu      { background: #1b5680}
    .row-end #main-menu ul .active .menu         { height: 128px; background: #1b5680}
    * html .row #main-menu ul .active .menu  { height: 136px }
    .row-end #main-menu ul .active .overlay_0      { width: 657px; }
    .row-end #main-menu ul .active .overlay_1,
    .row-end #main-menu ul .active .overlay_2    { width: 220px; }
    .row-end #main-menu li                       {  }
    .row-end #main-menu ul .menu                 { height: 0px; }
    .row-end #main-menu ul .overlay_0              { width: 0; }

    /* Submenu */
    .row-end #main-menu ul .menu ul          { display:none; }
    .row-end #main-menu ul .active .menu ul  { display: block; }
    .row-end #main-menu ul li ul             {  }
    .row-end #main-menu ul li li             { background: none; width: 100%; height: auto; padding: 0; min-height: 10px; float: left; clear: both; margin: 0 0 2px; }
    .row-end #main-menu ul li li a           { display: block; padding: 2px 0; height: auto; font-size: 1em; color: #fff !important; background: none; }
    .row-end #main-menu ul li li.active      { height: auto; }
    .row-end #main-menu ul li li a:hover,
    .row-end #main-menu ul li li.active a    { color: #aeff00 !important; text-decoration: none !important; }

    /* Overlay */
    .row-end #main-menu #mm-1 .overlay_0     { left: 208px !important; }
    .row-end #main-menu #mm-3              { margin: 0; }
    .row-end #main-menu #mm-3 .overlay_0     { right: 217px !important; background-position: 0 0 !important; }
    .row-end #main-menu #mm-2 .overlay_1   { position: absolute; background: #1b5680; height: 123px; top: 50px; left: 428px !important; z-index: 100; }
    .row-end #main-menu #mm-2 .overlay_2   { position: absolute; background: #1b5680; height: 123px; top: 50px; right: 437px !important; z-index: 100; }

    /* Cols */
    .row-end #main-menu .col1        { position:absolute; top:90px; left:15px; z-index:999; width: 618px; float:left; text-align:left }
    .row-end #main-menu .col2        { width: 42%; float: right; }
    .row-end #main-menu #mm-3 .col1  { width: 49% !important; }
    .row-end #main-menu #mm-3 .col2  { width: 49% !important; }

    /* Player */
    .player                                       { float: left; padding: 50px 30px; }
    .player .pause                                { width: 29px !important; height: 23px !important; padding: 0 !important; float: left; line-height: 100px; }
    .player .pause span                           { background: url('../images/bg-audio-pause.gif') no-repeat; }
    .player .play                                 { width: 28px; height: 23px; padding: 0 !important; float: left; line-height: 100px; }
    .player .play span                            { background: url('../images/bg-audio-play.gif') no-repeat; }
    .player .active span,
    .player a:hover span                          { background-position: 0 -23px; }
    .slider                                       { position: relative; width: 220px; height: 1px; float: left; margin: 11px 0 0 20px; background: #585d63; }
    .slider .ui-slider-handle                     { top: -7px; position: absolute; left: 20px; cursor: pointer; font-weight: bold; width: 5px; height: 14px; background-color: #6a6f75; overflow: hidden; text-indent: 53px; }
    .slider .ui-slider-disabled .ui-slider-handle { opacity:0.5; }
    #mm-1 .player                                 { float: right; }
    #mm-2 .player                                 { padding-left: 0; }
	.blank 										  {height:45px;}

	.coolers {width:250px}

/* Product Section */
	.product-holder {position:relative; float:left; width:838px; background:url(../images/product-gra_top.png) repeat-y;}
	.product-top {float:left; width:838px; height:16px; background:url(../images/product-top.png) no-repeat; margin-bottom:1px}
	.product-list {position:relative; float:left; width:810px;height:178px; background:url(../images/product-gra_btm1.gif) bottom left no-repeat; padding:0 18px 0 10px;}
	.product-list2 {position:relative; float:left; width:810px;height:178px; background:url(../images/product-gra_btm1.gif) bottom left no-repeat; padding:0 18px 0 10px;}
	
	.product-bottom {float:left; width:838px; height:21px; background:url(../images/product-btm.png) no-repeat}
	
	.topsection {margin-top:50px; margin-bottom:35px;}
	.endsection {margin-top:50px;}
	
	#tab-portable {position:absolute; top:-33px; left:25px; width:176px; height:33px; background:url(../images/tab-portable.png) no-repeat}
	#tab-fixed {position:absolute; top:-33px; left:25px; width:176px; height:33px; background:url(../images/tab-fixed.png) no-repeat}
	#tab-rental {position:absolute; top:-33px; left:25px; width:176px; height:33px; background:url(../images/tab-rental.png) no-repeat}
	
	.navigation {position:absolute; right:10px; top:220px; width:172px; height:32px; z-index:99}
	
	/* root element for the whole scrollable setup */
	div.scrollable, div.scrollable2 {  
		position:relative;
		overflow:hidden;
		width: 810px;	 
		height:178px; float:left	
	}
	
	/* 
		root element for scrollable items. It is 
		absolutely positioned with large width. 
	*/
	#thumbs, #thumbs2 {
	position:absolute;
	width:20000em;
	clear:both;
	left: 0px;
	top: -4px;
	}
	
	/* custom positioning for navigational links */
	a.prev, a.next {
		margin-top:0px;	
	}
	
	
	
	/* single item */
	#thumbs div, #thumbs2 div {
		float:left;
		width:268px;
		height:178px;
		color:#333;
		border-left:2px solid #b0b0b0;
		cursor:default;
	}
	
	#thumbs div.first, #thumbs2 div.first {
		float:left;
		width:270px;
		height:178px;
		color:#333;
		border-left:0;
		cursor:pointer;
	}
	
	/* style when mouse is over the item */
	#thumbs div.hover, #thumbs2 div.hover {
		background:url(../images/thumb-hover.png);	
	}
	
	/* style when element is active (clicked) */
	#thumbs div.active, #thumbs2 div.active {
		background:url(../images/thumb-active.png) bottom left repeat-x;
		cursor:default;
	}
	
	#thumbs p, #thumbs2 p {margin:13px; font-size:11px; color:#333; padding:0; margin:0 0 10px 0}

	#thumbs img, #thumbs2 img {float:left; width:131px; height:178px}
	#thumbs span, #thumbs2 span {width:132px; float:left; padding-right:5px; font-size:11px;}
	#thumbs h2, #thumbs2 h2 {color:#1b5680; font-size:13px; margin-bottom:10px}
	#thumbs a, #thumbs2 a {color:#900; text-decoration:none; margin-top:10px}
	#thumbs a:hover, #thumbs2 a:hover {color:#900;}

/* Pop Up */
	div.popContainer {position:relative; width:941px; height:530px; background:url(../images/productPop-bg.png) no-repeat; padding:28px; display:none}
	div.popContainer #product-details {width:941px; height:530px; float:left}
	
	.left {position:relative; float:left; width:395px; height:530px; margin-right:2px;}
	.right {position:relative; width:544px; height:530px; float:left; line-height:16px}
	
	.left .title {position:absolute; top:28px; left:20px; padding-left:50px; font-size:21px; font-weight:bold; color:#1b5680}
	.left .img {position:absolute; top:77px; left:0; width:395px; height:390px;}
	
	.left .request {position:absolute; top:470px; left:83px; width:245px; height:41px}
	.left .request a {display:block; width:245px; height:41px; background:url(../images/pop-request.png) 0 0;}
	.left .request a:hover {background:url(../images/pop-request.png) 0 -41px}
	.left .request span {display:none}
	
	.right .info {position:absolute; top:60px; left:0; width:494px; height:422px; padding:15px; background:url(../images/productPop-info.png) no-repeat}
		
	div.close { position:absolute; left:825px; top:513px; width:97px; height:34px; z-index:9999}
	div.close a {display:block; width:97px; height:34px; background:url(../images/pop-close.png) 0 0}
	div.close a:hover {background:url(../images/pop-close.png) 0 -34px}
	div.close span {display:none}
	
	.right table {background:url(../images/table-bg.png) repeat-x; width:485px; border:1px solid #ffc43c; text-align:left}
	.right table { border-bottom:1px solid #ffc43c;}
	.right table td {border-left:1px solid #dfdedb; padding:3px 0px 3px 10px; height:auto; width:305px; text-align:left}
	.right table td.left {height:auto; width:180px; border-left:0}
	.right .altrow {background:#0097ce; color:#fff}

	#loading {position:absolute; top:50%; margin-top:-50px; left:50%; margin-left:-50px; width:99px; height:99px; padding-left:1px}

	/* root element for tabs  */
	ul.tabs { 
		list-style:none; 
		margin:0 !important; 
		padding:0;	
		height:36px; position:absolute; top:-36px; left:20px;
	}
	
	/* single tab */
	ul.tabs li { 
		float:left;	 
		text-indent:0;
		padding:0;
		margin:0 !important;
		list-style-image:none !important; 
	}
	
	/* link inside the tab. uses a background image */
	ul.tabs a { 
		background: url(../images/tabs.png) no-repeat 0 0;
		font-size:14px;
		display:block;
		height: 32px;  
		line-height:30px;
		width: 153px;
		text-align:center;	
		text-decoration:none;
		color:#fff;
		padding:4px 0 0 0;
		margin:0;	
		position:relative;
		top:1px;
	}
	
	ul.tabs a:active {
		outline:none;		
	}
	
	/* when mouse enters the tab move the background image */
	ul.tabs a:hover {
		background-position: 0px -37px;	
		color:#fff;	
	}
	
	/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
	ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
		background-position: 0px -74px;
		font-weight:bold;
		cursor:default !important; 
		color:#000 !important;
	}
	
	/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
	
	
	/* width 1 */
	ul.tabs a.s 			{ background-position: 0px 0; width:153px; }
	ul.tabs a.s:hover 	{ background-position: 0px -37px; }
	ul.tabs a.s.current  { background-position: 0px -74px; }
	
	/* width 2 */
	ul.tabs a.l 			{ background-position: -153px -0px; width:220px; }
	ul.tabs a.l:hover 	{ background-position: -153px -37px; }
	ul.tabs a.l.current  { background-position: -153px -74px; }
	
	
	/* width 3 */
	ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
	ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
	ul.tabs a.xl.current { background-position: 0 -62px; }
	
	
	/* initially all panes are hidden */ 
	div.panes div.pane {
		display:none;		
	}

/* QuickView Pop Up */
	div.quickView {position:relative; width:405px; height:530px; background:url(../images/quickView-bg.png) no-repeat; padding:28px; display:none}
	div.quickView #view {width:4045px; height:405px; float:left}
	
	.viewProduct {position:relative; float:left; width:395px; height:530px; margin-right:2px;}
	
	.title2 {position:absolute; top:28px; left:0px; padding-left:50px; font-size:21px; font-weight:bold; color:#1b5680}
	.img {position:absolute; top:77px; left:0; width:395px; height:390px;}
	
		
	#quickView.close { position:absolute; left:320px; top:513px; width:97px; height:34px; z-index:9999}
	#quickView.close a {display:block; width:97px; height:34px; background:url(../images/pop-close.png) 0 0}
	#quickView.close a:hover {background:url(../images/pop-close.png) 0 -34px}
	#quickView.close span {display:none}
	
	
/* Rental page and Rental form */	

	#rent-btn {position:relative; float:left; width:258px; height:62px; background:url(../images/rent-today.png) 0 0}
	#rent-btn a {display:block; width:258px; height:62px; background:url(../images/rent-today.png) 0 0}
	#rent-btn a:hover {background:url(../images/rent-today.png) 0 -62px;}
	#rent-btn a span {display:none}
	
	.rentalThumb {float:left; width:130px; height:178px; margin-right:6px}
	.rentalThumb-end {float:left; width:130px; height:178px; margin-right:0}
	
	
	

/* Form success messages */

	#formsuccess {position:fixed; width:100%; height:100%; top:0; left:0; background:url(../images/overlay.png); z-index:99; display:none}
	#success-message {position:absolute; top:50%; left:50%; margin-left:-259px; margin-top:-110px; width:518px; height:221px; background:url(../images/contactSuccess.png) no-repeat; z-index:99; display:none;}
	#success-message div {position:relative; width:518px; height:221px; }
	#success-message div #messageClose {position:absolute; bottom:36px; left:50%; margin-left:-30px; width:47px; height:23px;}
	
	#paypal-success {position:absolute; top:50%; left:50%; margin-left:-259px; margin-top:-110px; width:518px; height:221px; background:url(../images/rentalSuccess.png) no-repeat; z-index:99; display:none;}
	#paypal-success div {position:relative; width:518px; height:221px; }
	#paypal-success div #messageClose {position:absolute; bottom:36px; left:50%; margin-left:-30px; width:47px; height:23px;}
	
	

/* Gallery Styles */

#gallery_container {position:relative; float:left; width:846px; height:510px; margin:0 0 11px 0; padding:0 23px}
#gallery_wrapper {width:800px; height:500px; border:#008de6 5px solid; overflow:hidden; background:#000}

#gallery_nav_wraper {position:relative; float:left; width:846px; padding:0 23px 0 23px}

#caption {float:left; width:657px; height:21px; font-size:16px; color:#35260d; padding:0 0 0 0px;}

a#prev {display:block; width:64px; height:21px; background:url(../images/prev_btn.png) 0 0; float:left}
a:hover#prev {background:url(../images/prev_btn.png) 0 -21px}
a#prev span {display:none}

a#next {display:block; width:64px; height:21px; background:url(../images/next_btn.png) 0 0; float:left}
a:hover#next {background:url(../images/next_btn.png) 0 -21px}
a#next span {display:none}

#spacer {float:left; width:20px; height:21px; text-align:center; font-weight:bold; color:#35260d}