body {margin:0px; font:12px/20px verdana, arial, tahoma, helvetica, sans-serif; color:#003366; text-align:center; background: #FFF url(../images/bg.gif) repeat-y 50% 0;}

#wrapper{
	position: relative;
	margin:0px auto 0px auto; 
	width:760px;
	text-align:left;
}
#container {width:760px; text-align:left;}
/*----------- Syles for headers ----------------*/
#header_home{
	width:760px; 
	height:335px; 
	margin:0px; padding:0; 
	background: url(../images/top/home.jpg) top no-repeat;
	border-bottom:1px solid #FFF;
}

#header_bulletin, #header_contact, #header_join, #header_members, #header_links,#header_standards, #header_workshops,#header_error,#header_newsletter, 
	#header_method,#header_faq,#header_insurance,#header_ajax {
	width:760px; 
	height:220px; 
	margin:0; padding:0; 
	border-bottom:1px solid #FFF;
}
#header_bulletin {background: url(../images/top/bulletin.jpg) no-repeat;}
#header_contact {background: url(../images/top/method.jpg) no-repeat;}
#header_join {background: url(../images/top/join.jpg) no-repeat;}
#header_members {background: url(../images/top/members.jpg) no-repeat;}
#header_method {background: url(../images/top/method.jpg) no-repeat;}
#header_standards,#header_newsletter,#header_links {background: url(../images/top/standards.jpg) no-repeat;}
#header_workshops,#header_error {background: url(../images/top/workshops.jpg) no-repeat;}
#header_faq {background: url(../images/top/faq.jpg) no-repeat;}
#header_insurance {background: url(../images/top/join.jpg) no-repeat;}
#header_ajax {background: url(../images/top/join.jpg) no-repeat;}

#logo a{position:absolute; top:20px; left:20px; padding:0px; margin:0px; background: transparent url(../images/logo.gif) no-repeat; width:228px; height:109px;}

/* Paragraph which displays on the home page banner */
#intro {width:300px; height:120px; position:absolute; top:140px; left:20px; background: url(../images/intro.gif) no-repeat; color:#FFF;}

/* ------------- title of pages ------------------------*/
h1 {font: 20pt "trebuchet MS", arial, verdana, helvetica, sans-serif; color: #FFF; letter-spacing:2px;}
#title_home {position:absolute; top:290px; left:20px; margin:0px; padding:0px;}

#title  {position:absolute; top:180px; left:20px; margin:0px; padding:0px;}

/* ------------- Top navigation  --------------*/

#navlist {
margin: 0 10px 20px 10px;
padding: 10px 0 15px 0px;
font:11px/18px  arial, verdana, tahoma, helvetica, sans-serif;
font-weight:bold;
}

#navlist ul, #navlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}


#navlist a {
float: left;
line-height: 14px;
padding: 0 10px 4px 10px;
text-decoration: none;
color: #12204C;
margin:0px;
border-bottom: 1px solid #FFF;
}

#navlist a:hover, #navlist a.here {color: #CD4617;}

/* sub navigation */

#subnavlist {
margin: 0 10px 20px 10px;
padding: 5px 0 5px 0px;
font:11px/16px  arial, verdana, tahoma, helvetica, sans-serif;
font-weight:bold;
}

#subnavlist ul, #subnavlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}


#subnavlist a {
float: left;
line-height: 14px;
padding: 0 10px 4px 10px;
text-decoration: none;
color: #12204C;
margin:0px;
border-bottom: 1px solid #FFF;
}

#subnavlist a:hover, #subnavlist a.here {color: #CD4617;}

/* ------------- Bottom navigation  --------------*/
#bottom_navcontainer {text-align:center;}
#bottom_navlist {
margin: 0 0px 20px 0px;
padding: 10px 0 20px 0px;
font:11px/20px  arial, verdana, tahoma, helvetica, sans-serif;
}

#bottom_navlist ul, #bottom_navlist li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#bottom_navlist a {
line-height: 14px;
padding: 0 10px 4px 10px;
text-decoration: none;
color: #12204C;
margin:0px;
}

#bottom_navlist a:hover {color: #CD4617;}


/*------------- content area -----------*/
#content {float:left; width:760px; margin:0px; padding:0; text-align:left; background:#F1F4F3 url(../images/content_bg.gif) repeat-x; }


#home_right {float:right; width:200px; padding: 40px 5px 20px 5px; margin:0;}
#home_left {float:left; width:535px; padding:5px 0px 20px 15px; margin:0;}

/* -- the left and right colums are used on the how to join page only --*/
#right {float:right; width:230px; padding: 10px 8px 5px 8px; margin:0px  5px 5px 5px; background: #CFD9DC; border:1px solid #FFF;}
#left {float:left;  padding:5px 0px 20px 15px; margin:5px;width: 735px;}
#main {float :left; width:700px; padding:5px 0px 20px 15px; margin:0;}


#footer {float:left; background-color:#F1F4F3; width:730px; margin:0; padding:10px 15px; border-top:1px solid #B8CCD0; font:10px arial, verdana, tahoma, sans-serif;}
#footer p.left {float:left; width:350px;}

#footer p.right {float:right; text-align:right; width:300px;}


/*------------- genearl style -----------*/
h2 {font: 18px/20px arial, verdana, helvetica, sans-serif; color: #12204C; font-weight:bold; padding:0; margin:0;}
h3 {font: 16px/18px arial, verdana, helvetica, sans-serif; color: #12204C; font-weight:bold; padding:0; margin:0;}

a{color:#CD4617; text-decoration:underline;}
a:hover {color:#152A3C; text-decoration:underline;}

.hide {display:none;}

/*------------ Call out box on home page ------------------*/
#join_box {
	float:left;
	margin: 0;
	margin:0px;
	width: 180px;
	padding: 0px;
	background: transparent url(../images/join_bg.gif) repeat-y;
	
	}
#join_box h3 {
	height: 60px;
	line-height: 18px;
	margin: 0;
	vertical-align: bottom;
	width: 180px;
	background: transparent url(../images/join_top.gif) no-repeat;
	}
#join_box p {
	background: transparent url(../images/join_bottom.gif) bottom no-repeat;
	margin: 0;
	padding: 10px 22px 40px 22px;
	font:11px/14px arial, verdana, tahoma, helvetica, sans-serif;;
	color:#FFF;
}

#join_box a {color:#FFF;}
#join_box a:hover {color:#CD4617;}

/*------------------- member table ------------------- */

table.member{
	border-top:1px solid #293C6D;
	border-left: 1px solid #293C6D;
	margin-top: 10px;
	width: 98%;
	border-collapse: collapse;
	background:#FFF;
}
.member th {
	text-align: center;
	font-weight: bold;
	border-right:1px solid #293C6D;
	border-bottom: 1px solid #293C6D;
	color: white;
	padding: 5px;
	background-color: #293C6D;
}
table.member td {
	border-right:1px solid #293C6D;
	border-bottom: 1px solid #293C6D;
	vertical-align:top;
}
td.listLabel {
	font-weight: bold;
	text-align: right;
	padding: 3px;
	white-space:nowrap;

}

td.labelCellReqd {font-weight: bold;}

/* Error Message */
div.errMsg {margin: auto;width: 500px;}
div.errMsg p,div.errMsg li,.red{color: #B22222;}
div.row,div.ed_toolbar { 
	clear: both;  
	padding-top: 5px;
	width: 100%;
	margin: 5px 0; 
}
div.label { 
	float: left; 
	margin: 0 10px 1px 0px; 
	/*font-weight: bold; */
	text-align: right; 
	width: 250px;
	
}

span.requiredErrLabel { 
	color: #B22222; 
}
span.requiredAsterik { 
	color: #B22222; 
}

table.stdForm{border-left: 1px solid #293C6D; border-top: 1px solid #293C6D; margin: auto; width: 90%;border-collapse: collapse;}
table.stdForm td,th{ border-right: 1px solid #293C6D;border-bottom: 1px solid #293C6D;}
table.stdForm td.label{text-align: right; padding: 3px 10px 3px 0; width: 250px;vertical-align: top;}
table.stdForm td.html{ padding: 5px 0 5px 5px;}
table.stdForm tr.headerRow th{text-align: center;padding: 5px 0;} 

.center{text-align: center;}

a.info{
    position:relative; /*this is the key*/
    z-index:24;
    color: #293C6D;    
}

a.info:hover{z-index:25; background-color:#cfcfcf;}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #293C6D;
    background-color: #cfcfcf; 
    text-align: center}
    
#popupContent{background-image: none;background-color:#FFF;}