/*
Theme Name: SatAM Theme
Theme URI: http://grinderinteractive.com
Description: The look and feel for the FUS main site. 
Author: Ian McLean
Version: 0.1
License: GNU General Public License
License URI: license.txt
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
*/

/* --- The big parts. --- */

body {
	padding: 0;
	margin: 0;
	font-family: "Open Sans", "Lucida Grande", sans-serif;
	font-size: 0.8em;
	background-color: #1a2340;
}

a {
	-webkit-transition: color 0.2s linear; 
	-moz-transition: color 0.2s linear; 
	color: #5c0f00;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #a90202;
}

#topbarwrapper {
	height: 109px;
	background-color: #efefef;
	background-image: url("images/background-topbar.jpg");
}

#topbar960 {
	width: 960px;
	margin: 0 auto;
	height: 109px;
}

#searchbar {
	height: 67px;
}

#titlewrapper {
	width: 960px;
	height: 200px;
	margin: 0 auto;
}

#sliderbox {
	height: 200px;
	border-bottom: 1px solid black !important;
}

#maindiv {
	background-image: url("images/background-main.jpg");
	background-repeat: repeat-x;
	background-position: top center; 
}

#mainwrapper {
	background-image: url("images/background-detail.jpg"); 
	background-repeat: no-repeat;
	background-position: top center; 
}

#mainoutside {  
	width: 960px;
	margin: 0 auto;
	min-height: 600px;
	border: 3px solid black; 
	box-shadow: 0px 0px 16px black;
	background-color: #e8e9ea;
	margin-bottom: 16px;
	
}

#backgroundimage {
	width: 1487px;
	height: 494px;
	
}

#sidebardiv {
	width: 290px;
	float: right;
	min-height: 600px;
	padding: 8px;
	background-color: #e8e9ea;
}

#contentdiv {
	float: left;
	width: 637px;
	padding-left: 8px;
	padding-top: 8px;
	padding-right: 8px;
	min-height: 1000px;
	background-color: white; 
	border-right: 1px solid #aaa;
}

#footer {
	font-size: 0.8em;
	padding: 16px;
	clear: both;
	text-align: center;
	border-top: 1px solid #AAA;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(226,226,226,1) 100%); /* FF3.6+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(226,226,226,1) 100%); /* W3C */
}

#bannerbox {
	float: left;
}

#quotebox {
	float:right;
	width: 375px;
	height: 201px;
    list-style: none;
    color: white;
    font-size: 2.0em;
    text-shadow: 1px 1px 1px black;
}

/* --- Details -- */

#navigation ul,#navigation li { list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{ float:left; position:relative; } 
#navigation ul li a{
	font-weight: normal;
	background-position: top;
	text-decoration: none;
	font-size: 2.7em;
	text-transform: uppercase;
	color: black;
	text-shadow: 0px 1px 0px #CCCCCC;	
    display:block;
    padding:0px 12px 0px 12px; 
    white-space:nowrap;
    line-height: 42px;
    font-size: 1.7em;
    border-radius: 2px;
}
#navigation ul ul{
    position:absolute;
    top:-99999px;    /* Remove them out of viewport */
    left:0;
    opacity: 0;      /* Hide sub level, we will use this in transition */
    -webkit-transition: opacity .4s ease-in-out; /* For chrome & safari */
    -moz-transition: opacity .4s ease-in-out; /* For mozilla firefox */
    -o-transition: opacity .4s ease-in-out; /* For opera */
       transition: opacity .4s ease-in-out; /* General use */
    z-index:497;
    background:#000;
    padding: 2px;
    border:1px solid #444;
    border-top: none;
    box-shadow:#111 0 3px 4px; /* Shadows make menus more beautiful */
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px; 
   	min-width: 200px;
}
#navigation ul ul ul {
    position:absolute;
    top:-99999px;
    left:100%;
    border:1px solid #444;
}
#navigation ul li:hover>ul{ 
	opacity: 0.92; 
	position:absolute; 
	top:99%; 
	left:0; 
}
#navigation ul ul li:hover>ul{ 
	opacity: 1; 
	position:absolute; 
	top:0; 
	left:100%; 
}

#navigation ul ul a{ 
	color: #ccc;
	text-shadow: none;
	min-width: 300px;
	font-family: "Open Sans", sans-serif;
	text-transform: none;
	font-size: 1.2em;
	line-height: 1.9em;
}

#navigation a:hover { /* only for the very top level. */
	background-image: url("images/menu-selected.jpg");
	background-position: bottom;
	background-repeat: repeat-x;
	border: 1px solid #333;
	box-shadow: 0px 0px 3px #555;
	margin-top: 4px;
	margin-bottom: 4px;
	line-height: 32px;
	padding: 0px 11px 0px 11px;
}

/* the 'From the forums' parts */

div.execphpwidget li {
    border-bottom: 1px solid #AAAAAA;
    font-weight: lighter;
    margin: 4px;
    padding-bottom: 4px;
	list-style: disc inside none;
	width: 280px !important; /* IE9 doesn't seem to like not having this. */
}

div.execphpwidget li  a{
	font-weight: normal;
}

.commentbutton {
	margin-left: 16px;
	margin-right: 16px;
	margin-top: 16px;
	float: left;
	height: 26px; /* This is higher than it needs to be but it pushes the 'author' line to the right, which we like. */
	width: 26px;
	background: url("images/speechbubble.png") no-repeat;
	text-indent: -8000px;
}

.author {
	margin-left: 58px;
}

#navigation ul ul a:hover { /* only for the submenu items. */
	color: white;
	background-color: gray;
	background-image: none;
	background-position: bottom;
	background-repeat: repeat-x;
	border: none;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0px 12px 0px 12px;
	line-height: 1.9em;
}

#sidebardiv h2 {
	color: black;
	display: block;
	margin: -8px -8px 0px -8px;
	padding-left: 8px;
	padding-top: 16px;
	padding-bottom: 8px;
	line-height:25px;
	font-size: 28pt !important;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #dedede;
	font-weight: 100;
}

#socialicons {
	float: left;
	width: 400px;
	margin-top:16px;
}

a.socialbuttons img {
	margin-right: 8px;
	opacity: 0.8;
	-webkit-transition: all 0.2s linear; 
	-moz-transition: all 0.2s linear; 
}

a.socialbuttons img:hover {
	opacity: 1;
	box-shadow: 0px 0px 3px #d68900;
}

.post {
	border-bottom: 1px dotted grey;
}

#searchbox {
	font-family: "Open Sans", sans-serif;
	margin-top: 13px;
	height: 40px;
	background-color: white;
	float: right;
	width: 170px;
	border-radius: 3px;
	border: 1px solid #999;
	font-size: 1.8em;
	padding-left: 4px;
	line-height: 40px;
	-webkit-transition: all 0.3s ease; 
	-moz-transition: all 0.3s ease; 
	transition: all 0.3s ease;
}

#searchbox:focus {
	border: 1px solid black;
	box-shadow: 0px 0px 6px #999;
	width: 280px;
}

h1 a { /* h1 is used for section titles. */
	color: black;
	display: block;
	margin: -8px -8px 0px -8px;
	padding-left: 8px;
	padding-top: 16px;
	padding-bottom: 8px;
	line-height:25px;
	font-size: 24pt !important;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #dedede;
	font-weight: 100;
}

h1 a:hover {
	text-decoration: underline;
}

h2 a {
	padding-left: 8px;
	font-family: "Open Sans", sans-serif;
	text-decoration: none;
	font-size: 23pt;
	color: black;
}

h2 a:hover {
	text-decoration: underline;
}

a.banner {
	display: block;
	font-size: 0px;
	height: 201px;
	width: 563px;
	background-image: url("images/logo.png");
}

.alignright {
	float: right;
	padding-left: 4px;
}

.alignleft {
	float: left;
	padding-right: 4px;
}

#sidebar { /* this is the bit that makes the wordpress sidebar work. it's not the sidebar div. */
	list-style: none;
	padding: 0;
}

#yarqwidget-3 { /* the random quote in the main area */
	list-style: none;
	margin-top: 45px;
	color: white;
	text-shadow: 1px 1px 1px black;
}

#yarq_author { /* brutally ugly hack to fix the quote thing */
	display: none;
}

/* Comment thread */

#ipb_comments li {
	margin-left: -20px;
	width: 580px;
	background: #eee;
	border-radius: 4px;
	border: 2px solid grey;
	padding: 4px;
	box-shadow: inset 0px 0px 8px #aaa;
}

.ipb_discussion a {
	font-size: 1.3em;
	margin: 0 auto;
	display: block;
	width: 370px;
	line-height: 1.6em;
	padding: 4px;
	border: 1px solid #495169;
	background-color: #8e9bbb;
	box-shadow: 0px 4px 4px grey;
	text-shadow: 0px 1px 1px white;
	border-radius: 4px;
	color: black !important;
}

.ipb_discussion a:hover {
	background-color: #bdc9f1;
}


img {
	border: none !important;
}