/* 
 * Copyright (c) 2010 - 2012 Binary Space Pty Ltd
 * Author: Saxon Druce 
 */

/* General settings for the body of the page. */
body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #000000;
	margin: 0px;
	color: white;
}

/* Default style for all links. */
a
{
	text-decoration: underline;
	color: #a00000;
}

/* Banner ad at the top of every page. */
div#banner
{
	width: 800px; 
	height: 90px; 
	margin-left: auto; 
	margin-right: auto; 
	margin-top: 5px; 
	margin-bottom: 0px;
}

/* 
 * The header box (contains the C3O logo, home/editor/etc links, and the login 
 * section). 
 */
#header
{
	width: 800px;
	height: 55px;
	background-color: #000000;
	background-image: url('/images/header_800.gif');
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	overflow: hidden;
}

/* Modified dimensions and image of the header on the main and editor pages. */
body.main > #header
{
	width: 1024px;
	height: 63px;
	background-image: url('/images/header_1024.gif');
}
body.editor > #header
{
	width: 1024px;
	height: 63px;
	background-image: url('/images/header_1024.gif');
}

/* The span containing the header links (eg Home / Editor / Forum / etc). */
#header-links
{
	float: left;
	margin: 2px;
	margin-top: 38px;
}

/* Modified margin of the header links on the main and editor pages. */
body.main > #header > #header-links
{
	margin-top: 46px;
}
body.editor > #header > #header-links
{
	margin-top: 46px;
}

/* The separator between each of the links in the header. */
.header-separator
{
	color: #404040;
	padding-left: 2px;
	padding-right: 2px;		
}

/* Header links which are 'promoted' (ie stand out more than the others). */
.promoted-header-link
{
	color: #ffffff;
}

/* The span containing the welcome text and login/logout link in the header. */
#welcome-loginout
{
	float: right;
	margin: 2px;
	margin-top: 38px;
}

/* Modified margin of the welcome-login-out on the main and editor pages. */
body.main > #header > #welcome-loginout
{
	margin-top: 46px;
}
body.editor > #header > #welcome-loginout
{
	margin-top: 46px;
}

/* The text prompting the user to login. */
#login-prompt
{
	font-style: italic;	
}

/* The text when the user is logged in. */
#welcome-prompt
{
	font-style: italic;	
}

/* The link to log in or out. */
.loginout-link
{
	font-size: 10px;
	margin-left: 10px;
}

/* 
 * The maintenance box (contains a message when the site is under maintenance). 
 */
#maintenance
{
	width: 800px;
	background-color: #600000;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
}

/* Modified width of the maintenance panel on the main and editor pages. */
body.main > #maintenance
{
	width: 1024px;
}
body.editor > #maintenance
{
	width: 1024px;
}

/* The popup login panel. */
#login-panel
{
	width: 790px;
	background-color: #101010;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

/* Modified width of the login panel on the main and editor pages. */
body.main > #login-panel
{
	width: 1014px;
}
body.editor > #login-panel
{
	width: 1014px;
}

/* The list for the login options (eg Facebook or Google). */
ul#login-options
{
	list-style-type: none; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: auto; 
	margin-right: auto; 
	width: 404px; 
	padding: 0px
}

/* Each list item for the login options (eg Facebook or Google). */
li.login-option
{
	float: left; 
	border: 1px solid #404040; 
	padding: 5px; 
	margin-left: 5px; 
	margin-right: 5px
}

/* The link on the image for each login option. */
a.login-option-image-link
{
	float: left; 
	width: 60px;
}

/* The image for each login option. */
img.login-option
{
	display: block;
}

/* The link on the text for each login option. */
a.login-option-text-link
{
	float: left; 
	width: 110px; 
	margin: 5px; 
	margin-top: 15px; 
	text-align: center
}

/* The div which contains the "Don't have an account?" prompt and sign up links. */
div#login-no-account-div
{
	float: left; 
	width: 590px; 
	left: 100px; 
	position: relative; 
	text-align: center; 
	padding-top: 10px;
}

/* Modified position of the login no account div on the main and editor pages. */
body.main > #login-panel > div#login-no-account-div
{
	left: 212px;
}
body.editor > #login-panel > div#login-no-account-div
{
	left: 212px;
}

/* The div which contains the sign up for xxx links. */
div#sign-up-prompt-div
{
	padding-top: 10px; 
}

/* The login cancel link. */
#login-cancel
{
	position: absolute; 
	right: 0px; 
	bottom: 0px; 
	padding: 5px;
}

/* 
 * The announcement box (contains a message when there is an announcement). 
 */
#announcement
{
	width: 800px;
	background-color: #401010;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
}

/* Modified width of the announcement panel on the main and editor pages. */
body.main > #announcement
{
	width: 1024px;
}
body.editor > #announcement
{
	width: 1024px;
}

/* Slightly brighter links in the announcement panel. */
#announcement a
{
	text-decoration: underline;
	color: #d00000;
}

/* The panel containing the main content of the page. */
#main-content
{
	width: 800px;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0px;
	text-align: left;
}

/* Modified width of the main panel on the main and editor pages. */
body.main > #main-content
{
	width: 1024px;
}
body.editor > #main-content
{
	width: 1024px;
}

/* The subtitle of the page, eg Credits, Terms, Editor, etc. */
#subtitle
{
	color: #a00000;
	font-size: 20px;
	padding: 0px;
	margin: 0px;
	display: inline;
}

/* 
 * Sub-headings - eg on a game page, these are the Title, Location, Author etc 
 * labels.
 */
.sub-heading
{
	font-weight: bold;
	font-size: 14px;
}

/* 
 * Sub-sub-headings - eg on a game page, these are the actual titles, location, 
 * etc.
 */
.sub-sub-heading
{
	font-size: 14px;
}

/* A block of text within the main content (highlighted with a dark grey background). */
.main-content-text-box
{
	background-color: #101010; 
	padding: 5px;
}

/* Basic class which clears padding. Often used as 'main-content-text-box no-padding'. */
.no-padding
{
	padding: 0px;
}

/* The left column, when splitting a main-content-text-box into two columns. */
.main-content-text-box-left-column
{
	float: left; 
	width: 377px; 
	padding: 10px; 
	border-right: 5px solid black; 
	margin-right: 0px;
}

/* The right column, when splitting a main-content-text-box into two columns. */
.main-content-text-box-right-column
{
	float: left; 
	width: 377px; 
	padding: 10px; 
	margin-left: -5px; 
	border-left: 5px solid black;
}

/* Modified width of the left and right columsn on the main and editor pages. */
body.main > #main-content > .main-content-text-box > .main-content-text-box-left-column
{
	width: 489px;
}
body.main > #main-content > .main-content-text-box > .main-content-text-box-right-column
{
	width: 489px;
}
body.editor > #main-content > .main-content-text-box > .main-content-text-box-left-column
{
	width: 489px;
}
body.editor > #main-content > .main-content-text-box > .main-content-text-box-right-column
{
	width: 489px;
}

/* The description text on a game page. */
#description-text
{
	font-size: 11px;
}

/* A div which contains notes centred on the page (eg on the moderation home page). */
div.centred-notes
{
	text-align: center;
}

/* A general div used to clear a float. */
div.clear
{
	clear: both;
}

/* 
 * The div which holds the 'create your own map' message/button at the bottom 
 * of the main and game pages. 
 */
div#create-map
{
	padding-top: 0px;
	padding-bottom: 3px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	width: 460px;
}

/* The main span of the button. */
span#create-map-button
{
	float: left; 
	width: 207px; 
	height: 39px; 
	position: relative;
}

/* The button's background colour (displays before the background image loads). */
span#create-map-button-background
{
	position: absolute; 
	left: 4px; 
	top: 14px; 
	width: 199px; 
	height: 21px; 
	background-color: #9e4100;
}

/* The button's background image. */
span#create-map-button-background-image
{
	position: absolute; 
	left: 0px; 
	top: 3px; 
	width: 207px; 
	height: 39px; 
	background-image:url('/images/button_background_create_your_own_map.png'); 
	background-repeat: no-repeat; 
}

/* The link on the button. */
a#create-map-button-link
{
	position: absolute;
	left: 4px; 
	top: 14px;
	padding: 2px;
	width: 195px; 
	height: 17px; 
	color: black; 
	text-decoration: none; 
	text-align: center;
}

/* The create map message which appears after the button. */
span#create-map-button-suffix
{
	float: left; 
	padding-top: 16px; 
	padding-left: 5px;
}

/* List items on the editor help page. */
li.editor-help-list-item
{
	padding-top: 3px;
	padding-bottom: 3px;
}

/* A message which appears after the AddThis button. */
div#addthis-message
{
	margin-top: 5px;
	margin-left: 2px;
}

/* A div containing a link to the Facebook fan page. */
div#facebook-page-link
{
	margin-left: 1px; 
	margin-bottom: 5px; 
}

/* A div containing the Facebook like button. */
div#facebook-like-button
{
	margin-left: 2px; 
}

/* A div containing Twitter links. */
div#twitter-links
{
	margin-left: 1px;
}

/* A div containing a message on the friend select dialog (on the game page). */
div#friend-select-message
{
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

/* The footer panel. */
#footer
{
	width: 790px;
	background-color: #101010;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px;
	text-align: left;
	font-size: 10px;
	overflow: hidden;
}

/* Modified width of the footer panel on the main and editor pages. */
body.main > #footer
{
	width: 1014px;
}
body.editor > #footer
{
	width: 1014px;
}

/* Div for items on the left side of the footer. */
div#footer-left
{
	float: left;
}

/* Div for items on the right side of the footer. */
div#footer-right
{
	float: right;
}

/* Separator between links in the footer. */
.footer-separator
{
	color: #404040;
	padding-left: 2px;
	padding-right: 2px;		
}