/* 
	Main styles for MaureenBush.com
	Derek Mah, November 2008

	external background 00154b
	text faffab
	link bdfdff
	black 070120

*/
	
/* 
====================
	Set defaults
====================
 */
* {margin: 0px; padding: 0px;}
body {
	background: url(body_bkg.png) left top repeat-x #00154b;
	font: 14px "lucida grande", "trebuchet", "trebuchet ms", "geneva", "arial", "helvetica", sans-serif;
	font-weight: normal; font-style: normal;
	color: #faffab;
	text-decoration: none;
	text-align: center;
	}
img {display: inline; vertical-align: baseline;}
a img {border: none;}
table, tr, td {border-collapse: collapse;}
td {vertical-align: top;}
/* 	h1 title
	h2 header
	h3 header same as h2 but without a bottom margin
	h4 bold italic, usually as a header
	h5 header same as h2 but without a top margin
	h6 right aligned quote source
 */
h1, h2, h3, h4, h5, h6, p {margin: 1.25em 0em 1.25em 0em;}
h1 {
	font-size: 1.8em; font-weight:bold;
	}
h2 {
	font-size: 1.25em;
	font-weight: bold;
	}
h3 {
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: -0.80em;
	}
h4 {
	font-size: 1.1em;
	font-weight: bold; font-style: italic;
	}
h5 {
	font-size: 1.25em;
	font-weight: bold;
	margin-top: -1.75em;
	}
h6 {
	font-size: 0.9em;
	font-weight: bold;
	text-align: right;
	}
p {
	line-height: 1.25em;
	}
hr {
	color: #4e7395; background-color: #4e7395; height: 2px; border: solid 1px #4e7395;
	border-right-color: #070120; border-bottom-color: #070120;
	}
.chunky {
	font-weight: bold;
	}
.smalltext {
	font-size: 0.9em;
	}
a:link, a:visited {
	color: #bdfdff;
	text-decoration: none;
	}
a:active, a:hover {
	color: #fafcff;
	text-decoration: none;
	}

/* 
====================
	content
	
	#mb_content uses a class to add a book bkg and pad content
	vertical positioning of mb_zoompic button can be locally defined. Default places it just below a 400px image.
	.mb_flowcontrol places a floated div to force text to wrap around a background image. Dimensions should be locally defined.
====================
 */
#mb_content {
	position: relative; overflow: visible;
	margin: 100px 15% 100px 250px;
	text-align: left;
	}
#mb_content .mb_zoompic {
	position: absolute; left: 0px; top: 470px;
	width: 200px;
	text-align: right;
	}
#ieeeeee #mb_content .mb_zoompic {
	margin-left: -250px;
	}
.mb_flowcontrol {
	float: right; width: 350px; height: 375px;
	}
.cursed {
	background: url(bkg_cover_cursed.jpg) left 70px no-repeat transparent;
	padding-left: 250px; min-height: 500px;
	}
.featherbrain {
	background: url(bkg_cover_featherbrain.jpg) left 70px no-repeat transparent;
	padding-left: 250px; min-height: 500px;
	}
.thenexusring {
	background: url(bkg_cover_thenexusring.jpg) left 70px no-repeat transparent;
	padding-left: 250px; min-height: 500px;
	}
.crowboy {
	background: url(bkg_cover_crowboy.jpg) left 70px no-repeat transparent;
	padding-left: 250px; min-height: 500px;
	}
/* we need to set margin-right: 10px in thenexusringmap and crowboymap, but seems to be ignored here, so we are imposing it locally in the php file */
.thenexusringmap, .crowboymap {
	background-image: none;
	}
.thenexusringmap #themap {
	background: url(../_book_thenexusring/map.gif) left top no-repeat transparent;
	margin-left: auto; margin-right: auto; padding: 600px 0px 0px 0px; width: 862px; position: relative;
	}
.crowboymap #themap {
	background: url(../_book_crowboy/map.gif) left top no-repeat transparent;
	margin-left: auto; margin-right: auto; padding: 600px 0px 0px 0px; width: 862px; position: relative;
	}
#themap a.maplink {
	display: block; width: 12px; height: 12px; position: absolute;
	border: solid 1px #777b79;
	}
 #themap a.maplink:link, #themap a.maplink:visited {
	border: solid 1px #cc0000;
	}
 #themap a.maplink:hover, #themap a.maplink:active {
	border: solid 1px #777b79;
	}
#bkg_bio {
	position: absolute; top: 0px; right: 0px;
	width: 600px; height: 562px;
	background: url(/_bio/index_hammock.gif) right top no-repeat transparent;
	}
#bkg_bio div {
	position: absolute; top: 425px; right: 20px;
	width: 300px;
	text-align: right;
	font-size: 0.9em;
	}
.bio {
	min-height: 562px;
	}
#mb_content ul, 
#mb_content ol {
	margin-bottom: 1.25em;
	margin-left: 1.5em;
	}
#mb_content li {
	margin: 0em 0em 1.0em 1.0em;
	}
#mb_content ul ul, 
#mb_content ol ul {
	list-style: none;
	margin-left: 0.5em;
	}
#mb_content ul ul li, 
#mb_content ol ul li, 
#mb_content ol ol li {
	font-size: 0.8em;
	font-weight: normal;
	}
.mb_pagebreak {
	margin: 2.50em 0em 0em 0em;
	padding-right: 20px;
	text-align: center;
	clear: both;
	}

.mb_audiosamples {
	border: solid 1px #4e7395;
	margin: 0.00em 0.00em 2.50em 0.00em;
	-webkit-box-shadow: 0px 0px 20px rgba(189, 253, 255, 1.0);
	-moz-box-shadow: 0px 0px 20px rgba(189, 253, 255, 1.0);
	}
.mb_audiosamples tr {
	border-bottom: solid 1px #4e7395;
	background: url(/_assets/bkg_tr_light.gif) left -20px repeat-x #00154b;
	}
.mb_audiosamples td {
	vertical-align: middle;
	padding: 5px 20px 5px 0px;
	}
.mb_audiosamples .mb_flash {
	padding: 10px 15px 0px 15px;
	}
.mb_audiosamples h2 {
	font-size: 14px; font-weight: bold;
	}
.mb_audiosamples h2, 
.mb_audiosamples p {
	margin: 0px; padding: 0px;
	}
.mb_audiosamples .mb_buttonx {
	font-size: 9px;
	line-height: 1.25em;
	}

/* 
====================
	links
====================
 */
a.mb_button {
	margin: 0em 0.2em 0em 0.2em;
	border: solid 1px #bdfdff;
	background-color: #00154b;
	padding: 0.10em 0.5em 0.20em 0.5em;
	font-weight: normal; font-size: 11px; letter-spacing: 1px;
	white-space: nowrap; line-height: 2.50em;
	}
a.mb_button:link, 
a.mb_button:visited {
	border-color: #bdfdff;
	background-color: #00154b;
	text-decoration: none;
	}
a.mb_button:hover, 
a.mb_button:active {
	border-color: #fafcff;
	background-color: #070120;
	text-decoration: none;
	}
a.mb_hoverbox {
	position: relative;
	}
a.mb_hoverbox span {
	display: none; white-space: normal; letter-spacing: 0px; font-size: 12px; line-height: 16px; font-weight: normal;
	}

/* 
	using 'background' rather than 'background-color' in a.mb_hoverbox:hover span as 'background-color' seems to make IE7 make the background fully transparent

 */
a.mb_hoverbox:hover span {
	display: block; padding: 10px 10px 15px 10px; width: 200px;
	position: absolute; right: -5px; bottom: -5px; text-align: center; color: #bdfdff;
	background-color: #00051b; border: 1px solid #bdfdff;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, 1.0), 0px 0px 1px rgba(0, 0, 0, 1.0), 0px 0px 1px rgba(0, 0, 0, 1.0);
	-webkit-box-shadow: 0px 0px 20px rgba(189, 253, 255, 1.0); -webkit-border-radius: 6px;
	-moz-box-shadow: 0px 0px 20px rgba(189, 253, 255, 1.0); -moz-border-radius: 6px;
	border-color: rgba(189, 253, 255, 0.8); background: rgba(0, 5, 27, 0.90);
	}

/* IE6 seems to choke on the hoverbox, so we'll hide it for now */

#ieeeeee .ie6_noplay {
	display: none;
	}


/* 
====================
	contact form
====================
 */
.mb_form, 
.mb_form input, 
.mb_form textarea {
	font: 12px "lucida grande", "trebuchet", "trebuchet ms", "geneva", "arial", "helvetica", sans-serif;
	font-weight: normal; font-style: normal;
	color: #0d2229;
	text-decoration: none;
	}
.mb_form input, 
.mb_form textarea {
	border: solid 1px #070120;
	background-color: #fafff4;
	padding-left: 0.25em;
	color: #00154b;
	}
.mb_form textarea {
	overflow: auto;
	}

/* 
====================
	nav
	
	nav_bkg.gif redundantly placed in background of #mb_nav to prevent blink effect in ieeeeee.
	nav_bkg.png redundantly placed in background mf #mb_nav ul to prevent blink effect in ieeeeee.
====================
 */
#mb_nav {
	position: absolute; top: 0px; left: 0px; width: 230px;
	}
#mb_nav a {
	display: block; width: 230px;
	background: url(/_assets/nav_bkg3.png) left top no-repeat transparent;
	}
#ieeeeee #mb_nav {
	background: url(/_assets/nav_bkg3.png) left top no-repeat transparent;
	}
a#mb_headercritter:link, 
a#mb_headercritter:visited {
	height: 110px;
	background-position: 0px 0px;
	}
a#mb_headercritter:hover, 
a#mb_headercritter:active {
	height: 110px;
	background-position: -250px 0px;
	}
a#mb_logo:link, 
a#mb_logo:visited {
	height: 83px; top: 110px;
	background-position: 0px -110px;
	}
a#mb_logo:hover, 
a#mb_logo:active {
	height: 83px; top: 110px;
	background-position: -250px -110px;
	}
a#nav_featured:link, 
a#nav_featured:visited {
	height: 219px; top: 193px;
	background-position: 0px -193px;
	}
a#nav_featured:hover, 
a#nav_featured:active {
	height: 219px; top: 193px;
	background-position: -250px -193px;
	}
a#nav_featherbrain:link, 
a#nav_featherbrain:visited {
	height: 30px; top: 410px;
	background-position: 0px -412px;
	}
a#nav_featherbrain:hover, 
a#nav_featherbrain:active {
	height: 30px; top: 410px;
	background-position: -250px -412px;
	}
a#nav_crowboy:link, 
a#nav_crowboy:visited {
	height: 28px; top: 440px;
	background-position: 0px -442px;
	}
a#nav_crowboy:hover, 
a#nav_crowboy:active {
	height: 28px; top: 440px;
	background-position: -250px -442px;
	}
a#nav_thenexusring:link, 
a#nav_thenexusring:visited {
	height: 28px; top: 470px;
	background-position: 0px -470px;
	}
a#nav_thenexusring:hover, 
a#nav_thenexusring:active {
	height: 28px; top: 470px;
	background-position: -250px -470px;
	}
a#nav_blog:link, 
a#nav_blog:visited {
	height: 28px; top: 498px;
	background-position: 0px -498px;
	}
a#nav_blog:hover, 
a#nav_blog:active {
	height: 28px; top: 498px;
	background-position: -250px -498px;
	}
a#nav_bio:link, 
a#nav_bio:visited {
	height: 28px; top: 526px;
	background-position: 0px -526px;
	}
a#nav_bio:hover, 
a#nav_bio:active {
	height: 28px; top: 526px;
	background-position: -250px -526px;
	}
a#nav_contact:link, 
a#nav_contact:visited {
	height: 28px; top: 554px;
	background-position: 0px -554px;
	}
a#nav_contact:hover, 
a#nav_contact:active {
	height: 28px; top: 554px;
	background-position: -250px -554px;
	}
a#nav_stegy:link, 
a#nav_stegy:visited {
	height: 115px; top: 582px;
	background-position: 0px -582px;
	}
a#nav_stegy:hover, 
a#nav_stegy:active {
	height: 115px; top: 582px;
	background-position: -250px -582px;
	}
a#nav_hwcyg:link, 
a#nav_hwcyg:visited {
	height: 125px; top: 697px;
	background-position: 0px -697px;
	}
a#nav_hwcyg:hover, 
a#nav_hwcyg:active {
	height: 125px; top: 697px;
	background-position: -250px -697px;
	}

/* 
====================
	footer
====================
 */
#mb_footer {
	margin: 100px 210px 40px 210px;
	text-align: center;
	font-size: 11px;
	}
 /* 
====================
	frontpage
====================
 */
#mb_fpcontent {
	position: relative; overflow: visible;
	margin: 10px 5% 100px 250px;
	padding-top: 250px; padding-right: 10%; min-height: 337px;
	text-align: left;
	background: url(../_frontpage/frontpage.gif) top right no-repeat transparent;
	}
#mb_logo_nolink {
	display: block; width: 230px; height: 83px; top: 110px;
	background: url(/_assets/nav_bkg3.png) 0px -110px no-repeat transparent;
	}
.newsbox {
	min-width: 500px;
	margin-top: 2.50em; padding: 1px; border: solid 1px #f1dd78;
	overflow: hidden;
	}
.newsbox .fpicon_cursed {
	margin: 0px 10px 0px 5px;
	vertical-align: -26px;
	}
.newsbox .fpicon_crowboy {
	margin: 0px 5px 0px 0px;
	vertical-align: -10px;
	}
.default {
	height: 300px; padding: 0px 10px 10px 10px; border: solid 1px #000000;
	background: url(/_assets/newsbox_bkg.png) left top repeat transparent;
	overflow: auto;
	}
#halloween {
	width: 215px; height: 265px; float: right;
	background: url(/_assets/dragon_pumpkin.gif) right bottom no-repeat transparent;
	}
#contest {
	width: 200px; padding: 20px 0px 10px 20px; float: right;
	}

 /* 
====================
	spellbook contest
====================
 */
a#spellbookcontest {
	display: block; width: 190px; height: 115px;
	background: url(/_book_featherbrain/contest_active.gif) center 0px no-repeat transparent;
	}
a#spellbookcontest:link, 
a#spellbookcontest:visited {
	background-position: center 0px;
	}
a#spellbookcontest:hover, 
a#spellbookcontest:active {
	background-position: center -150px;
	}
a#spellbookcontestwinner {
	display: block; width: 190px; height: 115px;
	background: url(/_book_featherbrain/contest.gif) center 0px no-repeat transparent;
	}
a#spellbookcontestwinner:link, 
a#spellbookcontestwinner:visited {
	background-position: center 0px;
	}
a#spellbookcontestwinner:hover, 
a#spellbookcontestwinner:active {
	background-position: center -150px;
	}