/* CSS RESETS ============================================================================================== */
html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
table						{border-collapse: collapse; border-spacing: 0;}
caption, th, td				{text-align: left; font-weight: normal;}
table, td, th				{vertical-align: middle;}
a img						{border:none;}

/* GLOBAL STYLE ============================================================================================== */
body						{font-family: Arial, Helvetica, sans-serif;	font-size: 12px; font-weight: normal; line-height: 18px; text-decoration: none; text-align: center; color: #000000; margin: 0 0 40px; padding: 0; background: #000000 url(../images/bg_body.jpg) no-repeat center top;}
a							{text-decoration: none; color: #d47100; outline: none;}
a:hover						{text-decoration: underline;}
h1, h2, h3, h4, h5, h6, p,
table, ul, ol				{margin: 0 0 12px;}
h1							{font-size: 24px;}
h2							{font-size: 24px; font-weight: bold;}
h3							{font-size: 14px; font-weight: bold;}
h4							{font-size: 13px; font-weight: bold;}
h5, h6						{font-size: 12px; font-weight: bold;}
strong						{font-weight: bold; }
em							{font-style: italic;}
small						{font-size: smaller;}

/* UTILITIES ================================================================================================= */
.clearfix:after					{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix						{overflow: hidden;}
* html .clearfix				{height: 1%;}

.clear							{clear: both;}
.center							{text-align: center;}
.fl								{float: left;}
.fr								{float: right;}

a.btn							{display: inline-block; height: 30px; line-height: 30px; font-weight: bold; color:#000000; text-transform: uppercase; background: url(../images/bg_btn_left.png) no-repeat left top; padding-left: 10px;}
a.btn span						{display: inline-block; background: url(../images/bg_btn_right.png) no-repeat right top; padding-right: 25px;}
a.btn:hover						{color: #ffffff; text-decoration: none; cursor: pointer;}
a.btn:hover span				{}

/* WRAPPER =================================================================================================== */
.wrapper 						{width: 960px; text-align: left; margin: 0 auto; padding-bottom: 5px; background-color: #ffffff; border: 1px solid #383838; border-top: none;}

/* HEADER ===================================================================================================== */
.header							{overflow: hidden;}
.header	h1						{margin: 0;}
.header	h1 a					{float: left; display: inline; width: 174px; height: 54px; margin: 15px 0 0 20px; background: url(../images/logo.png) no-repeat; text-indent: -9999px;}
.header p						{float: right; display: inline; margin: 15px 20px 0 0;}
.header p a						{color: #000000; margin: 0 5px;}

/* MAINNAV */
.mainNav						{clear: both; float: left; display: inline; width: 100%; margin: 15px 0 0; background: url(../images/bg_nav.png) repeat-x; border-bottom: 1px solid #ffffff; list-style-type: none; overflow: hidden;}
.mainNav li						{display: inline;}
.mainNav li a					{float: left; height: 37px; line-height: 37px; color: #ffffff; font-weight: bold; text-transform: uppercase; padding: 0 15px; background: url(../images/main_nav.png) no-repeat; border-right: 1px solid #565656;}
.mainNav li a:hover,
.mainNav li.current a			{color: #000000; background: url(../images/bg_nav_hover.png) repeat-x; text-decoration: none;}
.mainNav li.last a				{border-right: 0;}

.dropmenu						{position:absolute; top: 0;	margin-top: -1px; font: bold 12px Arial, Helvetica, sans-serif;	z-index:200; width: 188px; visibility: hidden;}
.dropmenu a						{width: auto; height: 34px; line-height: 34px; display: block; text-indent: 33px; text-decoration: none; text-transform: uppercase; color: #ffffff; background: url(../images/bg_nav_dropdown.png) no-repeat left top;}
* html .dropmenu a				{width: 100%;} /*IE only hack*/
.dropmenu a:hover				{color: #000000; text-decoration: none; background-position: left bottom;}

/* CONTENT ===================================================================================================== */
.content						{padding: 20px 10px 20px; background: #ffffff url(../images/bg_content_top.png) repeat-x left top; overflow: hidden;}
.content .side					{float: left; width: 213px; padding: 0 0 20px; margin: 20px -14px 0 -1px; background: url(../images/bg_scroller_nav_bottom.png) no-repeat left bottom;  position: relative; z-index: 100;}
.content .main					{float: right; width: 742px; position: relative; z-index: 50;}

.side ul						{margin: 0 -15px 0 0; padding: 20px 0 0; background: url(../images/bg_scroller_nav_top.png) no-repeat left top; list-style-type: none;}
.side ul li						{display: inline;}
.side ul li a					{display: block; width: 213px; height: 34px; line-height: 34px; color: #ffffff; font-weight: bold; text-transform: uppercase; text-indent: 35px; background: url(../images/bg_nav_scroller.png) no-repeat left top;}
.side ul li a:hover,
.side ul li.current a			{color: #000000; text-decoration: none; background-position: left bottom;}

.main							{background: url(../images/bg_scroller_main_body.png) repeat-y; margin-bottom: 15px; padding-bottom: 1px;}
.main .outer					{background: url(../images/bg_scroller_main_bottom.png) no-repeat bottom left;}
.main .outer .inner				{background: url(../images/bg_scroller_main_top.png) no-repeat top left; padding: 20px 20px 20px 20px;} /* height: auto !important; min-height: 350px; height: 350px; */

span.branding					{display: block; width: 686px; height: 292px; margin-bottom: 15px; padding: 6px; background-color: #ffffff; border: 1px solid #939393; overflow: hidden;}
span.branding img				{}

/* FOOTER =================================================================================================== */
.footer							{clear: both; width: 949px; height: 69px; margin: 0 0 0 6px; background: url(../images/bg_footer.png) no-repeat; position: relative; overflow: visible;}
.footer p						{float: left; margin: 15px 0 0 15px;}
.footer p a						{color: #000000;}
.footer em						{display: block; width: 360px; position: absolute; top: 23px; right: 15px;}
.footer em a					{margin-left: 3px;}
.footer span					{color: #ffffff; position: absolute; bottom: -30px; right: 5px}
.footer span a					{color: #ff8800;}

/* ==================================================================================================================
											INDIVIDUAL PAGES
================================================================================================================== */


/* PRODUCT DETAILS ====================================================================================================== */
.details						{float: left; width: 407px;}
.pikachoose{float: right; display: inline;  width: 272px; margin-left: 20px; margin-top: 20px;}
/* THUMBNAIL - PIKACHOOSE */
/* This is the ul you have all your images in */
.pikachoose ul{margin: 0 0 0 -15px; list-style-type: none; width: 289px; padding-left:0; overflow:hidden;}
.pikachoose ul li{float: left; display: inline; margin-bottom: 10px; margin-left: 15px; position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;}

.pikachoose span.enlarge {clear: both; margin-left: 85px; padding-left: 25px; background: url(../images/icon_zoom.png) no-repeat;}

/* this is the surroundner for all your elements. This is also the fake border around the main img and room for caption */
.pika_main{display:block;position:relative;}
/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:0px;left:0px;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{margin-bottom: 10px; position:relative;border: 1px solid #bfbfbf;}
.pika_subdiv img, .pika_subdiv a img{width: 270px;}
.pika_caption{width:500px;height:16px;padding-top:4px;text-align:center;position:absolute;bottom:7px;left:3px;background:url('../black.png') top left;}
.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat;}

.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('fastf.png') top right no-repeat;}

/* TABS ----------------- */
.tabs							{margin-top: 20px; margin-bottom: -1px; margin-left: -5px; list-style-type: none; overflow: hidden;}
.tabs li						{display: inline;}
.tabs a							{float: left; display: inline; width: 98px; height: 27px; line-height: 27px; text-align: center; color: #000000; margin-left: 5px; background: url(../images/tabs_default.png) no-repeat;}
* html .tabs					{margin-left: -3px;}
* html .tabs a					{margin-left: 3px;} /* Fix for IE6 */

#tabDetails, #tabSpecs,
#tabReviews, #tabSupplier		{padding: 10px; background-color: #ffffff; border: 1px solid #cccccc;}

.tabs a.selected, .tabs a:hover	{text-decoration: none; background: url(../images/tabs_current.png) no-repeat;}
.hiddencontent					{padding:12px; display:none;}

/* TABLE - SPECIFICATION */
table.specs						{width: 100%; margin-top: 10px; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc;}
table.specs td					{padding: 2px 5px; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc;}
table.specs td.title			{background-color: #F4F4F4;}

/* FAQ ====================================================================================================== */
.faq							{}
.faq h3							{color: #f68f20;}
.faq a							{text-decoration: underline; color: #000000;}
.faq ul							{list-style-type: none;}
.faq ul li						{}
.faq ul li a					{}
.faq ul li a:hover				{text-decoration: none;}
.faq ul li span					{display: block;}
.faq hr							{margin: 25px 0; height: 1px; border: none; background-color: #dedede;}
.faq p.toTop a					{padding-right: 15px; text-decoration: none; background: url(../images/arrow_top.png) no-repeat right center;}

.faq .answer h3					{color: #000000;}
.faq .answer ul					{}
.faq .answer ul li				{margin-bottom: 15px;}

/* CONTACT ====================================================================================================== */
.form							{float: left;}
.form p							{}
.form label						{float: left; width: 90px;}
.form input						{width: 230px; height: 22px}
.form select					{width: 230px; height: 22px;}
.form textarea					{width: 350px; height: 100px;}
.form input, .form select,
.form textarea					{font: 12px Arial, Helvetica, sans-serif; border: 1px solid #bfbfbf;}
.form input.submit				{width: auto; height: auto; margin-left: 90px; padding: 3px 10px; color: #ffffff; background-color: #333; border: none; cursor: pointer;}

.address						{float: right; padding: 0 20px; border-left: 1px solid #d6d6d6;}
.address h4						{color: #f68f20; margin-bottom: 0;}
.address p						{padding-right: 80px;}
.address p.mail					{background:url(../images/icon_mail.png) no-repeat top right;}
.address p.contact				{background:url(../images/icon_phone.png) no-repeat top right; height: 100px;}