/************************* RESPONSIVE *******************/
@media only screen and (max-width: 969px)
{
	BODY{background: #4774a5}
	#wrapper{width: 98%; padding: 10px 0px 10px 0px}
	#header{height: 38px; padding: 52px 10px 0px 0px; border: solid 10px #fff; border-bottom: none; background: url(../graphics/bg-header-small.png) no-repeat 0px 0px}
	#nav LI A{padding-left: 12px; padding-right: 12px}

	#icon-best-buy{display: none}
	#container{padding: 0px 10px 0px 10px; background: #fff}
	
	#column-left{margin-right: 590px}
	#column-right{width: 555px}	
	
	/*********************** FOOTER *******************/
	#footer{padding: 15px 10px 15px 10px; border: solid 10px #fff; border-top: none; background: #2d81c1 url(../graphics/bg-footer-small.png) repeat-x center bottom}
	#footer P.copyright{padding-bottom: 0px}
	
	/*********************** MANUALS PAGE *******************/
	#sub-menu-manuals{padding-right: 20px}
}

@media only screen and (max-width: 900px)
{
		#column-left{margin-right: 535px}
		#column-right{width: 500px}	
}

@media only screen and (max-width: 820px)
{
	#header{height: auto; padding: 90px 0px 0px 0px}
	#icon-menu, #icon-cart{display: block}
	
	#nav-wrapper{width: 100%; z-index: 100; display: block; overflow: hidden; transition: height .3s ease-in-out; -moz-transition: height .3s ease-in-out; -webkit-transition: height .3s ease-in-out; background: #fff}	
	DIV.main-nav{height: 0px; padding: 0px}
	DIV.main-nav-slide{height: 130px; overflow: visible}	
	#nav LI.li-6, #nav LI.li-7{display: block}

	#nav{height: auto}
	#nav LI{width: 50%; height: auto; margin: 0px; border-bottom: solid 1px #5ec2dd; float: left}
	#nav LI A, #nav LI.li-1 A{color: #000; font-size: 12px; line-height: 12px; height: auto; padding: 10px; display: block; border: solid 1px #5ec2dd; border-top: none; border-bottom: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: #fff}
	#nav LI.li-2 A, #nav LI.li-4 A, #nav LI.li-6 A, #nav LI.li-8 A{border-left: none}
	#nav LI A:hover, #nav LI A.active{color: #fff; background: #5ec2dd}
	
	#column-left{margin-right: 485px}
	#column-right{width: 450px}		
	
	/*********************** FOOTER *******************/
	#footer P.footer-links{line-height: 18px; text-align: center}
	#footer P.footer-links SPAN{color: #fff; margin: 0px 5px 0px 5px}
	
	/*********************** SUB-MENU *******************/
	#sub-menu-manuals, #sub-menu-guides{padding-right: 0px}	
	
	/*********************** CONTACT *******************/
	FORM.contact-table FIELDSET{padding-bottom: 0px}
	FORM.contact-table DIV.contact-left{text-align: left; width: 100%; padding: 0px 0px 5px 0px; float: none}
	FORM.contact-table DIV.message-label{padding-top: 0px}
	FORM.contact-table DIV.contact-right{width: 100%; padding: 0px 0px 10px 0px; float: none}
	FORM.contact-table INPUT, FORM.contact-table TEXTAREA{width: 99%}
	FORM.contact-table INPUT.submit{margin: -10px 0px -10px 0px}	
}

@media only screen and (max-width: 750px)
{
	#column-left{margin-right: 435px}
	#column-right{width: 400px}		
}

@media only screen and (max-width: 700px)
{
	#column-right{width: 100%; margin: 0px; padding: 0px 0px 10px 0px; float: none; background: #fff}
	#column-left{width: 100%; margin: 0px 0px -20px 0px; padding: 0px}
	
	/*********************** CONTACT *******************/
	FORM.contact-table FIELDSET{padding: 20px 30px 5px 20px}
	FORM.contact-table DIV.contact-left{text-align: right; width: 28%; padding: 0px 10px 0px 0px; float: left}
	FORM.contact-table DIV.message-label{padding-top: 30px}
	FORM.contact-table DIV.contact-right{width: 69%; padding: 0px 0px 10px 0px; float: right}
	FORM.contact-table INPUT, FORM.contact-table TEXTAREA{width: 98%}
	FORM.contact-table INPUT.submit{margin-top: 10px}

	#contact-box{margin-bottom: 20px}
}

@media only screen and (max-width: 600px)
{
	IMG.banner{display: none}
	IMG.banner-small{display: block; margin-bottom: 5px}	

	/*********************** SUB-MENU *******************/
	UL.sub-menu{display: none}	
	UL.sub-menu-responsive{display: block}
	
	/*********************** MANUALS COMPARE PAGE *******************/
	#color-key{display: block}
	P.th-color-key{display: block}
	TABLE.compare TH{padding: 10px}
	TABLE.compare .col-1{width: 60%}
	TABLE.compare .col-2, TABLE.compare .col-3, TABLE.compare .col-4, TABLE.compare .col-5{width: 10%}
	TABLE.compare TH.col-2, TABLE.compare TH.col-3, TABLE.compare TH.col-4, TABLE.compare TH.col-5{color: #07a7e3; font-size: 0px; line-height: 0px}
}

@media only screen and (max-width: 500px)
{
	/*********************** HOME PAGE *******************/
	#tabbed-menu{height: 26px; padding-left: 1px}
	#tabbed-menu LI{color: #000; font-size: 10px; line-height: 10px; height: 18px; margin: 0px 0px 0px -1px; padding: 6px 15px 0px 15px}
	
	/*********************** PRODUCT CHECKOUT SECTION *******************/
	DIV.product-checkout{margin: 10px 0px 20px 0px; padding: 0px 0px 5px 0px}
	DIV.product-checkout-small{margin: 0px}
	DIV.download-price{width: 100%; padding: 0px 0px 15px 0px; float: none}
	DIV.download-price P.header-green{padding: 0px 0px 5px 2px}	
	DIV.download-now{width: 100%; margin: 0px 0px 0px 0px; float: none}
	DIV.download-now P.download-now{font-weight: bold; font-style: italic}
	DIV.download-now P.main{padding: 0px}	
	
	
	/*********************** CONTACT *******************/
	FORM.contact-table FIELDSET{padding: 10px 10px 0px 10px}
	FORM.contact-table DIV.contact-left{text-align: left; width: 100%; padding: 0px 0px 5px 0px; float: none}
	FORM.contact-table DIV.message-label{padding-top: 0px}
	FORM.contact-table DIV.contact-right{width: 100%; padding: 0px 0px 10px 0px; float: none}
	FORM.contact-table INPUT, FORM.contact-table TEXTAREA{width: 99%}
	FORM.contact-table INPUT.submit{margin: -10px 0px -10px 0px}	
	
	#contact-box{padding: 15px 20px 0px 20px; border: solid 1px #c8c8c8; background: #f0f0f0}
	#contact-box-left{width: 100%; float: none}	
	#contact-box-right{width: 100%; float: rnone}	
}

@media only screen and (max-width: 400px)
{
	#header{background: url(../graphics/bg-header-tiny.png)}
	
	DIV.main-nav-slide{height: 240px}	
	#nav LI{width: 100%; float: none}
	#nav LI.li-2 A, #nav LI.li-4 A, #nav LI.li-6 A, #nav LI.li-8 A{border-left: solid 1px #5ec2dd}
	#nav LI.li-1{display: none}
	
	/*********************** MANUALS PAGE *******************/
	DIV.manuals-template{padding: 0px}
	DIV.manuals-template IMG.product-image{width: 90%; margin: 0px 0px 10px 0px; position: relative; left: 0px; top: 0px}
	DIV.manuals-template IMG.product-image-form{width: 90%; margin: 0px 0px 10px 0px; position: relative; left: 0px; top: 0px}
	
	/*********************** AFFILIATES PAGE *******************/
	IMG.affiliate{width: 150px; height: auto}
}