/* -----------------------------------------------------

1.0 UNIVERSAL RESETS
2.0 GENERIC CLASSES
3.0 LAYOUT OR PAGE STRUCTURE
4.0 HEADER
5.0 NAVIGATION
6.0 PAGE SPECIFIC STYLES
7.0 FOOTER

/*
*********************************************
1.0 UNIVERSAL RESETS: THESE HAVE BEEN SET IN THE RESET.CSS FILE
*/

/*
*********************************************
2.0 GENERIC CLASSES:
*/
	h1 {}
	h2 { color: #888; font: rounded bold 18px arial narrow, arial, serif; text-transform: uppercase; margin-bottom: 10px; }
	h3 { color: #888; font: bold 20px arial narrow, arial, serif; text-transform: uppercase; margin-bottom: 10px; }
	h4 {color: #888; font: bold 16px arial narrow, arial, serif; text-transform: uppercase; margin: 15px 0 5px 0; }
	h5 {color: #555; font: bold 13px arial narrow, arial, serif; margin: 10px; }
	
	div.clear 	{ clear: both; }
	a		{ color: #069;} 
	
/*
***************************************************
3.0	LAYOUT OR PAGE STRUCTURE 
*/
	
	body 			{ background: #173542 url(images/bg.png) repeat-x center top; color: #fff; text-align: center; }
	body#inner, body.inner 	{ background: #173542; }
	div#inner-content	{ background: #ebebeb url(images/bg_body_inner_wrapper.png) repeat-x; width: 100%; }
	div#content-wrapper	{ margin: 0 auto; text-align: left; background: url(images/bg_body_inner.png) no-repeat;}
	div#main-content 	{	}
	
/*
*********************************************
4.0 HEADER: 
*/	

	div#header 		{ min-height: 118px; }
	div#header h1 		{ float: left; display: inline; }
	div#header h1 a 	{ display: block; width: 320px; height: 70px; text-indent: -9999px; }

/*
*********************************************
5.0 NAVIGATION:
*/

	div#top-navigation 			{ float: right; display: inline; margin: 35px 20px; }
	div#top-navigation ul li 		{ float: left; display: inline; padding: 6px 6px; }
	div#top-navigation ul li a 		{ display: block; padding: 7px 14px; color: #eee; font-size: 14px; font-family: "Arial Rounded MT Bold", sans-serif; }
	div#top-navigation ul li a:hover	{ text-decoration: none; background: url(images/bg_tab.png) repeat-x; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 0 10px #2c99cf; -webkit-box-shadow: 0 0 10px #2c99cf; box-shadow: 0 0 10px #2c99cf;}

/*
**********************************************
6.0 PAGE SPECIFIC STYLES
*/

	/* 
	7.1 INNER PAGES
	----------------------------------------------------*/
	
	/* MAIN CONTENT */
	
	div#main-content 			{ min-height: 400px; padding: 30px; color: #333;}
	div#main-content div#content		{ margin-left: 300px; color: #333; }
	div#main-content div#content p		{ line-height: 16px; margin: 20px 0 0 0; }
	div#main-content div#content td 	{ vertical-align:top }
	
	/* NAVIGATION */
	
	div#main-content div#navigation 	{ float: left; width: 241px; display: inline; background: url(images/bg_navigation.png) no-repeat center center; }
	div#main-content div#navigation ul	{ margin: 35px 0 30px 0; }
	div#main-content div#navigation ul li	{ background: url(images/bg_navigation_arrow.png) no-repeat 20% 50%; }
	div#main-content div#navigation ul li a		{ display: block; color: #069; border-top: 1px solid #fff; border-bottom: 1px solid #eee; padding: 7px 10px 6px 60px; width: 130px; margin: 0 10px;}
	div#main-content div#navigation ul li.selected a, div#main-content div#navigation ul li a:hover { font-weight: bold; text-decoration: none; } 
	
	/* LISTS */
	ul.bullet-list		{ padding: 0px 15px; margin: 0px 15px; list-style: disc; }
	ul.bullet-list li	{ margin-bottom: 6px; }
	table.grid		{ margin-top: 20px; border-top: 2px solid #ccc; }
	table.grid td		{ padding: 10px 6px; border-bottom: 1px solid #ccc; }
	table.grid td.product-ver { white-space: nowrap; }

	/* FAQ */
	ul.jumpLinks		{ list-style-type: none; }
	ul.jumpLinks li		{ padding: 4px; }
	div.faq_question	{ margin-bottom: 5px; font-weight: bold; }

	/* installed.jsp and newInVersion*.jsp */
	table.form-table	{ margin: 15px 0px 0px 30px;}
	table.form-table td	{ padding-bottom: 5px; }
	
	div.left-col		{ float: left; display: inline; width: 400px; margin-right: 10px; }
	div.left-col p		{margin: 15px 0px 0px 0; padding-left: 40px; line-height: 16px; }
	div.left-col p.dcMessageComplete { background: url(images/checkmark_32-2.png) no-repeat center left; font-size: 15px; padding: 7px 0px 10px 20px; padding-left: 40px; margin: 0; }
	div.right-col		{ float: left; display: inline; width: 512px; }
	div.right-col img	{ border: 1px solid #ccc; }
	div.uninstall-right-col		{ float: left; display: inline; width: 512px; }

/* 
***************************************************************
7.0 FOOTER
*/
	
	div.footer-wrapper	{ background: #173542; margin: 20px 5px; border: 1px solid #173542 }
	div#footer		{ width: 900px; margin: 20px auto 0 auto; background: transparent url(images/logo_footer.png) no-repeat right; min-height: 100px; }
	div.footer-links	{ float: left; display: inline; }
	div.footer-links ul li	{ float: left; display: inline; line-height: 18px; color: #999; font-weight: bold; font-size: 11px; text-align: left; }
	div.footer-links ul li ul li { float: none; display: block; }
	div.footer-links ul li a { color: #ddd; font-weight: normal; }	
	#footer p		{ color: #888; font-size: 11px; text-align: right; }

/* 
***************************************************************
8.0 search-links.jsp and roaming-suggestions.jsp
*/
#main-content p { line-height: 1.5; margin-bottom: 20px; }

body#inner { position: relative; right: -200px; top: 0; transition: 0.75s ease-in; overflow-y: scroll; overflow-x: hidden; }
	
#hamburger { display: none; font-size: 36px; color: #fff; position: absolute; top: 13px; right: 20px; }
#hamburger:hover { text-decoration: none; }

div#content-wrapper { max-width: 960px; margin: 0 auto; }

#top-navigation ul li.open a, #menu ul li.open > a { font-weight: bold; }

/* RESPONSIVE OFF CANVAS MENU -----------------------*/
	#menu { position: fixed; width: 200px; top: 0; right: -200px; height: 100%; overflow: hidden; background: #F7F7F7;  z-index: 300; transition: 0.75s ease-in;} 
	#main { position: relative; right: 200px; padding: 0; height: 100%; }

	#menu > ul { margin-top: 34px; border-top: 1px solid #eee; }
	#menu ul li { border-top: 1px solid #fff; border-bottom: 1px solid #eee; }
	#menu ul li a { display: block; text-align: left; color: #069; padding: 7px 10px 6px 35px; background: url(images/bg_navigation_arrow.png) no-repeat 15px 50%; }
	#menu ul li:hover > a { font-weight: bold; text-decoration: none; }
	
	#menu .logo { margin: 10px; display: inline-block; }
	#menu .close-menu { margin: 8px; display: inline-block; float: right; opacity: 0.5; font-size: 18px; }
	#menu .close-menu:hover { opacity: 1; }

@media screen and (max-width: 900px) {
	div#header h1 { background-size: contain !important; margin-top: 45px !important }
	div#header h1 a { width: 250px; }
	div#top-navigation ul li a { padding: 7px 10px; }
	
	div#footer { width: 100%; }
	div#footer div.footer-links { padding: 0 15px; }
	div#footer div.footer-links ul li { float: none; width: 100%; }
	div#footer .footer-links li > ul { width: 100% !important; }
}

@media screen and (max-width: 768px) {
	#hamburger { display: block; }
	div#top-navigation ul { display: none; }
	
	div#main-content div#navigation { display: none; }
	div#main-content div#content { margin-left: 0; }
	
	div#content-wrapper { background-position: -60px -36px; }
	
	div#header { min-height: 80px; }
	div#header h1 { margin-top: 20px !important; margin-left: 20px !important; }
	div#header h1 a { height: 34px; }

	div#inner-content { background-position: -12px -36px; }
	
	div#top-navigation { margin: 15px 20px; }
}

@media screen and (max-width: 480px) {
	div#content-wrapper { background-position: -60px -50px; }	
	div#inner-content { background-position: -12px -50px; }
	
	div#header { min-height: 60px; }
	div#header h1 { margin-left: 10px; }
	div#header h1 a { width: 200px; }
	div#top-navigation { margin: 13px 20px; }
	
	div.footer-wrapper { margin: 0 0 10px; }
	div#footer { margin-top: 10px;  background-position: 95% 100%; }
	
	div#footer div.footer-links { float: none; width: 100%; display: block; padding: 0; }
	div#footer div.footer-links ul > li > ul > li { font-size: 12px; padding: 5px 8px; }
	
	#footer p { text-align: left; padding: 10px 5px 40px; line-height: 1.5 }
}