/*
	
	RedFlame v1.1 - Cosmos Style
	Designed and coded by Callan Milne
	
*/


/* =General elements
-------------------------------------------------------------- */

	* {
		margin: 0;
		padding: 0
	}
	body {
		background-color: #333333;
		font-family: arial, sans;
		font-size: 10pt
	}
	a { text-decoration: none }
	a:hover { text-decoration: underline }
	p {
		color: #000;
		margin: 15px 0
	}
	p a {
		color: #006397;
		text-decoration: underline
	}
	p a:hover { text-decoration: none }
	h1 {
		color: #FFF;
		font-size: 20px;
		font-weight: bold;
		margin: 0 0 15px
	}
	h2 {
		border-top: 1px solid #CCC;
		color: #006397;
		font-size: 16px;
		font-weight: bold;
		margin: 15px 0;
		max-width: 755px;
		padding-top: 10px
	}
	h2 a { color: #006397 }
	table { margin: 10px }
	.spacer {
		clear: both;
		height: 1px;
	}
	.right { float: right !important }
	.left { float: left !important }
	.centered { text-align: center !important }
	.nobg { background: none !important  }

/* =Page header
-------------------------------------------------------------- */

	#header {
		background: url(images/header.bg.png) repeat-x;
		height: 149px
	}
	#header .outer {
		background: url(images/header.png) no-repeat center;
		height: 149px;
		margin: 0 auto;
		width: 1020px
	}
	#header .outer .inner {
		color: #FFF;
		margin: 0 auto;
		text-align: right;
		width: 950px
	}
	#header .outer .inner img {
		float: left;
		margin-top: 55px
	}
	#header .contact {
		float: right;
		font-weight: bold;
		margin-top: 55px
	}
	#header .contact span { font-size: 16pt }
	#header .overlay {
		background: url(images/header.overlay.png) repeat-x;
		height: 31px;
		position: absolute;
		top: 0;
		width: 100%
	}
	#header .style-switcher {
		float: left;
		padding-top: 5px
	}
	#header .overlay .inner {
		color: #FFF;
		height: 31px;
		margin: 0 auto;
		text-align: right;
		width: 950px
	}
	#header .overlay .inner span {
		color: #fddbdb;
		float: right;
		font-size: 9pt;
		margin: 7px 5px 0 0
	}


/* =Top menu
-------------------------------------------------------------- */

	#top-menu {
		background: url(images/top.menu.bg.png) repeat-x;
		height: 36px
	}
	#top-menu .outer {
		color: #FFF;
		margin: 0 auto;
		text-align: right;
		width: 950px
	}
	#top-menu .menu {
		clear: both;
		font-weight: normal;
		font-size: 1.1em;
		height: 31px;
		list-style-type: none;
		padding: 5px 0 0
	}
	#top-menu li {
		float: left;
		padding: 0
	}
	#top-menu .menu li a {
		color: #696969;
		cursor: pointer;
		float: left;
		padding: 3px 10px;
		text-shadow: #FFF 1px 1px 1px
	}
	#top-menu .menu li a:hover {
		background: #006397 url(images/item.bg.hover.png) repeat-x center;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #FFF;
		text-shadow: #300 0px -1px 1px
	}
	.shadow {
		background: url(images/top.menu.shadow.png) repeat-x top;
		height: 15px
	}


/* =Drop down menu
-------------------------------------------------------------- */
      
	#jsddm {
		clear: both;
		font-weight: normal;
		font-size: 1.1em;
		height: 31px;
		list-style-type: none;
		padding: 7px 0 0
	}
	#jsddm li {
		float: left;
		padding: 0
	}
	#jsddm li a {
		color: #696969;
		float: left;
		padding: 3px 10px;
		text-decoration: none;
		text-shadow: #FFF 1px 1px 1px
	}
	#jsddm li a:hover {
		background: #006397 url(images/item.bg.hover.png) repeat-x center;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #FFF;
		text-shadow: #300 0px -1px 1px
	}        
	#jsddm li ul {
		background-color: #EEE;
		border: 1px solid #FFF;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-box-shadow: 1px 1px 4px #000;
		-webkit-box-shadow: 1px 1px 4px #000;
		box-shadow: 1px 1px 4px #000;
		margin: 26px 0 0 0 !important;
		padding: 2px;
		position: absolute;
		visibility: hidden
	}
	#jsddm li ul li {
		clear: both;
		display: block;
		float: none;
		margin: 0;
		text-align: left
	}


/* =Left and right side menus
-------------------------------------------------------------- */

	.left-menu-block,
	.right-menu-block {
		background-color: #444;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #EEE;
		list-style-type: none;
		margin-bottom: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
		width: 190px
	}
	.left-menu-block li,
	.right-menu-block li {
		font-weight: normal;
		font-size: 10pt;
		margin-bottom: 5px;
		padding: 0 10px;
		text-shadow: #222 1px 1px 1px
	}
	.left-menu-block li a,
	.right-menu-block li a { color: #EEE }
	.left-menu-block li a:hover,
	.right-menu-block li a:hover { color: #FFF }
	.left-menu-block li.first,
	.left-menu-block li.first:hover,
	.right-menu-block li.first,
	.right-menu-block li.first:hover {
		color: #EEE !important;
		font-weight: bold;
		font-size: 11pt;
		line-height: normal;
		margin-bottom: 5px;
		padding-bottom: 5px
	}
	.left-menu-block li.menu-body p,
	.right-menu-block li.menu-body p {
		color: #EEE;
		font-weight: normal;
		font-size: 9pt;
		margin: 5px 0 5px
	}
	.left-menu-block li.padded,
	.right-menu-block li.padded { padding-top: 5px }
	.left-menu-block li .button,
	.right-menu-block li .button {
		background: url(/files/style/water/images/button.small.grey.png) no-repeat;
		border: none;
		color: #DDD;
		cursor: pointer;
		font-size: 8pt;
		height: 23px;
		text-align: center;
		width: 72px
	}
	.left-menu-block li .button:hover,
	.right-menu-block li .button:hover {
		background: url(images/button.small.grey.hover.png) no-repeat;
		color: #FFF
	}
	.right-menu-block {
		background: #555;
		color: #BBB
	}
	#right-menu {
		clear: right;
		float: right
	}

/* =Inner body and content area
-------------------------------------------------------------- */

	#inner-background {
		margin: 0 auto;
		width: 1000px
	}
	#container {
		margin: 0 auto;
		text-align: left;
		width: 950px
	}
	#inner-container { margin: 0 }
	#thread {
		background-color: #444;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		margin-bottom: 10px;
		clear: right;
		color: #EEE;
		float: right;
		padding: 5px;
		text-shadow: #222 1px 1px 1px;
		width: 740px
	}
	#thread a { color: #BBB }
	#page { margin: 10px 0 }
	.content-area {
		background: #EEE;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #222;
		float: right;
		font-size: 13px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		width: 750px
	}
	.content-area h1 {
		background: #006397 url(images/item.bg.hover.png) repeat-x center;
		border: 1px solid #EEE;
		border-bottom: none;
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
		color: #FFF;
		font-size: 18px;
		margin-bottom: 0;
		padding: 3px 9px;
		text-shadow: #012 1px 1px 1px
	}
	.content-area h1.grey {
		color: #EEE;
		background: #666 url(images/item.bg.png) repeat-x center
	}
	.content-area h2 { margin: 10px 10px 0 }
	.content-area h3 {
		color: #006397;
		font-size: 12pt;
		margin: 10px 10px 0
	}
	.content-area span.strong { font-weight: bold }
	.content-area p {
		line-height: 20px;
		margin: 0 10px;
		padding: 10px 0 0
	}
	.content-area ul,
	.content-area ol { margin: 10px 25px 0 }
	.content-area ul li,
	.content-area ol li {
		margin: 0 10px;
		line-height: 20px
	}
	.content-area ul li a,
	.content-area ol li a { color: #006397 }
	.content-area ul li ul,
	.content-area ol li ol { margin: 0 10px }
	.content-area ul li ul li,
	.content-area ol li ol li { margin: 0 10px }
	.middle-content {
		float: right;
		margin-right: 10px;
		width: 550px
	}
	.middle-content .content-area { width: 550px }


/* =Inner body sections
-------------------------------------------------------------- */

	.section-block,
	.inner-block {
		float: left;
		margin: 10px 0 0 11px;
		padding: 0 0 2px 0;
		text-align: left;
		width: 235px
	}
	.section-block h3,
	.inner-block h3 {
		border-bottom: 1px solid #006397;
		color: #006397;
		font-size: 11pt;
		font-weight: bold;
		margin: 0 0 2px;
		text-align: left
	}
	.section-block img,
	.inner-block img { margin-bottom: 5px }
	.section-block span,
	.inner-block span {
		clear: both;
		display: block;
		line-height: 20px;
		margin-bottom: 5px;
		text-align: left
	}
	.inner-block {
		background: #DDD;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		float: right;
		margin-right: 10px;
		padding: 10px
	}


/* =Tables
-------------------------------------------------------------- */

	table thead.big th,
	table thead th {
		background: #006397 url(images/item.bg.hover.png) repeat-x top;
		color: #FFF;
		font-size: 12pt;
		height: 45px;
		padding: 5px;
		text-align: center;
		text-shadow: #000 1px 1px 1px;
		width: 150px
	}
	table thead th {
		background: #444 url(images/item.bg.png) repeat-x top;
		color: #EEE;
		font-size: 10pt;
		height: auto
	}
	table tbody th {
		background-color: #CCC;
		border-width: 0 1px 1px;
		border-color: #BBB #999;
		border-style: solid;
		padding: 5px 3px
	}
	table tbody th.sub-heading {
		background-color: #EEE;
		border-width: 0 0 1px;
		border-bottom: 1px solid #999;
		color: #999;
		font-size: 11pt;
		text-align: left;
		padding: 7px 3px 3px
	}
	table tbody td {
		background-color: #DDD;
		border-bottom: 1px solid #BBB;
		border-right: 1px solid #999;
		padding: 5px 3px;
		text-align: center
	}
	table tfoot td {
		padding: 10px 3px;
		text-align: center
	}

/* =Blog posts
-------------------------------------------------------------- */
  
	.blog-post { 
		background-color: #DDD;
		border-radius: 3px;
		-moz-box-shadow: 1px 1px 2px #999;
		-webkit-box-shadow: 1px 1px 2px #999;
		box-shadow: 1px 1px 2px #999;
		margin: 10px
	}
	.blog-post .top {
		color: #222;
		font-weight: bold;
		font-size: 9pt;
		padding: 5px 8px 0;
		text-shadow: #DDD 1px 1px 1px;
		text-align: right
	}
	.blog-post .top a { color: #222 }
	.blog-post .top span {
		color: #444;
		float: left;
		font-weight: normal
	}
	.blog-post h2 {
		border: none;
		font-size: 16pt;
		margin: 5px 5px 0;
		padding: 0;
		text-shadow: #EEE 1px 1px 1px
	}
	.blog-post p {
		border: none;
		margin-left: 5px
	}
	.blog-post .post-area {
		border-radius: 0 0 3px 3px;
		padding: 3px
	}
	.blog-post .post-area a { text-decoration: none }
	.blog-post .post-area a:hover { text-decoration: underline }
	.blog-post .post-area .tags { margin: 5px }
	.blog-post .post-area .tags h3 {
		font-size: 11pt;
		margin: 10px 0
	}
	.blog-post .post-area .tags a {
		background: #006397 url(images/item.bg.hover.png) repeat-x center;
		color: #FFF;
		margin: 1px;
		padding: 2px 3px
	}
	.blog-post .post-area .foot {
		border-top: 1px solid #AAA;
		margin: 15px 5px 0;
		padding: 5px 0
	}
	.blog-post .post-area .foot a { color: #333 }
	.blog-post .share-box { float: right }
	.blog-post .share-box img { border: none }
	.blog-post .post-info {
		float: right; 
		margin: 5px
	}
	.blog-post .post-info .post-date,
	.blog-post .post-info .post-comments {
		margin-bottom: 5px;
		text-align: center;
		width: 77px
	}
	.blog-post .post-info .post-date {
		background: url(images/blog.box.date.png) no-repeat center;
		height: 70px
	}
	.blog-post .post-info .post-comments {
		background: url(images/blog.box.comments.png) no-repeat center;
		height: 52px
	}
	.blog-post .post-info .post-date span {
		color: #FFF;
		display: block;
		font-size: 9pt;
		padding: 4px
	}
	.blog-post .post-info .post-comments span {
		color: #888;
		display: block;
		font-size: 8pt;
	}
	.blog-post .post-info .post-date a {
		color: #006397;
		display: block;
		font-size: 18pt;
		font-weight: bold;
		line-height: 14pt;
		margin-top: 8px
	}
	.blog-post .post-info .post-date a sup { font-size: 10pt }
	.blog-post .post-info .post-comments a {
		color: #666;
		display: inline-block;
		font-size: 16pt;
		font-weight: bold;
		line-height: 14pt;
		margin-top: 10px
	}
	.blog-post .post-cat {
		color: #666;
		font-size: 8pt;
		margin: 0 0 0 5px
	}
	.blog-post .post-cat a { color: #006397 }


/* =Buttons and inputs
-------------------------------------------------------------- */

	.small-button,
	.small-button-grey {
		background: url(images/button.small.blue.png) no-repeat;
		border: none;
		color: #d4edf9;
		cursor: pointer;
		font-size: 8pt;
		height: 23px;
		margin-top: 4px;
		text-align: center;
		text-shadow: #024 1px 1px 1px;
		width: 72px
	}
	.small-button:hover {
		background: url(images/button.small.blue.hover.png) no-repeat;
		color: #FFF
	}
	.small-button-grey {
		background: url(images/button.small.grey.png) no-repeat !important;
		color: #DDD !important;
		text-shadow: #222 1px 1px 1px
	}
	.small-button-grey:hover {
		background: url(images/button.small.grey.hover.png) no-repeat !important;
		color: #FFF !important
	}
	.big-button,
	.big-button-grey {
		background: url(images/button.large.blue.png) no-repeat;
		border: none;
		color: #d4edf9;
		cursor: pointer;
		font-size: 10pt;
		font-weight: bold;
		height: 30px;
		text-align: center;
		text-shadow: #024 1px 1px 1px;
		width: 151px
	}
	.big-button:hover,
	.big-button-grey:hover {
		background: url(images/button.large.blue.hover.png) no-repeat;
		color: #FFF
	}
	.big-button-grey {
		background: url(images/button.large.grey.png) no-repeat !important;
		color: #DDD !important;
		font-weight: normal;
		text-shadow: #222 1px 1px 1px
	}
	.big-button-grey:hover {
		background: url(images/button.large.grey.hover.png) no-repeat !important;
		color: #FFF !important
	}
	.rounded-input {
		background: #333;
		border: 1px solid #000;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		color: #EEE;
		padding: 3px;
		width: 150px
	}
	.big-form-area,
	.reg-form-area,
	.small-form-area {
		background: #DDD;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		margin: 10px 0 0 10px;
		padding: 10px
	}
	.small-form-area { width: 250px }
	.reg-form-area {
		float: right;
		margin-right: 10px;
		width: 430px
	}
	.big-form-area {
		text-align: right;
		width: 710px
	}
	.big-form-area .input,
	.reg-form-area .input,
	.small-form-area .input,
	.big-form-area .textarea,
	.reg-form-area .textarea,
	.small-form-area .textarea {
		border: 1px solid #AAA;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		padding: 2px
	}
	.big-form-area .input,
	.reg-form-area .input,
	.small-form-area .input { width: 241px }
	.big-form-area .textarea,
	.reg-form-area .textarea,
	.small-form-area .textarea {
		height: 229px;
		width: 425px
	}
	.big-form-area div,
	.reg-form-area div,
	.small-form-area div,
	.big-form-area span,
	.reg-form-area span,
	.small-form-area span {
		font-size: 9pt;
		text-shadow: #EEE 1px 1px 1px
	}
	.big-form-area div,
	.reg-form-area div,
	.small-form-area div {
		color: #333;
		font-weight: bold;
		padding: 5px 5px 0 0
	}
	.big-form-area span,
	.reg-form-area span,
	.small-form-area span {
		color: #666;
		float: right;
		font-weight: normal
	}


/* =Footer
-------------------------------------------------------------- */
  
	#copyright {
		color: #999;
		font-size: 8pt;
		margin: 10px 0 20px;
		text-align: left;
		text-shadow: black 1px 1px 1px
	}
	#copyright a { color: #999 }
	#copyright span { float: right }


/* =Miscellanous
-------------------------------------------------------------- */

	.error-404 {
		background:  #333 url(images/404.png) no-repeat top center;
		height: 155px;
		margin: 35px auto;
		width: 350px
	}
	.error-404 .search {
		background: #444;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		padding: 10px;
		position: relative;
		top: 165px
	}