/* ============================ common ============================== */

body { 
	color: #000; background: #6b8294 url("../img/ui/bg-body.jpg") repeat-x 50% 0;
	font: normal 69% Verdana, Tahoma, Arial, sans-serif;
}

a{ color: #900; text-decoration: none; }
a:hover{ text-decoration: underline; }
a:active, a:focus { color: #fff; background: #900; text-decoration: none; }

img { display: block; }
a img { border: none; }
a span { cursor: pointer; }

#sub-nav:after,
#members-nav:after,
#content:after,
.block:after,
.col4:after,
.col3:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#sub-nav,
#members-nav,
#content,
.block,
.col4,
.col3{ display: inline-table; display: block; height: 1%; }

.clear{ display: block; clear: both; }

.aural{ 
	position: absolute; 
	left: -9999px; 
	font-size: 0;
}

/* headers */

#content h2 { position: relative; height: 40px; margin: 0; padding: 0 0 0 10px; background: #900 url(../img/ui/bg-h2.gif) repeat-x; color: #fff; font: normal 20px/40px Impact,sans-serif; }
 #content h2 a { position: absolute; top: 12px; right: 10px; color: #fff; font: 0.6em/1.2 Verdana,sans-serif; font-weight: bold; }
#content p.sfr { display: inline; position: relative;  float: right; margin: -27px 10px 0 0; padding: 0; color: #fff; font-size: 1.09em; font-weight: bold; }
 #content p.sfr a { color: #fff; }

#content h2.flash-replaced { height: 36px; padding-top: 4px; }
 .flash-replaced div.alt { display: none; }
 /*.flash-replaced embed { display: block; width: 100%; margin: 0 auto; }*/
 

/*
#content h2{
	position: relative;
	height: 32px;
	padding: 8px 0 0 10px;
	color: #fff; background: #900 url("../img/ui/bg-h2.gif") repeat-x 0 0;
	font: 1.8em Impact,sans-serif;
}
#content h2 a{
	position: absolute;
	top: 12px; right: 10px;
	font-size: 0.6em; font-weight: bold;
	color: #fff;
}
#content h2 a:active,
#content h2 a:focus { color: #900; background: #fff; text-decoration: none; }
#content h2 span{
	position: absolute;
	top: 0; left: 0;
	width: 252px; height: 100%;
}
#content h2.h2-recent-updates 	span{ background:  url("../img/ui/h2-recent-updates.gif") no-repeat 0 0; }
#content h2.h2-free-stuff	 	span{ background:  url("../img/ui/h2-free-stuff.gif") no-repeat 0 0; }
#content h2.h2-latest-blog	 	span{ background:  url("../img/ui/h2-latest-blog.gif") no-repeat 0 0; }
#content h2.h2-whats-inside	 	span{ background:  url("../img/ui/h2-whats-inside.gif") no-repeat 0 0; }
#content h2.h2-preview 			span{ background:  url("../img/ui/h2-preview.gif") no-repeat 0 0; }
#content h2.h2-our-heroines		span{ background:  url("../img/ui/h2-our-heroines.gif") no-repeat 0 0; }
#content h2.h2-join 			span{ background:  url("../img/ui/h2-join.gif") no-repeat 0 0; }
#content h2.h2-members-home 	span{ background:  url("../img/ui/h2-members-home.gif") no-repeat 0 0; }
#content h2.h2-comic-books	 	span{ background:  url("../img/ui/h2-comic-books.gif") no-repeat 0 0; }
#content h2.h2-gallery 			span{ background:  url("../img/ui/h2-gallery.gif") no-repeat 0 0; }
#content h2.h2-next-update	 	span{ background:  url("../img/ui/h2-next-update.gif") no-repeat 0 0; }
#content h2.h2-video-clips  	span{ background:  url("../img/ui/h2-video-clips.gif") no-repeat 0 0; }
*/

h3{
	padding: 15px;
	color: #9c0000; background: #fff;
	font-size: 2.2em; font-weight: bold;
	text-align: center;
}

/* ========================== common end ============================ */

/* ============================ layout ============================== */

#holder{
	position: relative;
	width: 70.91em; min-width:780px; max-width: 98%;
	margin: 0 auto;
}

#header{ width: 100%; height: 132px; }

#content{ margin: 2em 0; }

#main{
	float: left;
	width: 68%;
	margin: 0 0 1em 0;
}

#side-bar{
	float: right;
	width: 30%;
	margin: 0 0 1em 0;
	background: #fff;
}

.block{ 
	margin: 0 0 2em 0; padding: 1em 0;
	background: #fff;
}
.block li{ margin: 0 0 1em 0; }

.col4 li{
	float: left;
	width: 25%;
}

.col3 li{
	float: left;
	width: 33%;
	text-align: center;
}

.col4 li.separate, .col3 li.separate{
	overflow: hidden;
	float: none;
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0;
	text-indent: -10001em;
}

#footer{ 
	clear: both;
	width: 100%;
	color: #fff; background: #003863 url("../img/ui/bg-footer.gif") 0 0 no-repeat;
}

/* ========================== layout end ============================ */

/* =========================== skiplinks ============================ */

#skiplinks{ 
	position: absolute;
	height: 1.5em;
	list-style: none;
}
#skiplinks a{ 
	position: absolute; 
	left: -9999px; 
	padding: 0.3em;
	font-size: 0; font-weight: bold;
	border: 2px solid #fff;
	white-space: nowrap;
}
#skiplinks a:active, 
#skiplinks a:focus { 
	top: 0; left: 0; 
	font-size: 1em;
	color: #fff;
}

/* ========================= end skiplinks ========================== */

/* ============================ header ============================== */

#navigation{
	width: 633px;
	margin: 0 auto; padding: 97px 0 0 0;
}
#navigation li{
	float: left;
	height: 35px;
}
#navigation li a{
	display: block; position: relative;
	height: 35px;
	color: #ff0;
}
#navigation li a span{
	position: absolute;
	width: 100%; height: 100%;
}
#navigation li.nav-home 			a{ width: 65px; }
#navigation li.nav-previev 			a{ width: 81px; }
#navigation li.nav-join 			a{ width: 57px; }
#navigation li.nav-members 			a{ width: 97px; }
#navigation li.nav-superheroines 	a{ width: 130px; }
#navigation li.nav-blog 			a{ width: 56px; }
#navigation li.nav-links 			a{ width: 60px; }
#navigation li.nav-contact 			a{ width: 87px; }

#navigation li.nav-home 			a span{ background:  url("../img/ui/nav-home.gif") no-repeat 0 0; }
#navigation li.nav-previev 			a span{ background:  url("../img/ui/nav-preview.gif") no-repeat 0 0; }
#navigation li.nav-join 			a span{ background:  url("../img/ui/nav-join.gif") no-repeat 0 0; }
#navigation li.nav-members 			a span{ background:  url("../img/ui/nav-members.gif") no-repeat 0 0; }
#navigation li.nav-superheroines 	a span{ background:  url("../img/ui/nav-superheroines.gif") no-repeat 0 0; }
#navigation li.nav-blog 			a span{ background:  url("../img/ui/nav-blog.gif") no-repeat 0 0; }
#navigation li.nav-links 			a span{ background:  url("../img/ui/nav-links.gif") no-repeat 0 0; }
#navigation li.nav-contact 			a span{ background:  url("../img/ui/nav-contact.gif") no-repeat 0 0; }

#navigation li a:hover span,
#navigation li a:focus span,
#navigation li a:active span{ background-position: 0 100%; }

/* ========================== header end ============================ */

/* ============================ content ============================= */

#sub-nav{ margin: 0 0 0 1.2em; }
#sub-nav li{
	float: left;
}
#sub-nav li a{
	display: block;
	margin: 0 0.5em 0 0; padding: 0.5em 1em;
	color: #000; background: #ffcf31;
	border: 1px solid #9c0000;
	text-decoration: none;
}
#sub-nav li a:hover,
#sub-nav li a:focus,
#sub-nav li a:active,
#sub-nav li.current a{
	color: #fff; background: #9c0000;
}

#members-nav{ width: 59em; margin: 0 auto 1em auto; }
#members-nav li{
	float: left;
}
#members-nav li a{
	display: block;
	margin: 0 0.5em 0 0; padding: 0.5em 1em;
	color: #000; background: #ffcf31;
	border: 1px solid #9c0000;
	text-decoration: none;
}
#members-nav li a:hover,
#members-nav li a:focus,
#members-nav li a:active,
#members-nav li.current a{
	color: #fff; background: #9c0000;
}

.h1-main-title{
	position: relative;
	width: 100%; height: 47px;
}
.h1-main-title span{
	position: absolute;
	width: 100%; height: 100%;
	/*background:  url("../img/ui/h1-main-title.gif") no-repeat 0 0;*/
}

.headline{
	position: relative;
	width: 100%;
	margin: 0 0 2em 0;
	color: #fff; background: #024991 url("../img/ui/bg-headline.gif") repeat-x 0 0;
	
}

.headline h1 {
	display: block;
	margin: 0 20px;
	padding: 15px 0 0;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-transform: capitalize;
	}
	
.headline h3{
	margin: 0 20px 5px 20px; padding: 1em 0 0 0;
	font-size: 1.1em; font-weight: bold;
	color: #fff; background: none;
	text-align: left;
}
.headline p{ margin: 0 20px;  padding: 0 0 1em 0; line-height: 140%;}

#image-rotator{
	height: 245px;
	/*margin: 0 20px;*/
	margin: 10px 20px 0 20px;
	/*background: url("../img/bg-rotator.gif") no-repeat 100% 0;*/
}
#image-rotator li{
	width: 498px; height: 223px;
	border: 1px solid #fff;
}

.headline ol.action {
	position: absolute;
	top: 43px;
	right: 20px;
	list-style: none;
	width: 214px;
	height: 225px;
	margin: 0;
	padding: 3px 3px 0;
	background: url("../img/ui/calltoaction.gif") no-repeat 100% 0;	
}

.headline ol.action li {
	float: left;
	width: 100%;
	height: 51px;
	margin: 0 0 4px;
	padding: 0;
}

.headline ol.action li a {
	overflow: hidden;
	float: left;
	width: 100%;
	height: 51px;
	text-indent: -10001em;
}

.block h3{
	margin: 0 10px 10px 10px; padding: 0;
	color: #9c0000;
	font-size: 1.6em; font-weight: bold;
	text-align: left;
}
.block h3.big{ font-size: 2.2em; text-align: center; }
.block p{ margin: 0 10px 15px 10px; font-size: 12px; line-height: 140%; color: #333;}

.block li img{
	margin: 0 auto; padding: 1px;
	border: 1px solid #003467;
}
.block li a:hover img{ border: 1px solid #9c0000; }
.block li a:focus img,
.block li a:active img{ padding: 0; border: 2px solid #9c0000; }
.block li small{
	display: block;
	margin: 0.5em 20px 0 20px;
	font-size: 0.9em; text-transform: uppercase;
	color: #333;
}
.block li h3{
	margin: 0.5em 20px 0 20px; padding: 0;
	font-size: 1.1em; font-weight: bold;
	text-align: left;
}
.block li p{
	margin: 0.5em 20px 0 20px;
}

.block ul.preview {
	list-style-type: square;
	text-align: left;
	margin: 10px 10px 10px 25px;
	padding: 0;
	padding-left: 15px;
	width: 300px;
	background-color: #FF0000;
	display: block;
	}
	
.block ul.preview li {
	font-size: 13px;
	font-weight: bold;
	line-height: 130%;
	}

.col3 li h3{
	margin: 0 0 0.5em 0; padding: 0;
	font-size: 1.4em; font-weight: normal; text-align: center;
	color: #333;
}
.col3 li h3 strong{
	display: block;
	margin: 0 auto;
	font-size: 1.2em; font-weigth: normal;
}
.col3 li a{ font-weight: bold; }
.col3 li p{ text-align: left; }
.col3 li ul{ margin: 0.5em 20px 0 20px; }
.col3 li ul li{
	float: none;
	width: 90%;
	margin: 0; padding: 0 0 0 8px;
	background:  url("../img/ui/square-black.gif") no-repeat 0 0.5em;
	text-align: left;
}

.col3 ul.large {
	margin-top: 15px;
	}
	
.col3 ul.large li {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	}
	

.block img.left{
	float: left;
	margin: 0 10px; padding: 1px;
	border: 1px solid #9c0000;
}
.block img.right{
	float: right;
	margin: 0 10px; padding: 1px;
	border: 1px solid #9c0000;
}

.text-right{
	margin: 0 1em 1em 420px;
}
.text-right h3{ color: #036; }
.text-right h4{
	padding: 0.5em 10px;
	color: #036;
	font-size: 1.4em; font-weight: bold;
}
.text-right ul{ margin: 0.5em 20px 0 20px; }
.text-right li{
	float: none;
	width: 90%;
	margin: 0; padding: 0 0 0 8px;
	background:  url("../img/ui/square-black.gif") no-repeat 0 0.5em;
	text-align: left;
}

.text-join{
	margin: 0 1em 1em 360px;
}
.text-join h4{
	padding: 0.5em 10px;
	color: #9c0000;
	font-size: 1.4em; font-weight: bold;
}
.text-join p{ margin-bottom: 0.5em; }
.text-join p strong{
	display: block;
	color: #9c0000;
	font-size: 1.4em; font-weight: bold;
	text-align: center;
}
.text-join ul{ margin: 0 20px 0.5em 20px; }
.text-join li{
	float: none;
	width: 90%;
	margin: 0; padding: 0 0 0 8px;
	background:  url("../img/ui/square-black.gif") no-repeat 0 0.5em;
	text-align: left;
}

.text-members{
	margin: 0 1em 1em 160px;
}
.text-members h3{ color: #036; }
.text-members h4{
	padding: 0.5em 10px;
	color: #036;
	font-size: 1.4em; font-weight: bold;
}
.text-members p{
	margin-bottom: 0.5em;
	font-size: 1.1em;
}
.text-members ul{ margin: 0 20px 0.5em 20px; }
.text-members li{
	float: none;
	width: 90%;
	margin: 0; padding: 0 0 0.3em 8px;
	background:  url("../img/ui/square-black.gif") no-repeat 0 0.5em;
	font-size: 1.1em; text-align: left;
}
.text-members li a{ }
.text-members li a:focus,
.text-members li a:active{ }
.text-members li strong{
	color: #9c0000;
	font-weight: bold;
	text-transform: uppercase;
}

.wrapper { clear: both; overflow: hidden; width: 100%; }
.join-now-link{ float: left; }
.preview-link{ float: right; }
a.bottom-link{
	display: block;
	mergin: 0 0 1em 0; padding: 0.7em 1em;
	font-size: 2em;
	color: #9c0000; background: #ffcf31;
	border: 1px solid #9c0000;
	text-align: center;
}
a.bottom-link:focus,
a.bottom-link:active{
	color:#fff; background: #9c0000;
}

.left{
	float: left;
}

.right{
	float:right;
}

.right strong{
	display: block;
	margin: 0 10px 10px 10px;
	font-weight: bold;
}

table.video{
	margin: 10px;
	color: #036;
}
table.video th{
	padding: 0 10px 5px 0;
	font-weight: bold;
	text-align: left;
}
table.video td{
	padding: 0 10px 5px 0;
	text-align: left;
}

p.type {
	font-size: 9px;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #333;
	padding: 4px;
	background-color: #FFBF15;
	text-transform: uppercase;
	display: block;
	}
	
#pricing {
	background-color: #FFB600;
	width: 360px;
	margin: 10px 0 10px 20px;
	padding: 10px;
	list-style: none;
	font-size: 12px;
	}
	
#pricing ul {
	list-style: none;
	}
	
#pricing ul li {
	list-style: none;
	padding-left: 0; 
	background: none;
	padding-bottom: 6px;
	}

#pricing ul li strong {
	font-weight: bold;
	}	
	
ul.basic {
	font-size: 12px;
	}
	
ul.basic li {
	margin-bottom: 5px;
	}
	
ul.preview {
	font-size: 16px;
	display: block;
	list-style-type: square;
	float: none;
	
	}
	
ul.preview li {
	margin-bottom: 8px;
	}
	
body ul.sitemap { list-style: none; margin: 0 0 10px; padding: 0 0 0 15px; }
 body ul.sitemap li { margin: 5px 0 0; font-size: 12px; }
  body ul.sitemap li ul { padding: 0 0 0 15px; }
  
ul.a { list-style-type: square; list-style-position: inside; margin: 0 0 10px; padding: 0 0 0 15px; }
 
/* ========================== content end =========================== */

/* =========================== side-bar ============================= */

/*#side-bar h2{
	height: 1.3em;
	margin: 0; padding: 10px;
	color: #fff; background: #012f5c;
	font-size: 1.1em; font-weight: bold;
	text-transform: uppercase;
}*/
#side-bar h2{
	position: relative;
	height: 32px;
	padding: 8px 0pt 0pt 10px;
	background: #900 url(../img/ui/bg-h2.gif) -546px 0 repeat-x;
	color: #FFF;
	font-size: 1.6em;
	line-height: 22px;
}

#side-bar h2 span { position: absolute; top: 0; left: 0; width: 234px; height: 100%; }
#side-bar h2.h2-list span { background:  url("../img/ui/h2-list.gif") no-repeat 0 0; }



#side-bar ul{ margin: 1em 10px; }
#side-bar li{
	margin: 0; padding: 0 0 0.2em 8px;
	background:  url("../img/ui/square.gif") no-repeat 0 0.5em;
	text-align: left;
}

/* ========================= side-bar end =========================== */

/* ============================= footer ============================= */

#footer h2{
	margin: 0 20px 10px 20px;
	font-size: 0.9em; font-weight: bold; text-transform: uppercase; padding-bottom: 5px;
	border-bottom: 1px solid #fff;
}
#newsletter-form{
	float: left;
	width: 49%;
	margin: 20px 0;
}
#newsletter-form fieldset{ margin: 0 20px 20px 20px; }
#newsletter-form label{
	display: block;
	margin: 0 0 1em 0;
}

#links{
	float: right;
	width: 49%;
	margin: 20px 0;
}
#links ul{ margin: 0 20px 1em 20px; }
#links li{
	padding: 0 0 0.3em 10px;
	background:  url("../img/ui/square.gif") no-repeat 0 0.5em;
}
#links li a{ color: #fff; }

#bottom-nav{
	clear: both;
	padding: 2em 0;
	width: 100%;
	background: #6b8294;
	text-align: center;
}
#bottom-nav li{
	display: inline;
	padding: 0 0.7em;
	border-left: 1px solid #fff;
}
#bottom-nav li:first-child{ border: none; }
#bottom-nav li a{ color: #fff; }

/* =========================== footer end =========================== */

ul.b { list-style: none; margin: 0 10px 10px; padding: 0; }
 ul.b li { margin: 3px 0 0; color: #900; }
  ul.b li ul { list-style-type: disc; margin: 0 0 0 20px; padding: 0; }