/* CSS Document */
/* ------------------------------------------------------------
		Main/top level
------------------------------------------------------------ */
/* Define custom fonts */
@font-face {
	font-family: SpicyRice-Regular;
	src: url(SpicyRice-Regular.otf);
	src: local(SpicyRice-Regular), url(SpicyRice-Regular.otf) format('opentype');
}

body {
	background: #79C6DF; /* Fallback for older browsers. Like, those that can't do images. */
	background: url(../img/headerbg.jpg) top repeat-x; /* Fallback for fallback */
	
	background:
		url(../img/cloud_top.png) repeat-x scroll 40% 0px,
		url(../img/cloud_mid.png) repeat-x scroll 100% 126px,
		url(../img/cloud_bottom.png) repeat-x scroll 20% 227px,
		#79C6DF; /* Default fallback */
	
	background:
		url(../img/cloud_top.png) repeat-x scroll 40% 0px,
		url(../img/cloud_mid.png) repeat-x scroll 100% 126px,
		url(../img/cloud_bottom.png) repeat-x scroll 20% 227px,
		-moz-linear-gradient(top, #457eae 0%, #79c6df 70%), /* FF3.6+ */
		#79C6DF;
	
	background:
		url(../img/cloud_top.png) repeat-x scroll 40% 0px,
		url(../img/cloud_mid.png) repeat-x scroll 100% 126px,
		url(../img/cloud_bottom.png) repeat-x scroll 20% 227px,
		-webkit-linear-gradient(top, #457eae 0%,#79c6df 70%), /* Chrome10+,Safari5.1+ */
		#79C6DF;
	
	background:
		url(../img/cloud_top.png) repeat-x scroll 40% 0px,
		url(../img/cloud_mid.png) repeat-x scroll 100% 126px,
		url(../img/cloud_bottom.png) repeat-x scroll 20% 227px,
		linear-gradient(top, #457eae 0%,#79c6df 70%), /* W3C */
		#79C6DF;
	
	
	
	/*background-size: auto contain cover;*/
	font-family: Verdana, Geneva, sans-serif;
	width: 100%;
	height: 100%;
}

section {
	background: #d0e5ff;
}

form {width: 100%; padding-bottom: .5em; padding-top: .25em; font-weight: bold;}
form:after, #mainBody_parent:after {content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;}
label {display: block;float: left; width: 25%; padding: 7px 10px 7px 0px; text-align: right;}
input[type="email"],
input[type="text"],
input[type="password"],
input[type="file"],
textarea {padding: 4px; margin: 2px 1px; border: 1px solid #009590; border-radius: 5px; width: 70%; max-width: 70%;}
.buttonAligner { text-align: left; padding-left: 25%;} /* padding-left = label width + padding of either side (to align the buttons to the left of the inputs) */
input[type=submit] {float: none; width: auto; margin-left: 0px; margin-right: 0px;}

.clear:after,
section:after,
article:after {content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;}

header, #content, #preFooter, footer {
	min-width: 50em;
	width: 70%;
	padding: 0px 15%;
}

#login {
	position: fixed;
	top: 5px;
	right: 5px;
	width: 317px;
	height: 144px;
	background: url(../img/userCloud.png);
	z-index: 999;
}
#login form {width: 90%; font-weight: bold; font-size: 10pt; display: table-cell; vertical-align: middle;}
#login label {display: block;float: left; width: 25%; padding: 2px 3px 2px 0px; text-align: right;}
#login input[type="text"],
#login input[type="password"] {padding: 4px; margin: 2px 1px; border: 1px solid #009590; border-radius: 5px; width: 70%; max-width: 70%;}
.buttonAligner { text-align: left; padding-left: 25%;}
#login input[type="submit"] {float: none; width: auto; margin-left: 0px; margin-right: 0px;}

#login #loggedin {bottom: 50px; left: 60px; position: absolute; width: 250px;}
#login #loggedin img {height: 50px; width: 50px; float: left; border-radius: .5em;}
#login #loggedin select {width: 125px; margin: 5px;} /* 165 */
#login #loggedin a {padding-left: 5px;}

#errorBox, #messageBox {padding: 5px; display: none; border-radius: .75em; margin-top: 5px; text-align: center;}
#errorBox {background: #E86A6A; color: #500; border: .2em solid #600;}
#messageBox {background: #666; color: #BBB; border: .2em solid #CCC;}


/* ------------------------------------------------------------
		Header
------------------------------------------------------------ */
header {
	background:
		url(../img/ovrl_cloud_left.png) 10% 160px no-repeat,
		url(../img/ovrl_cloud_right.png) 90% 160px no-repeat;
}
header img {
	display: block;
	margin: 0em auto;
	max-height: 100%;
	max-width: 100%;
}

header nav {
	background: transparent;
	text-align: center;
}
header nav ul:after{content: ".";display: block;height: 0;font-size:0;clear: both;visibility:hidden;}
header nav ul{
	display: inline-block;
	padding: none;
	margin: 0px auto;
}
header nav ul li {
	display: inline;
	float: left;
}
header nav ul li a {
	font-family: SpicyRice-Regular;
	font-variant: small-caps;
	padding: 7px 20px 8px 20px;
	font-size: 18pt;
	float: left;
	color: #ED3C95;
	text-decoration: none;
	text-shadow: 1px 1px 0px #94238d;
}
header nav ul li a:hover{}

/* ------------------------------------------------------------
		Main area
------------------------------------------------------------ */
#content h1 {
	background: #aeb3ed;
	color: #fefefe;
	font-weight: normal;
	padding-left: 2em;
}
/*----- HOME PAGE -----*/
#content {
	background:
		url(../img/ovrl_cloud2_left.png) 10% 107px repeat-y,
		url(../img/ovrl_cloud2_right.png) 90% 203px repeat-y;
	padding-top: 2em;
}
#content .col, #col1 {
	min-height: 50px;
	float: left;
}

/* --- Collumn 1 --- */
#content > section:first-child,
#col1 {
	width: 70%;
	float: left;
	margin: 0;
}
body.home #col1 {background: none;}
#col1 > section {
	background: #d0e5ff;
	width: 95%;
	padding: 3% 2.5% 2.5%;
}
#col1 > h1 {
	background: #9cc6ff;
	font-weight: normal;
	color: #eee;
	font-size: 12pt;
	padding: 1%;
}

#col1 article {
	background: #f0f9ff;
	margin-bottom: 1.5em;
	margin-left: 1em;
	position: relative;
}
#col1 article > * {
	padding: .75em;
}
#col1 article > h1 {
	padding-left: 2em;
}
#col1 article > h5 {
	color: #fefefe;
	font-weight: normal;
	text-align: center;
	width: 2em; height: 2em;
	padding: 1.5em;
	position: absolute;
	top: -1.25em;
	left: -2.5em;
	background: url(../img/h5_bg.png) center no-repeat;
	background-size: contain;
/*	background: #b4dae7;
	-webkit-transform:rotate(-130deg) skew(15deg,0deg);
}
#content .c1 article > h5 > p {
	-webkit-transform:rotate(137.5deg);*/
}
#col1 article > div.content {
	padding-left: 2em;
	line-height: 130%;
}
#col1 article > div.content a{
	text-decoration: none;
	color: #9CC6FF;
}
#col1 article > div.content div.quoteheader{
	color: #9CC6FF;
}
#col1 article > hr {
	padding: 0em;
	margin: .5em;
	border: 1px solid #b1d4f3;
}
#col1 article > .comments {
	color: #b1d4f3;
	display: block;
	padding: 0em .5em .5em !important;
	text-decoration: none;
}

.bbc_standard_quote {
	font-size: 0.9em;
	color: rgb(74, 74, 74);
	line-height: 1.4em;
	background: url("../images/theme/quote.png") no-repeat scroll 0.1em 0.1em transparent;
	border: 1px solid rgb(194, 194, 194);
	padding: 1.1em 1.4em;
	margin: 0.1em 0px 0.3em;
	overflow: auto;
}

.bbc_u {
    text-decoration: underline;
}

.bbc_img {
	max-width: 500px;
	max-height: 500px;
}

#homeAbout {
	margin-bottom: 1em;
}
#homeAbout p {
	background: #f0f9ff;
	padding: 1em 1em 0em 1em;
	line-height: 130%;
}
#homeAbout p:last-child {
	padding-bottom: 1em;
}

/* --- Collumn 2 --- */
#content .c2 {
	background: #d7dfff;
	width: 20%;
	margin: 0em 5%;
	position: relative;
}
#content .c2 article {
	background: #f0f9ff;
	width: 90%;
	margin: 5%;
	padding-bottom: 2px;
}
#content .c2 article h4 {
	background: #9cd3ff;
	color: #eee;
	font-weight: normal;
	padding: .5em;
}
#content .c2 article p {
	font-size: 10pt;
	padding: .75em;
}

/* --- Collumn 2 thingies --- */
.thingy_top, .thingy_bottom {
	background-image: url(../img/thingy_mid.png);
	background-size: contain;
	background-repeat: repeat-x;
	height: 2.5em;
	margin: 0 !important;
	float: none !important;
}
.thingy_bottom { 
background-position: bottom;
}
.thingy_top:before, .thingy_top:after, .thingy_bottom:before, .thingy_bottom:after {
	background-repeat: no-repeat;
	background-size: contain;
	content: ' ';
	display: block;
	height: 2.5em;
	position: absolute;
	width: 2.5em;
}
.thingy_top:before {
	background-image: url(../img/thingy_top_left.png);
	background-position: top right;
	left: -2.4em;
}
.thingy_top:after {
	background-image: url(../img/thingy_top_right.png);
	background-position: top left;
	right: -2.4em;
}
.thingy_bottom:before {
	background-image: url(../img/thingy_bottom_left.png);
	background-position: bottom right;
	left: -2.4em;
}
.thingy_bottom:after {
	background-image: url(../img/thingy_bottom_right.png);
	background-position: bottom left;
	right: -2.4em;
}

/* --- Additional navigation things --- */
#pageNav {
	background: #9cc6ff;
	color: #eee;
	padding: 1%;
}
#pageNav a {
	color: inherit;
	display: inline-block;
	text-decoration: none;
} 

/*----- ABOUT PAGE -----*/
body.about section {
	margin: 0 1em;
}
body.about section > * {
	margin: 1em;
}
body.about section h1 {
	padding: .5em;
	font-weight: bold;
	margin: 0;
}

/*----- FAQ PAGE -----*/
body.faq section {
	margin: 0 1em;
	background: #D0E5FF;
}
body.faq section > * {
	margin: 1em;
}
body.faq section h1 {
	padding: .5em;
	font-weight: bold;
	margin: 0;
}
body.faq h5 {
	display: block;
	width: auto;
	padding: .5em;
	background: #AEB3ED;
	margin-left: 0;
	margin-bottom: 0;
}
body.faq article {
	background: #F0F9FF;
}
body.faq p {
	margin: .75em;
}

/*----- IRC PAGE -----*/
body.irc section:first-child {
	margin: 0 1em;
	background: #D0E5FF;
	height: 30em;
}
body.irc iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/*----- CONTACT PAGE -----*/
body.contact section {
	margin: 0 1em;
	background: #D0E5FF;
}
body.contact section h1 {
	padding: .5em;
	font-weight: bold;
	margin: 0;
}
body.contact section h2 {
	background: #aeb3ed;
	padding: .25em;
	margin-top: .5em;
	width: 60%;
}

body.contact article {
	background: #F0F9FF;
	margin: 1em;
}
body.contact article h3 {
	background: #AEB3ED;
	padding: .3em;
}
body.contact article img {
	float: left;
	padding: .5em;
}
body.contact article p {
	margin: .3em;
}
/*----- TEAM PAGE -----*/
body.team section h1 {
	padding: .5em;
	font-weight: bold;
	margin: 0;
	margin-bottom: .5em;
}
body.team section > div {
	float: left;
}
body.team section div img {
	width: 3em;
	height: 3em;
	float: left;
	margin: .25em;
}
body.team h3 {
	clear: both;
	background: #aeb3ed;
	color: #fefefe;
	font-weight: normal;
}
body.team section div h4 {
	margin: .5em;
}
body.team section div p {
	margin: .5em;
}
body.team .toolTip {
	display: none;
}
#toolTip {
	background: inherit;
	border: 1px solid #858585;
	border-radius: .5em;
	color: inherit;
	display: none;
	padding: .25em;
	position: absolute;
	z-index: 9001;
}

/*----- DOWNLOADS PAGE -----*/
body.downloads section h1 {
	padding: .5em;
	font-weight: bold;
	margin: 0;
	margin-bottom: .5em;
}
body.downloads section:first-child h4 {
	margin: .5em;
}

/*----- RULES PAGE -----*/
body.rules section {
	margin: 0 1em;
}
body.rules section > * {
	margin: 1em;
}
body.rules section h1 {
	padding: .5em;
	font-weight: bold;
	margin: 0;
}

/*----- MEDIA PAGE -----*/
body.media section {	
	margin: 0 1em;
}
body.media section > * {
	margin: 1em;
}
body.media section h1 {	
	padding: .5em;	
	font-weight: bold;	
	margin: 0;
}

/* ------------------------------------------------------------
		Footer
------------------------------------------------------------ */
#preFooter {
	background:
		url(../img/rainbow_end_left.png) 10% bottom no-repeat,
		url(../img/rainbow_end_right.png) 90% bottom no-repeat,
		url(../img/mountain_left.png) left bottom no-repeat,
		url(../img/mountain_right.png) right bottom no-repeat,
		url(../img/mountain_center.png) center bottom no-repeat;
	min-height: 192px;
}
#preFooter > .limiter {
	width: 70%;
}
#preFooter #pageNav {
	background: none;
	padding-left: 0;
	padding-right: 0;
}
#preFooter #pageNav > a {
	padding: .5em;
	background-color: #9cc6ff;
	color: #fff;
}
footer {
	background: #4f3b9b;
	border: 3pt solid #4f3b9b;
	width: auto;
	font-size: 9px;
	color: #9cc6ff;
	text-align:center;
}