/*=====================================================================
* Filename: main.css
* Author: Howie Chang
* Date Created: 1/13/2009
* Media: Screen
*
* Description
* -----------
* CSS Reset using "reset.css" from 960 framework package, derived from Eric Meyers.
* Uses blueprint typography CSS as base starting point: http://www.blueprintcss.org/
=====================================================================*/

@import "reset.css";

html { 
  background: #6c1538 url(../img/layout/page_back_tile.jpg) repeat-y; background-position:center;
}

body {
  background: url(../img/layout/page_back.jpg) repeat-x; background-position:top center;
  behavior:url("csshover.htc");
}

body div.qtip div.content{
   padding: 0;
   margin: 0;
   height: auto; min-height: auto;
   width: auto; min-width: auto;
}

/* ===== GLOBAL ===== */
.center { margin: 0 auto; }
.tcenter { text-align: center; }
.fl { float: left; }
.fr { float: right; }
.clear { clear: both; }
.spacer { height: 10px; }
.pagespacer,
.nofeature { height: 50px; }

p img		{ padding: 5px;}
p a.left,
p img.left  { float: left; margin: .5em 1.5em 1.5em 0; }
p a.right,
p img.right { float: right; margin: .5em 0 1.5em 1.5em; }
p a:hover img{ background: #2b2e38; }

.tinyfont {
	margin: 0 0 0.6em;
	font-size: 12px;
}



/* Use this instead of html hr tag */
div.hr { width: 100%; height: 1px; border-top: solid 1px #222; }

/* ===== LAYOUT ===== */
#header, #featured,
#content, #footer,
#navigation, #featured-tabs, #wrap-top, #wrap-bottom {
	width: 900px;
	margin: 0 auto;
}

/* === HEADER === */
#header {
	height: 136px;	/* background: url(../img/layout/page-topshadow.jpg) no-repeat 0 0; */
}
#header .content {
	height: 78px;
	border-bottom: solid 0px #2a2d32;
	padding-top: 10px;
}
#header .contact-info {
	width: 350px;
	float: right;
}
#header .contact-info ul { margin: 0; list-style: none; color: #FFFFFF }

.tagline {
	float: left;
	margin-left: 38px;
	padding-top: 25px;
}

#top-roundborder {
	height: 16px;
	background: url(../img/layout/top-roundborder.png) no-repeat 50% 100%;
	padding-top:5px;
	margin-bottom: 0px;
	width: 900px;
}

#bottom-roundborder {
	height: 16px;
	background: url(../img/layout/bottom-roundborder.png) no-repeat 50% 100%;
	margin-bottom: 0px;
	width: 900px;
}

/* === NAVIGATION === */
#navigation {
	height: 51px;
	/* position: absolute; == eric */
	background: url(../img/layout/nav-bg.png) repeat-x;
}
#navigation ul { list-style: none; margin: 0; padding-left: 20px; }
#navigation ul li { float: left; display: inline; }
#navigation a {
	height: 46px;
	display: block;
	float: left;
	padding: 0 20px;
}
#navigation a:hover,
#navigation a.active {
	background: url(../img/layout/nav-active-arrow.png) no-repeat 50% 100%;
}

/* === FEATURED CONTENT SECTION === */

#pink-tab {
background: url(../img/btn_win.png) no-repeat;
/* background: #FA0099; */
width: 60px;
text-align: center;
}

#green-tab {
background: url(../img/btn_disciple.png) no-repeat;
width: 60px;
text-align: center;
}

#purple-tab {
background: url(../img/btn_send.png) no-repeat;
width: 60px;
text-align: center;
}

#featured {
	height: 515px;
	overflow: visible;
	background: url(../img/layout/featured-bg.jpg) repeat;
	border: solid 0px #56595d;
	border-top: solid 1px #ffffff;
}
#featured .content {
	height: 515px;
	padding: 5px 30px;
	overflow: visible;
	background: url(../img/layout/featured-radialgradient.jpg) no-repeat 0 0;
}

#featured-tabs {
	height: 30px;
	margin-bottom: 0px;
	overflow: visible;
	background: url(../img/layout/zz_featured-tabs-bgshadow.jpg) no-repeat 0 0;
}
#featured-tabs > div {
	width: 2px;
	height: 30px;
	float: left;
	background: url(../img/layout/zz_featured-tabs-divider.gif) no-repeat 0 0;
}
#featured-tabs ul { list-style: none; margin: 0; }
#featured-tabs ul li {
	float: right;
	display: inline;
	background: url(../img/layout/zz_featured-tabs-divider.gif) no-repeat 100% 0;
}
#featured-tabs a {
	padding: 0 20px;
	display: block;
	float: left;
	height: 29px;
	margin-top: 0px;
}
#featured-tabs a:hover,
#featured-tabs li.active a {
	border-top: solid 0px #d1761b;
	margin: 0;
}

#featured .image-container {
	width: 300px;
}
#featured .image-container-right { width: 300px; float: right; }
#featured .image-container-left { width: 300px; float: left; }
#featured .image {
	margin: 0px 0;
	height: 312px;
}
#featured .image img { margin: 0; }
#featured .topshadow, #featured .bottomshadow {
	width: 551px;
	height: 7px;
}
#featured .topshadowshort, #featured .bottomshadowshort {
	width: 350px;
	height: 7px;
}
#featured .topshadow {
	background: url(../img/layout/featured-image-topshadow.png) no-repeat;
}
#featured .bottomshadow {
	background: url(../img/layout/featured-image-bottomshadow.png) no-repeat;
}

#featured .topshadowshort {
	background: url(../img/layout/featured-image-topshadow.gif) no-repeat;
}
#featured .bottomshadowshort {
	background: url(../img/layout/featured-image-bottomshadow.gif) no-repeat;
	height: 25px;
}

#featured .content-container { margin: 5px 0; }
#featured .content-container p { width: 650px; margin: 0 auto; }
#featured .content-container-right {
	position: relative;
	overflow: hidden;
	width: 260px;
	float: right;
	margin: 5px 0 15px 30px;
	padding: 0px 0px 0px 5px;
	height: 315px;
}
#featured .content-container-left { width: 350px; float: left; margin: 5px 30px 5px 0; }
#featured .content-container-wide {
	width: 900px;
	float: left;
	margin: 0px 30px 0px 0px;
}

#featured ul.horz-gallery { width: 820px; margin: 0 auto; }
#featured ul.horz-gallery li { float: left; display: inline; list-style: none; margin-right: 12px; }
#featured ul.horz-gallery li.last { margin-right: 0; }
#featured ul.horz-gallery li img { padding: 5px; background: #1d1f27; border: solid 1px #545466; }
#featured ul.horz-gallery li a:hover img { background: #2f3240; border: solid 1px #858bae; }

#featured ul.featured-blocks {
	list-style: none;
	margin: 5px 0 0;
}
#featured ul.featured-blocks li { float: left; margin-right: 30px; }
#featured ul.featured-blocks li.last { margin-right: 0; }
#featured ul.featured-blocks .image {
	height: 158px;
	display: block;
}
#featured ul.featured-blocks .bottomshadow {
	width: 260px;
	height: 7px;
	background: url(../img/layout/featured-blockimage-bottomshadow.png) no-repeat;
}

/* === LEARN MORE LINKS === */
.featured-learnmore-lg, .featured-learnmore-sm,
.content-learnmore-lg, .content-learnmore-sm { margin: 10px 0; }

.featured-learnmore-lg.center, .featured-learnmore-sm.center,
.content-learnmore-lg.center, .content-learnmore-sm.center { margin: 10px auto; }

.featured-learnmore-lg.fl, .featured-learnmore-sm.fl,
.content-learnmore-lg.fl, .content-learnmore-sm.fl { margin: 0 0 10px 25px; }
.featured-learnmore-lg.fr, .featured-learnmore-sm.fr,
.content-learnmore-lg.fr, .content-learnmore-sm.fr { margin: 0 25px 10px 0; }

.featured-learnmore-lg, .content-learnmore-lg { width: 156px; height: 36px; display: block; }
.featured-learnmore-sm, .content-learnmore-sm { width: 104px; height: 29px; display: block; }

.featured-learnmore-lg { background: url(../img/layout/featured-learnmore-lg.gif); }
.featured-learnmore-lg:hover { background: url(../img/layout/featured-learnmore-lg.gif) 0 -36px; }
.featured-learnmore-sm { background: url(../img/layout/featured-learnmore-sm.gif); }
.featured-learnmore-sm:hover { background: url(../img/layout/featured-learnmore-sm.gif) 0 -29px; }

.content-learnmore-lg { background: url(../img/layout/content-learnmore-lg.gif); }
.content-learnmore-lg:hover { background: url(../img/layout/content-learnmore-lg.gif) 0 -36px; }
.content-learnmore-sm { background: url(../img/layout/content-learnmore-sm.gif); }
.content-learnmore-sm:hover { background: url(../img/layout/content-learnmore-sm.gif) 0 -29px; }

/* === MAIN CONTENT AREA === */

#contentMain {
	width: 560px;
	float: left;
	margin-top: 20px;
	background:#FFFFFF;
}

#content ul.horz-gallery { width: 841px; margin: 0 auto; }
#content ul.horz-gallery li { float: left; display: inline; list-style: none; margin-right: 15px; }
#content ul.horz-gallery li.last { margin-right: 0; }
#content ul.horz-gallery li img { padding: 5px; background: #1d1f27; border: solid 1px #545466; }
#content ul.horz-gallery li.active img,
#content ul.horz-gallery li a:hover img { background: #2f3240; border: solid 1px #858bae; }

#content .horz-gallery-content { width: 841px; margin: 25px auto 0; }

/* === SIDEBAR === */
#sidebarTop {
	overflow: visible;
	background: url(../img/layout/sidebar-bgtop.png) no-repeat;
	width: 250px;
	margin-top: 0px;
	padding: 10px 30px 0px 20px;
	height: 0px;
}
#sidebarBottom {
	background: url(../img/layout/sidebar-bgbottom.png) no-repeat;
	width: 250px;
	margin-top: 0px;
	padding: 10px 30px 0px 20px;
	height: 10px;
}
#sidebar {
	background: url(../img/layout/sidebar-bg.png) repeat-y;
	width: 250px;
	float: right;
	margin-top: 0px;
	padding: 10px 30px 0px 20px;
}

.example {
	overflow: visible;
	background: url(../img/layout/sidebar-bg.png) repeat-y;
	width: 250px;
	padding: 0px 0px 0px 10px;
}

#sidebar .news { margin: 0; list-style: none; }
#sidebar .news li { margin-bottom: 6px; padding-bottom: 10px; border-bottom: solid 1px #808080; }
#sidebar .news p { margin: 0; }

#threecol .news { margin: 0; list-style: none; }
#threecol .news li { margin-bottom: 6px; padding-bottom: 10px; 	border-bottom: 1px solid #808080; }
#threecol .news p { margin: 0; }

#threecol .calendar { margin: 0; list-style: none; }
#threecol .calendar li { margin-bottom: 0px; padding-bottom: 0px; 	border-bottom: 1px solid #808080; }
#threecol .calendar p { margin: 0; }

/* === FOOTER === */
#footer {
	margin-top: 0px;
	/* background: url(../img/layout/footer-bg.gif) repeat; */
	background-color: #924E65;
	border-top: solid 0px #FE9544;
}
#footer .content {
	/* background: url(../img/layout/footer-topshadow2.jpg) no-repeat 0 0; */
	border-top: solid 0px #FFFFFF;
}
#footer .pad {
	padding: 15px 30px;
}
#footer .info {
	height: 50px;
	width: 700px;
	float: left;
}
#footer .logo-small {
	padding-right: 20px;
	border-right: solid 1px #F7DBD4;
	float: left;
}
#footer .logo-small a {
	margin: 1px 0 8px;
	display: block;
}

#footer .info ul {
	float: left;
	padding-left: 12px;
	list-style: none;
	margin: 5px 0 0;
}
#footer .info ul li {
	float: left;
	display: inline;
	padding: 5px 8px;
	border-right: solid 1px #F7DBD4;
}
#footer .info ul li.last { border: none; }

#footer .legal { float: left; margin: 8px 0 0 20px; width: 70%; }

/* === QUICK CONTACT FORM === */

#quick-contact { width: 270px; float: right; position: relative; }
#quick-contact .container { margin-top: 5px; }
#quick-contact label, #quick-contact .qmessage { clear: both; }
#quick-contact .qname,
#quick-contact .qemail { width: 131px; }
#quick-contact input { width: 125px; border-bottom: solid 1px #050506; }
#quick-contact input, #quick-contact textarea { margin: 4px 0 0; padding: 3px; background: url(../img/layout/footer-formbg.gif) repeat; border: none; }
#quick-contact textarea { width: 264px; height: 50px; }
#quick-contact .qname, #quick-contact .qemail, #quick-contact .qmessage { border-bottom: solid 1px #111116; margin-bottom: 7px; }
#quick-contact .qmessage { clear: both; }
#qresponse { padding: 0 25px; }
#quicksubmit { text-align: right; }
#quick-contact input.qsubmit { width: 62px; border: solid 1px #111116; }
#quick-contact input.qsubmit:hover { background: url(../img/layout/send-hover.gif) repeat; }
#qshow, #qhide { display: block; position: absolute; top: 0; right: 0; }

/* Forms */
form { margin: 0px 0 15px; padding: 0px 0px 0; border: none; }
form .search { margin: 0px 0 15px; padding: 0px 0px 0; border: none; }
form fieldset { margin: 0; padding: 0; position: relative; }
form fieldset legend { display: none; }
form fieldset legend.show { display: inline; white-space: normal; }     
form fieldset br { clear: both; }

#contact-form label,
form fieldset label { clear: left; display: block; float: left; margin: 1em 10px 0 0; width: 100px; vertical-align: middle; }
#contact-form input,
form fieldset input {  padding: 4px 6px; vertical-align: middle; margin-top: 1em; width: 50%; }
#contact-form textarea,
form fieldset select,
form fieldset textarea { padding: 4px 6px; vertical-align: middle; width: 61%; margin-top: 1em; }

#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form button,
form fieldset input,
form fieldset select,
form fieldset textarea,
form fieldset button { background: url(../img/layout/footer-bg.gif) repeat; border: solid 1px #1e2028; }
form fieldset select { width: 52.5%; }
form fieldset input[type="radio"],
form fieldset input[type="checkbox"] { width: auto; margin-left: 0; padding: 0; }

form fieldset fieldset { margin: 1.5em 0 0 110px; padding: 0; }
form fieldset fieldset legend span { position: absolute; left: -160px; width: 150px; }    
form fieldset fieldset input[type="radio"],    
form fieldset fieldset input[type="checkbox"] { margin-top: 0; margin-bottom: 5px; }
form fieldset fieldset label { clear: none; float: none; display: inline; margin-right: 0; }
#contact-form button,
form fieldset button { margin: 10px 15px 0 350px; padding: 3px 8px; }
#contact-form button,
form fieldset button:hover { cursor: pointer; }



/* ===== FONTS ===== Default font settings. The font-size percentage is of 16px. (0.825 * 16px = 13.2px) */
body {
	font-size: 82.5%;
	color: #404040;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
.nojs {
	color: #404040;
	text-align: center;
}

/* === HEADER === */
#header .contact-info ul { text-align: right; line-height: 1.3em; font-size: .95em; }

/* === NAVIGATIN & FEATURED CONTENT TABS === */
#navigation a,
#featured-tabs a {
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0em;
}

#navigation { font-size: 1.5em; }
#navigation a {
	line-height: 46px;
	color: #FFFFFF;
}
#navigation a:hover,
#navigation a.active { color: #F85932; }

#featured-tabs {
	font-size: 0.9em;
}
#featured-tabs a {
	line-height: 29px;
	color: #F4F4F4;
}
#featured-tabs a:hover,
#featured-tabs a.active {
	color: #FFFFFF;
}

#featured .content-container { text-align: center; }

#featured ul.featured-blocks { text-align: center; }

/* LEARN MORE LINKS */
.featured-learnmore-lg, .content-learnmore-lg { font-size: 1.15em; color: #d28335; line-height: 32px; }
.featured-learnmore-sm, .content-learnmore-sm { color: #a6acd0; font-size: .9em; line-height: 24px; }
.featured-learnmore-lg:hover, .content-learnmore-lg:hover { color: #e28f3d; }

.featured-learnmore-lg, .featured-learnmore-sm,
.content-learnmore-lg, .content-learnmore-sm { text-align: center; font-style: italic; }
.featured-learnmore-lg:hover, .featured-learnmore-sm:hover,
.content-learnmore-lg:hover, .content-learnmore-sm:hover { text-decoration: none; }

/* === SIDEBAR === */
#sidebar .news { font-size: .95em; }
#sidebar .news .date { font-size: .9em; color: #54575f; }

#threecol .news {
	font-size: 100%;
}
#threecol .news .date { font-size: .9em; color: #54575f; }
#threecol .calendar .date { font-size: .9em; color: #54575f; }


#threecol p.archiveLink {
clear: both;
width: 253;
height: 30px;
margin-top: 10px;
margin-right: 0pt;
margin-bottom: 10px;
margin-left: 10px;
}

#threecol .archiveLink a {
background-image: url(/img/icon-calendar.gif);
display: block;
float: right;
padding-right: 20px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100% 50%;
}


/* === FOOTER === */
#footer, #quick-contact { font-size: 1.05em; }
#footer .info ul li { font-size: .85em; line-height: 10px; }
#footer .info ul li a {
	color: #FFFFFF;
}
#footer .info ul li a:hover {
	color: #FFFFFF;
}

#footer .legal {
	font-size: 0.8em;
	color: #FFFFFF;
	line-height: 12px;
}

/* Quick Contact form */
#quick-contact, #quick-contact input.qsubmit { font-size: .9em; color: #7e7e7e; }
#quick-contact .qsuccess { text-align: center; }
#qresponse { color: #9e1a1a; line-height: 1.2em; }
#quick-contact input.qsubmit:hover,
#qshow:hover, #qhide:hover { color: #f49331; cursor: pointer; text-decoration: none; }
#quick-contact input,
#quick-contact textarea { color: #acacac; font: 1em "Helvetica Neue", "Arial Narrow", Arial, Helvetica, sans-serif; letter-spacing: .05em; }

/* Forms */
form label, form legend { font-family: "Helvetica Neue", "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: 200; }
form fieldset label,
form fieldset fieldset legend { color: #7e7e7e; text-align: right; }
#contact-form button,
#contact-form input,
#contact-form textarea,
form fieldset input,
form fieldset select,
form fieldset textarea,
form fieldset button { color: #b2b2b2; }
#contact-form button:hover,
form fieldset button:hover { color: #f49331; }

#response { color: #9e1a1a; line-height: 1.3em; }

/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #333333; }

#featured h1 {
	color: #333333;
	letter-spacing: 0em;
	font-size: 2em; 
	margin-bottom: 0.1em;
}
#footer h5 { font-size: 1.1em; color: #a6acd0; }

h1 { font-size: 2em; margin-bottom: 0.5em; }
h2 { font-size: 1.65em; margin-bottom: 0.6em; }
h3 { font-size: 1.3em; margin-bottom: 1em; }
h4 { font-size: 1.1em; margin-bottom: 1em; }
h5 { font-size: 1em; margin-bottom: .75em; }
h6 { font-size: .95em; margin-bottom: .6em; }

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img { margin: 0; }


/* Text elements */
p           {
	margin: 0 0 1.0em;
	font-weight: 200;
	line-height: 1.55em;
}
#featured p { color: #404040; line-height: 1.45em; }

a:focus, 
a:hover     {
	color: #FF3300;
	text-decoration: underline;
}
a           {
	color: #FF3300;
	text-decoration: none;
}

.header    {
	color: #EDF1F3;
	text-decoration: none;
}
.header:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
.header:focus {
	color: #EDF1F3;
	text-decoration: underline;
}

blockquote  { margin: 1.0em; color: #666; font-style: italic; }
strong,dfn  { font-weight: bold; }
em,dfn      {
	font-style: oblique;
}
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 		{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists */

li ul, 
li ol       { margin:0 1.0em; }
ul, ol      { margin: 0 1.5em 1.5em 1.0em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

ul, ol, dl	{ font-weight: 200; line-height: 1.65em; margin: 10px 0 1.5em 35px; }
ul ul, ol ol{ font-size: 1em; margin: 0 0 0 25px; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* Tables */
table       { margin-bottom: 0em; width:100%; font-weight: 200; line-height: 1.65em; border: solid 1px #FFFFFF; }
th          { font-weight: bold;}
th,td       { padding: 1px 1px 1px 1px; border: solid 1px #FFFFFF; }
/* tr.even td  { background: #E5ECF9; }
tfoot       { font-style: italic; }
caption     { background: #eee; } */


/* Misc classes */
.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }



/* Three column bottom portion */		
#threecol {
	background: url(../img/threecol_bg.gif) repeat-y;
	clear: both;
	line-height: 1.7em;
	padding: 10px 0px;
}
		
#threecol:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#threecol {
	display: inline-block;
}


/* Hides from IE-mac \*/
* html #threecol { height: 1%; }
#threecol {
	display: block;
	float: none;
}
		
/* End hide from IE-mac */
		
#threecol h3 {
	font: 1.5em Arial;
	margin-bottom: 10px;
}


#threecol ul {
	list-style: none;
}

#threecol ul li {
	border-bottom: 1px solid #e3e3e2;
	padding: 0px 0px;
}
				
#threecol ul li.active {
	background: #c96503;
}

#threecol ul li.active a {
	color: #ffffff;
}
				
#threecol ul li a {
	color: #5d5c55;
}
				
#side-a {
	color:#333333;
	float: left;
	width: 250px;
	height: 510px;
	padding: 20px 30px 0px 20px;
	background: url(../img/layout/shadowbox_s.png) no-repeat;
}

#side-b {
	color:#333333;
	float: left;
	width: 250px;
	height: 510px;
	padding: 20px 30px 0px 20px;
	background: url(../img/layout/shadowbox_s.png) no-repeat;
}

#content_3column {
	color:#333333;
	float: left;
	width: 250px;
	height: 510px;
	padding: 20px 30px 0px 20px;
	background: url(../img/layout/shadowbox_s.png) no-repeat;
}


/* LIST FOR SUB-MENU */
/* - - - ADxMenu: BASIC styles - - - */

.menu {
	width: 15em;/* VERY IMPORTANT! Set this to appropriate value, either here on down in the design section */
}

.menu, .menu ul {	/* remove all list stylings */
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu ul {
	visibility: hidden;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	/* while hidden, always keep them at the top left corner, */
	top: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;	/* display submenu them on hover */
	left: 100%;	/* and move them to the right of the item */
}

/* -- float.clear --
	force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
	min-height: 0;
}
/* -- float.clear.END --  */

/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	background-image: url(../img/empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}


/* - - - ADxMenu: DESIGN styles - - - */

.menu, .menu ul li {
	color: #FF5C33;
	background: #FFFFF;
}

.menu {
	width: 15em;
}

.menu ul {
	width: 10em;	
}

.menu a {
	text-decoration: none;
	color: #FF5C33;
	padding: .1em 0em;
	display: block;
	font-size: 14px;
	font-weight: bold;
}

.menu a:hover, .menu li:hover>a {
	text-decoration: underline;
	color: #FF5C33;
}

.menu li {	/* create borders around each item */
	border: 0px solid #ccc;
}
.menu>li + li, .menu ul>li + li {	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

.menu li:hover>ul {	/* inset submenus, to show off overlapping */
	top: 2px;
	left: 60%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
	placed here to clarify the terminology I use when referencing submenus in posts */
/* .menu>li:first-child>a, .menu li + li + li li:first-child>a {
	color: #ffffff;
} */

/*]]>*/

<!--[if lte IE 6]>
/*<![CDATA[*/

/* - - - ADxMenu: BASIC styles - - - */

/*
	this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
	of course, that means that it might require different styling then.
	in which case you can use adxie class - see: aplus.co.yu/adxmenu/examples/ie6-double-style/
 */
.menu ul {
	visibility: visible;
	position: static;
}

.menu, .menu ul {	/* float.clear */
	zoom: 1;
}

.menu li.adxmhover {
	z-index: 10000;
}

.menu .adxmhoverUL {	/* li:hover>ul selector */
	visibility: visible;
}

.menu .adxmhoverUL {	/* submenu goes to the right */
	left: 100%;
}

/* - - - ADxMenu: DESIGN styles - - - */

.menu ul a {	/* fix clickability-area problem */
	zoom: 1;
}

.menu li {	/* fix white gap problem */
	float: left;
	width: 100%;
}

.menu li {	/* prevent double-line between items */
	margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {		/* li:hover>a selector */
	text-decoration: underline;
	color: #FF5C33;
}

.menu .adxmhoverUL {	/* inset submenus, to show off overlapping */
	top: 2px;
	left: 60%;
}

/*]]>*/