﻿@import url(Reset.css);
@import url(Buttons.css);
@import url(BaseStyles.css);

html {background: #3b3b3b url(/App_/ROOT/PageFrame/COMMON/Images/BG_SyncBlackWShadow.jpg) top center repeat-y;}
body {background: url(/App_/ROOT/PageFrame/COMMON/Images/BG_BlackWShadow.jpg) top center no-repeat;}

#container
{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

/* main content area, re-define common elements here */
.content_header
{
	text-align: left;
}
.content_pane, .content_fullpane
{
    font-size: .8em;
    line-height: 1.3em;
}
.content_pane
{
    width: 670px;
    float: left;
    margin: 20px 0;
}
.content_fullpane, .isWide
{
    width: 855px;
    float: left;
    margin: 20px;
}
.content_pane .block, .content_pane p, .content_pane h1, .content_pane h2, .content_pane h3, .content_pane h4, .content_pane blockquote, .content_pane h1, .content_pane dl, .content_pane ul, .content_pane ol, .content_pane address, .content_fullpane .block, .content_fullpane p, .content_fullpane h1, .content_fullpane h2, .content_fullpane h3, .content_fullpane h4, .content_fullpane blockquote, .content_fullpane h1, .content_fullpane dl, .content_fullpane ul, .content_fullpane ol, .content_fullpane address
{
    padding-bottom: 1em;
}
.content_pane h2, content_fullpane h2
{
    color: #565656;
    font-size: 1.7em;
    font-weight: normal;
}
.content_pane h4, content_fullpane h4
{
    padding-bottom: 0;
}
.content_pane ol, .content_pane ol li { list-style-type: decimal; }
.content_pane ol { margin-left: 2em; }
.content_pane ol li { margin: 0 0 1em; }
.commandPane 
{
    margin-top: 15px;
    overflow: auto;
    width: 100%;
}

/* engine */
div.engineContentPane table tr td
{
    vertical-align: middle;
    padding-bottom: 5px;
    padding-right: 5px;
}
div.engineContentPane table.formTable td
{
	vertical-align: top;
	padding-bottom: 10px;
}
#content input[type="text"], #content input[type="password"], #content textarea, #content select 
{
    border-color: #666 #ccc #ccc #666;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;	
}
#content input[type="text"], #content input[type="password"], #content textarea
{
    padding: 3px;
}
#content input[type="text"]:focus, #content input[type="password"]:focus, #content textarea:focus, #content select:focus
{
    border-color: #333 #999 #999 #333;
}
#content input.input-phone { width: 110px !important; }
#content input.input-postal { width:75px !important; }
#content .formTable label { display: inline-block; margin-right: 15px; }
#content .formTable td 
{
	padding: 3px;
}
span.iError
{
    color: #CC0000;
    font-weight: bold;
    text-align: center;
}

/***************************************

	Column settings
***************************************/
.column_parent
{
    width: 100%;
    overflow: hidden;
}
/* wrap column blocks with this class, if not add .clear div after columns */
.column_logo
{
    width: 220px;
    float: left;
    padding: 15px 0 0 28px;
}
.column_logo a 
{
    text-indent: -9999px;
    overflow: hidden;
    background: url(/App_/ROOT/PageFrame/COMMON/Images/Logo.gif) top left no-repeat;
    width: 200px;
    height: 71px;
    display: block;
}
.column_topNav
{
    width: 700px;
    float: left;
}
.column_specialOffers
{
    width: 410px;
    float: left;
    margin-top: 5px;
}
.column_specialOffers1
{
    width: 210px;
    float: left;
}
.column_specialOffers2
{
    width: 190px;
    float: left;
    position: relative;
}
.column_specialOffers2 .text  
{
	position: absolute;
	top: 0;
	left: 0;
}
.column_specialOffers2 .image
{
	position: absolute;
	top: 0;
	left: 100px;
}
.column_footerNav
{
    width: 490px;
    float: left;
    margin-top: 5px;
}
/*.column_mainContent    {width:655px;float:left;margin:20px 0;}*/
.column_productDetail {width: 380px; float: left;}
.column_productPhoto {width: 265px; float: right; text-align: center; margin-right: 10px;}
.column_tachiCares
{
    width: 515px;
    float: left;
    margin-bottom: 10px;
}
.column_tachiCares1
{
    width: 310px;
    float: left;
}
.column_tachiCares2
{
    width: 200px;
    float: left;
}
.column_homeProducts
{
    width: 445px;
    float: left;
}

.left_nav h3, .left_nav li a, .related_products h4, #header_nav li a
{
    font-family: "Arial Narrow" , Arial, Verdana;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}
.errorPane
{
    text-align: center;
}
.error
{
    font-size: 1.1em;
    color: #c00;
    font-weight: bold;
}
label.error { font-size: 1em; }
#content input.error, #content select.error 
{
	font-weight: normal;
	color: #000;
	background-color: #fee;
}

/***************************************
	Footer
***************************************/
.footer
{
    background: url(/App_/ROOT/PageFrame/StandardPartial/Images/Footer/FooterSync.gif) top repeat-x;
    padding: 1px 0 50px 0;
    margin: 0 18px;
}
.footer a, .footer
{
    color: #959595;
}
.footer .nav ul
{
    padding-top: 8px;
}
.footer .nav li a
{
    font-size: .75em;
    text-decoration: none;
    vertical-align: top;
}
.footer a:hover
{
    text-decoration: underline !important;
}
.footer .nav li
{
    display: inline;
    float: right;
    background: url(/App_/ROOT/PageFrame/StandardPartial/Images/Footer/NavBullet.gif) top left no-repeat;
    background-position: 0 4px;
    padding-left: 17px;
    margin-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.footer strong
{
    color: #ccc;
    font-size: 1.1em;
}
.footer a.policy
{
    color: #e4c64a;
    text-decoration: none;
    font-size: .9em;
    padding-top: 5px;
    display: block;
}
.footer .company
{
    text-align: right;
    padding-right: 5px;
}
.footer .copyright
{
    font-size: .7em;
    padding-top: 15px;
    clear: both;
}

/***************************************
	Header Navigation
***************************************/
#header_nav ul
{
    padding-left: 10px;
    background: url(/App_/ROOT/PageFrame/COMMON/Images/Topnav_Sync.gif) bottom repeat-x;
    height: 55px;
}
#header_nav li
{
    float: left;
}
#header_nav li a
{
    color: #999;
    font-size: .9em;
    text-decoration: none;
    font-weight: bold;
    display: block;
    background-image: url('/App_/ROOT/PageFrame/COMMON/Images/Topnav_On.gif');
    background-repeat: no-repeat;
    background-position: 0 -80px;
}
#header_nav li a span
{
    display: block;
    background-image: url('/App_/ROOT/PageFrame/COMMON/Images/Topnav_On.gif');
    padding: 20px 18px;
    margin-left: 5px;
    background-position: 0 -80px;
    background-repeat: no-repeat;
}
#header_nav li a:hover
{
    background-position: 0 0;
}
#header_nav li a:hover span
{
    color: #fff;
    background-position: top right;
}

#top_nav
{
    padding-right: 10px;
    height: 107px;
}

/***************************************
	White Content Area
***************************************/
#content
{
    color: #000;
    background: url(/App_/ROOT/PageFrame/COMMON/Images/ContentBorder.gif) top center repeat-y;
    margin-bottom: 20px;
}
#content .wrapper1
{
    background: url(/App_/ROOT/PageFrame/COMMON/Images/ContentBorder_Top.gif) top center no-repeat;
}
#content .wrapper2
{
    background: url(/App_/ROOT/PageFrame/COMMON/Images/ContentBorder_Bottom.gif) bottom center no-repeat;
    /*padding-left: 30px;
    padding-right: 29px;*/
    width: 900px;
    margin: 0 auto;
    padding-top: 1px;
}
#content .landing_image
{
    padding: 4px 5px 0 5px;
}
#content .marketing_message
{
	margin: 4px 5px;
}
.content_pane a, .enginePane a { color: #b89c27; text-decoration: none; }
.content_pane a:hover, .enginePane a:hover { text-decoration: underline; }

/*** Action Pane ****/
.actionPane { margin-top: 15px; }

/**** Pagination ***********************************/
.pagination 
{
	padding: 10px 15px;
	text-align: center;
}
.pagination b, .pagination a
{
	display: inline-block;
}

/**** FAQ Items ******/
.faqItem { margin-bottom: 15px; }
.faqItem .question { margin-bottom: 5px; }
.faqItem .control { text-align: right; }
.listQuestions { margin: 10px 0 20px 0; }
.listQuestions .question { margin-bottom: 10px; }

/*** Modal Window **************/
#control_overlay { background-color:#000; } 
.modal {  
    background-color:#fff;
    border:3px solid #000;
}
#popupContent { padding: 10px; }
.inlineModal {
    background-color:#fff;
    border:3px solid #000;
    width: 500px;
}
.inlineModal .close { background: #000 url(/App_/ROOT/PageFrame/COMMON/Images/Buttons/Close_O.gif) top right no-repeat; height: 22px; cursor: pointer; }
.inlineModal .content { padding: 10px; }

/*** Product Technology **************/
.technology_container
{
	padding-top: 50px;
	position: relative;
}
.technology_container h3 
{
	text-align: left;
	color: #666;
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 30px;
}
.technology_container .btn_plus 
{
    position: absolute; top: 47px; right: 0;
}
.technology_container img
{
	width: 260px;
}

/*** Order Messaging **************/
.ordermessage_container
{
	padding-top: 50px;
	position: relative;
}
.ordermessage_container h3 
{
	text-align: left;
	color: #666;
	font-size: 1.2em;
	font-weight: bold;
	margin-right: 30px;
}
.ordermessage_container .btn_plus 
{
    position: absolute; top: 47px; right: 0;
}
.ordermessage_container img
{
	width: 260px;
}


.orderMessagingBlockStyle
{
    text-align: left; 
    width: 280px;
    font-size: 10pt; 
    color: #FFCC00; 
    padding: 3px 5px 0px 0px;
}
.orderMessagingBlockStyle a
{
    color: #FFCC00; 
}