/* 	
	CSS document for Guides website
 	Author: 9web.co.uk - Dev version
*/

@import url(sIFR.css); /* import specific rules for flash replacement */
@import url(content.css); /* import specific rules for typography / content area */

body {font: 84%/1.4 "Trebuchet MS", Arial, Helvetica, sans-serif; background:url(../assets/htmlbg.png) repeat-y top center #4E90C2; color:#fff; text-align:center; padding:0 0 10px 0;}
body.popup {background:#fff;}
body.popup2 {background:#fff;}
html {height:100.01%;}

/* some global rules */
* {margin:0; padding:0;}
img {border:none;}
.clearfix:after, div#contentholder:after, div#footer:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
p.skip {display:none;}
/* end */

/* links */
a, a:visited {color:#000; text-decoration:underline;}
a:hover {text-decoration:none;}
a {outline:none;}
/* end links */

/* general layout rules */
div#wrapper {margin:0 auto; text-align:left; width:765px; background:url(../assets/mbg.gif) repeat-x 0 0 #A2CCE9;}
div#header {float:left; width:764px;  background:url(../assets/top-right-girls.png) no-repeat 530px 0; min-height:142px; height:auto !important; height:142px}
.home div#header {background:none; min-height:12px; height:auto !important; height:12px}
div#contentholder {clear:left;}
div#contentblock {width:692px; margin:0 36px; display:inline; float:left; background:url(../assets/blue-block-top.png) no-repeat top left #3991D2;}
div#content {padding:20px 30px 90px 30px; width:692px; w\idth:632px; background:url(../assets/blue-block-bottom.png) no-repeat bottom left; min-height:400px; height:auto !important; height:400px;}
div#flashintro {width:694px; margin:0 35px -5px 35px; display:inline; float:left;}
* + html div#flashintro {margin-bottom:0;}
* html div#flashintro {margin-bottom:0;}
div#flashcontent {padding:0px 0px 0px 32px;}
/* end general layout rules */

/* popup windows */
div#popup {float:left; width:652px; background:#3991D2; text-align:left; position:relative;}
div#popup div#content {float:left; padding:10px; width:652px; w\idth:632px; background:none;}
div#popup div#content div.yellowblockinner {min-height:580px; height:auto !important; height:560px;}
* + html div#popup div#content div.yellowblockinner {min-height:570px;}
div#poplogo {width:200px; height:86px; background:url(../assets/logo-yellowbg.png) no-repeat 0 0; position:absolute; bottom:30px; left:30px; display:block; text-indent:-999em;}
div#popup div#content div.yellowblockinner.flash {min-height:40px; height:auto !important; height:50px; padding:20px;}

div#popup2 div#content {float:left; padding:0; width:auto; background:none;}
/* end popup windows */

/* homepage layout */
div#homecontent {clear:left;}
div#homeleft {float:left; width:285px;}
div#homeright {float:left; width:479px;}
/* end homepage layout */

/* logo */
div#logo img {margin:9px 0 15px 36px;}
div#logo h1 {display:none;}
/* end logo */

/* primary navigation */
div#nav {float:left; text-transform:uppercase; width:100%;}
div#nav ul {margin:0 0 0 36px; padding:0; list-style:none; font-size:.84em; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
div#nav li {float:left; display:inline; margin:0 7px 0 0; padding:0;}
div#nav li a {display:block; width:93px; background-color:#E2E2E5; padding:1px 0; text-align:center; color:#595858; text-decoration:none;}

div#nav li a.first  {background-image:url(../assets/menu-left-corners.png); background-repeat:no-repeat; background-position:top left;}
div#nav li a.last  {background-image:url(../assets/menu-right-corners.png); background-repeat:no-repeat; background-position:top right;}

div#nav li a:hover {background-color:#4E90C2; text-decoration:none; color:#fff;}
div#nav li.active a {background-color:#F0C76D;}
div#nav li.active a:hover {background-color:#F0C76D; color:#595858;}
/* end primary navigation */

/* breadcrumb trail */
div#crumbs {float:left; font-size:0.92em; width:764px; color:#3991D2;}
div#crumbs ul {float:left; list-style-type:none; padding:12px 160px 2px 32px;}
div#crumbs ul li {float:left; padding:0 0 0 4px; white-space:nowrap;}
div#crumbs ul li a {padding:0; text-decoration:none; color:#3991D2;}
div#crumbs ul li a:hover {text-decoration:underline;}
/* end breadcrumb trail */

/* homepage elements */
div#homeleft div.panel {float:left; width:285px; margin:0 0 4px 0; padding:0;}
div#homeleft div.panelinner {padding:0px 10px 0px 50px; width:285px; w\idth:225px;}

div#homeleft div.panel.lcol1 {float:left; background:url(../assets/home-lcol1-base.png) no-repeat left bottom; padding:0 0 8px 0;}
div#homeleft div.panel.lcol1 div.panelinner {float:left; background: url(../assets/home-lcol1-top.png) no-repeat left top;}

div#homeleft .lcol2 div.panelinner {padding:0 0 0 36px; width:285px; w\idth:249px; margin:-14px 0 0 0;}
* html div#homeleft .lcol2 div.panelinner {margin:0px 0 0 0;}

div#homeleft div.panel.lcol3 {float:left; background:url(../assets/home-lcol3-base.png) no-repeat left bottom; padding:0 0 8px 0;}
div#homeleft div.panel.lcol3 div.panelinner {float:left; background: url(../assets/home-lcol3-top.png) no-repeat left top;}


div#homeright div.panel {float:left; width:479px; margin:0 0 4px 0; padding:0;}
div#homeright div.panelinner {padding:0px 47px 0px 20px; width:479px; w\idth:412px;}
div#homeright div.panelinner img {margin:0 0 0 8px;}

div#homeright div.panel.rcol1 {float:left; background:url(../assets/home-rcol1-base.png) no-repeat left bottom; padding:0 0 14px 0;}
div#homeright div.panel.rcol1 div.panelinner {float:left; background: url(../assets/home-rcol1-top.png) no-repeat left top; min-height:120px; height:auto !important; height:120px;}
div#homeright div.panel.rcol1 div.panelinner div.leftblock {float:left; width:132px;}
div#homeright div.panel.rcol1 div.panelinner div.rightblock {float:left; padding:0 155px 0 0; width:280px; w\idth:125px; min-height:135px; height:auto !important; height:135px;}

div#homeright div.panel.rcol2 {float:left; background:url(../assets/home-rcol2-base.png) no-repeat left bottom; padding:0 0 14px 0;}
div#homeright div.panel.rcol2 div.panelinner {float:left; background: url(../assets/home-rcol2-top.png) no-repeat left top;}

div#homeright div.panel.rcol3 {float:left; background:url(../assets/home-rcol3-base.png) no-repeat left bottom; padding:0 0 8px 0;}
div#homeright div.panel.rcol3 div.panelinner {float:left; background: url(../assets/home-rcol3-top.png) no-repeat left top;}
/* end homepage elements */


/* news styles */


div#newsright {width:302px; float:right;}


div#newsleft {float:left; width:302px;}


/* end news styles */


/* coloured content blocks */

div.blueblock {float:left; background: url(../assets/blue-wide-bottom.png) no-repeat left bottom #A2CCE9; width:632px;}
div.blueblockinner {float:left; background: url(../assets/blue-wide-top.png) no-repeat left top; padding:10px 20px; width:632px; w\idth:592px;}

div.blueblock.tipbox {float:right; background: url(../assets/blue-tipbox-bottom.png) no-repeat left bottom; width:280px; padding:0 0 10px 0; margin:10px 0;}
div.blueblock.tipbox div.blueblockinner {float:left; background: url(../assets/blue-tipbox-top.png) no-repeat left top #A2CCE9; padding:10px 20px 0 20px; width:280px; w\idth:240px;}

div.yellowblock {float:left; background: url(../assets/yellow-wide-bottom.png) no-repeat left bottom #F0C76D; width:632px;}
div.yellowblockinner {float:left; background: url(../assets/yellow-wide-top.png) no-repeat left top; padding:10px 20px; width:632px; w\idth:592px;}

div.yellowblock.half {margin-bottom:10px;float:left; background: url(../assets/yellow-half-bottom.gif) no-repeat left bottom; width:302px; padding:0 0 10px 0;}
div.yellowblock.half div.yellowblockinner {float:left; background: url(../assets/yellow-half-top.gif) no-repeat left top #F0C76D; padding:10px 20px 0 20px; width:302px; w\idth:262px;}

div.yellowblock.right {float:right; background: url(../assets/yellow-right-bottom.gif) no-repeat left bottom; width:231px; min-height:270px; height:auto !important; height:270px; padding:0 0 10px 0; margin:0 0 10px 10px;}
div.yellowblock.right div.yellowblockinner {float:left; background: url(../assets/yellow-right-top.gif) no-repeat left top #F0C76D; padding:10px 20px 0 20px; width:231px; w\idth:191px;}
div.yellowblock.rightnews {float:right; background: url(../assets/yellow-right-bottom.gif) no-repeat left bottom; width:302px; min-height:270px; height:auto !important; height:270px; padding:0 0 10px 0; margin:0 0 10px 10px;}

div.yellowblock.left {margin:0 28px 0 0;}

div.episodelinks {float:left; background: url(../assets/yellow-inner-bottom.png) no-repeat left bottom #F0C76D; width:592px; color:#000; margin:0 0 10px 0;}
div.episodelinks ul {float:left; background: url(../assets/yellow-inner-top.png) no-repeat left top; padding:10px 20px;}
div#content div.episodelinks ul {margin:0;}
div#content div.episodelinks ul li {padding:2px 0 2px 0px; list-style-type:none; float:left; width:92px;}
div#content div.episodelinks ul li a, div#content div.episodelinks ul li a:visited {text-decoration:none; color:#000;}
div#content div.episodelinks ul li a:hover {text-decoration:underline;}

div.badges {}
div#content div.badges ul { float:left; margin:10px 0 -6px 0; width:592px;}
div#content div.badges ul li {margin:0; padding:0 0 16px 0; list-style-type:none; float:left; width:118px; text-align:center;}
div#content div.badges ul li span {display:block; margin:4px 0 0 0;}
div#content div.badges ul li a {color:#000; width:118px; display:block; text-decoration:none;}
div#content div.badges ul li a:hover {color:#fff; text-decoration:none;}

div.imgstrip {width:632px; float:left; margin:0 0 20px 0; background: url(../assets/blue-strip-left.png) no-repeat left top;}
div#content div.imgstrip ul {float:left; margin:0 0 0 10px; display:inline; padding:10px 10px 10px 0; background: url(../assets/blue-strip-right.png) no-repeat right top #A2CCE9; min-height:116px; height:auto !important; height:136px; he\ight:116px;}
div#content div.imgstrip ul li {margin:0; padding:10px 5px 0 5px; list-style-type:none; float:left; width:auto; text-align:center;}
/* end coloured content blocks */

/* game blocks */
div.gameholder {float:left; width:306px; min-height:200px; height:auto !important; height:200px; padding:0px;}
div.gameholder.rightgame {float:right; background:none; margin:0;}
div.gameholder p {float:left; margin:4px 0 10px 0;}


/* end game blocks */

/* image/flash holder */
div.media {float:left; width:100%; margin:0 0 10px 0;}
div.center {text-align:center;}
/* end image/flash holder */


/* begin wiki styles */

#wikibook {
	background: url(../games/wikistory/wikibackground.jpg) no-repeat;
	width:100%;
	height:450px;
	margin:auto;
	overflow:auto;
	}

#wikileft {
		width:120px;
		float:left;
		margin:50px 0 0 40px;}

#wikistory {
		width:350px;
		margin:65px 0 0 215px;}
		
p.wiki {
	color:#000000;
	text-align:left;}

h3.wiki {
	color:#000000;
	padding:0;
	}

form#emf-form {margin:auto;
	}


/* end wiki styles */


/* footer */
div#footer {float:left; font-size:.84em; width:692px; margin:20px 36px 10px 36px; display:inline; padding:0 0 0 0; color:#595858;background: url(../assets/footer-bottom.png) no-repeat left bottom #fff;}
.home div#footer {margin-top:10px;}
div#footer p {margin:0;}
div#footer a {color:#3991D2; text-decoration:underline;}
div#footer a:hover {text-decoration:none;}

div#footerinner {float:left; background: url(../assets/footer-top.png) no-repeat left top;	height: 63px; padding:4px 0 0 10px; width:692px; w\idth:682px;}
div#footer p {margin:0; padding:6px 0 0 0; line-height:1;}
div#footerinner img {float:right; margin:4px 6px 0 6px;}

/* end footer */