/* 
    Document   : layout
    Created on : Aug 8, 2009, 4:52:47 PM
    Author     : Bastiaan
    Description:
*/

/**
 * Fixes
 */
img {
	border: 0px;
}

form{margin:0;}

/**
 * Classes
 */
.fl {
	float: left;
}

.fr {
	float: right;
}

.clear {
	clear: both;
}

/**
 * Styles
 */
a {
	color: #3b8ccd;
	text-decoration: none;
}

a:visited {
	color: #3b8ccd;
	text-decoration: none;
}

a:hover {
	color: #3b8ccd;
	text-decoration: underline;
}

body {
    text-align: center;
    padding: 0;
    margin: 0;
	font-family: Verdana;
	font-size: 12px;
	/*background: url('../images/main/background.png') #6c9dc9 top center repeat-y;*/
}

/**
 * Main
 */
#container {
    margin: 0 auto;
    width: 955px;
    text-align: left;
	background-color: #ffffff;
}

/**
 * Header
 */
#header {
	float: left;
	width: 100%;
	background-color: #0d386d;
	height: 88px;
	text-align: center;
}

#header .main {
	width: 955px;
	height: 88px;
	margin: 0 auto;
	text-align: left;
	background: url('../images/layout/banner.png');
	
}

#header .logo {
	float: left;
	width: 173px;
	height: 55px;
	padding: 15px 0 0 10px;
	position: relative;
}

#header .right {
	float: right;
	width: 300px;
	text-align: right;
	padding: 5px 5px 0 0;
}

#header .users-online {
	color: white;
}

#header .login {
	padding-top: 3px;
	color: white;
}

#header .links {
	color: white;
	padding-top: 3px;
}

a.loginlink {
	color: white;
	text-decoration: none;
}

a.loginlink:hover {
	color: #CCCCCC;
	text-decoration: underline;
}

/**
 * NavBar
 */
#navbar {
	float: left;
	text-align: center;
	width: 100%;
	height: 33px;
	background: url('../images/main/navbar-background.png') repeat-x;
}

#navbar .main {
	text-align: left;
	margin: 0 auto;
	width: 955px;
	height: 33px;
}

#navbar .item {
	float: left;
	font-size: 12px;
	padding: 8px 15px 0 15px;
	display: block;
	cursor: pointer;
	cursor: hand;
}

#navbar .seperator {
	float: left;
	background: url('../images/main/navitem-seperator.png') no-repeat;
	width: 2px;
	height: 33px;
}

#navbar .first {
	background: none;
}

#navbar .search {
	float: right;
	padding: 3px 5px 0 0;
}

.search input {
	padding: 4px 0 0 25px;
	background: url('../images/main/search-icon.png') #FFFFFF no-repeat;
	background-position: 5px 4px;
	width: 150px;
	font-size: 12px;
	height: 17px;
	border: 1px solid #2d5d87;
	color: #797878;
	font-family: Tahoma;
}

a.navbaritem {
	color: #73777b;
	font-weight: bold;
	font-family: arial;
}

a.navbaritem:visited {
	color: #73777b;
}

a.navbaritem:hover {
	float: left;
	display: block;
	background: url('../images/main/navitem-hover-background.png') repeat-x;
	text-decoration: none;
	height: 33px;
}

/**
 * Content
 */
#content {
	float: left;
	padding: 10px;
	width: 935px;
	background-color: #ffffff;
}


#content h2 {
	padding: 0px;
	margin: 0px  0px 0px 0px;
	font-size: 18px;
	font-weight: bold;	
	border-bottom: 1px solid #dfdfdf;
	padding-bottom: 5px;
}

#content .header3 {
	padding: 0px;
	margin-top: 1px;
	margin-bottom: 1px;
	font-size: 16px;
	font-weight: bold;	
}

#content .header4 {
	padding: 0px;
	margin-top: 1px;
	margin-bottom: 1px;
	font-size: 14px;
	font-weight: bold;	
}

#content h3 h4 {
	padding: 0px;
	margin: 0px;
}

#content h3 {
	font-size: 16px;
}

#content h4 {
	font-size: 14px;
}

#content .header {
	float: left;
	width: 100%;
	border-bottom: 1px solid #dfdfdf;
	margin-bottom: 15px;
}

#content .page-title {
	float: left;
	padding-top: 10px;
	font-size: 23px;
	color: #363636;
	font-family: Arial;
}

#content .page-title a {
	font-size: 23px;
	color: #363636;
	font-family: Arial;
}

#content .page-title a:hover {
	font-size: 23px;
	color: #3B8CDE;
	font-family: Arial;
}

#content .content-header {
	float: left;
	width: 100%;
	border-bottom: 1px solid #dfdfdf;
	margin-bottom: 5px;
}

#content .content-page-title {
	float: left;
	padding-top: 10px;
	font-size: 22px;
	font-weight: bold;
	color: #3d7eac;
}

#content .header-icon {
	float: right;
	padding-right: 20px;
	width: 65px;
	height: 42px;
	background: url('../images/main/page-header.png') no-repeat;
}

#content .description {
	float: left;
	padding: 10px 0 10px 0;
	width: 935px;
}

#content .left-column {
	float: left;
	width: 702px;
}

#content .right-column {
	float: left;
	width: 223px;
	margin-left: 10px;
}

#content .one-column {
	float: left;
	width: 935px;
}

#content .left-column-profile {
	float: left;
	width: 226px;
}

#content .right-column-profile {
	float: left;
	width: 699px;
	margin-left: 10px;
}

#content .profile-image {
	width: 205px;
	padding: 8px;
	background-color: #487dbf;
	border: 1px solid #285184;
}

#content .profile-image img {
	border: 2px solid #bbcfdc;
}

#content .left-column-profile .profile-links {
	padding: 10px 0 10px 0;
}


/**
 * Box
 */
#box {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}

#box .header {
	float: left;
	width: 100%;
	background: url('../images/box/header-background.png') repeat-x;
	border: 0;
}

#box .left-header {
	float: left;
	width: 6px;
	height: 29px;
	background: url('../images/box/header-left.png') no-repeat;
}

#box .header-title {
	float: left;
	width: 90%;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	padding: 5px 0 0 5px;
	color: white;
}

#box .right-header {
	float: right;
	width: 6px;
	height: 29px;
	background: url('../images/box/header-right.png') no-repeat;
}

#box .content {
	width: 100% - 2px;
	border: 1px solid #aab2bc;
	border-top: 0px solid;
}

#box .content-body {
	padding: 10px;
}

/**
 * Login Form
 */
#login {
	 width: 205px;
}

#login .inputfield {
	float: left;
	width: 190px;
	padding: 3px 5px 5px 5px;
	border: 1px solid #b6b5b5;
	font-size: 12px;
	height: 14px;
}

#login label {
	float: left;
	padding: 5px 0 3px 0;
	color: #9b9c9c;
	font-weight: bold;
	font-size: 12px;
}

#login .forgot-password {
	float: left;
	padding-top: 5px;
	color: #4c97da;
	font-size: 10px;
}

#login .login-button {
	float: right;
	width: 66px;
	height: 23px;
	margin: 5px 2px 0 0;
}

#login .register {
	float: left;
	margin-top: 10px;
	width: 200px;
	background-color: #F3F9FF;
	text-align: center;
	border: 2px solid #B5D2EF;
}

#login .register a {
	width: 180px;
	padding: 5px;
	display: block;
}

/**
 * Registration
 */
#signup {
	padding: 10px;
}

#signup table {
	padding: 10px;
	background-color: #f6f9fb;
	border: 1px solid #9fb7cb;
}

#signup tr {
	float: left;
	margin-top: 10px;
	padding: 10px;
	background-color: #fcfdfd;
	border: 1px solid #d4d4d4;
	width: 650px;
}

#signup td {
	float: left;
	width: 100%;
}

/**
 * Content Page
 */

#content-page {
	margin-top: 10px;
}

#content-page .not-found {
	padding: 10px;
	background-color: #f3f9ff;
	border: 1px solid #356aad;
}

/**
 * News Feed
 */

#news-feed {
	
}

#news-feed .day {
	float: left;
	font-size: 12px;
	font-weight: bold;
	color: #9b9c9c;
	margin: 3px 0 5px 0;
}

#news-feed .item-group {
	float: left;
	width: 650px;
	margin-top: 10px;
	padding: 10px;
	background-color: #f3f9ff;
}

#news-feed .item-group-first {
	margin-top: 0px;
}

#news-feed .item {
	font-size: 12px;
	color: black;
	line-height: 18px;
}

#news-feed .text {
	float: left;
	padding-top: 3px;
}

#news-feed .icon {
	float: left;
	width: 16px;
	padding-right: 5px;
}

/**
 * Games List
 */
#games-list {
	padding-top: 10px;
}

#games-list .category {
	font-size: 14px;
	font-weight: bold;
	color: #3D7EAC;
	padding-bottom: 3px;
	border-bottom: 1px solid #3D7EAC;
}

#games-list .items {
	padding-top: 5px;
}

#games-list .item-odd {
	background-color: #f3f9ff;
	padding: 5px;
}

#games-list .item-even {
	background-color: white;
	padding: 5px;
}

#games-list .player-count {
	padding-top: 3px;
}

#games-list .more {
	font-weight: bold;
	padding-top: 3px;
}

/**
 * Tab Bar
 */
#tabbar {
	float: left;
	width: 100%;
	height: 29px;
	position: relative;
	margin-left: 20px;
	z-index: 1000;
}

#tabbar .tab {
	float: left;
	background: url('../images/tabbar/tab-background.png') repeat-x;
	border: 1px solid #4b7ab6;
	border-bottom: 1px solid #356aad;
	padding: 7px;
	height: 14px;
}

.tab a {
	color: #ffffff;
}

.tab a:visited {
	color: #ffffff;
}

#tabbar .tab-active {
	float: left;
	border: 1px solid #4b7ab6;
	border-bottom: 1px solid #f3f9ff;
	height: 14px;
	padding: 7px;
	background-color: #f3f9ff;
}

#tabbar .spacing {
	width: 2px;
	float: left;
}

#tab-content {
	float: left;
	width: 100%;
	border: 1px solid #356aad;
	margin-bottom: 10px;
	background-color: #f3f9ff;
	position: relative;
	z-index: 0;
}

#tab-content .content {
	padding: 10px;
}

/**
 * Profile Info
 */

#profile-info {
	
}

#profile-info .item-title {
	font-size: 12px;
	color: #5d5d5d;
	font-weight: bold;
	padding: 3px 0 3px 0;
}

#profile-info .item {
	padding: 3px 0 3px 0;
	color: black;
}

/**
 *
 */

#wall-comments {

}

#wall-comments .add-comment {
	margin-top: 10px;
	margin-bottom: 10px;
}

#wall-comments textarea {
	
	width: 660px;
	height: 100px;
}

#wall-comments textareaold {
	font-family: Verdana;
	font-size: 12px;
	padding: 5px;
	width: 660px;
	height: 100px;
	border: 1px solid #b6b5b5;
	background-color: #f6faff;
}

#wall-comments .comment-odd {
	float: left;
	width: 655px;
	padding: 10px;
	border-top: 1px dotted #83aac7;
	border-bottom: 1px dotted #83aac7;
	background-color: #dde8f5;
}

#wall-comments .comment-even {
	float: left;
	width: 655px;
	padding: 10px;
	background-color: white;
}

#wall-comments .comments {
	width: 670px;
}

#wall-comments .user-image {
	float: left;
	width: 50px;
	padding: 5px 7px 7px 5px;
	height: 50px;
	background-color: #afc3d0;
	border: 1px solid #878889;
}

#wall-comments .user-image img {
	border: 1px solid #b6b5b5;
}

#wall-comments .comment-content {
	float: left;
	width: 570px;
	padding: 5px 10px 0 10px;
	border: 0px;
}

#wall-comments .comment-username {
	float: left;
	padding-left: 10px;
	width: 350px;
	font-size: 14px;
}

#wall-comments .comment-username a {
	font-weight: bold;
	color: #1f5ba5;
}

#wall-comments .date-posted {
	float: right;
	text-align: right;
	width: 200px;
	color: #8d99a6;
}

#wall-comments .moderator {
	float: right;
	text-align: right;
	width: 300px;
}


/**
 *
 */

#forum-comments {

}

#forum-comments .list-forum a {
	font-weight: bold;
	
	font-size: 13px;
}

#forum-comments .list-subforum {
	font-size: 11px;
}

#forum-comments .list-subforum a {
	font-weight: bold;
	color: black;
	font-size: 11px;
}

#forum-comments .list-subsubforum {
	font-size: 11px;
}

#forum-comments .list-subsubforum a {
	color: black;
	font-weight: normal;
	font-size: 11px;
}


#forum-comments .add-comment {
	padding: 10px 0 10px 0;
}

#forum-comments .comment-odd {
	float: left;
	width: 100%;
	border-top: 1px dotted #83aac7;
	border-bottom: 1px dotted #83aac7;
	background-color: #dde8f5;
}

#forum-comments .comment-even {
	float: left;
	width: 100%;
	background-color: white;
}

#forum-comments .comments {
	padding: 10px;
}

#forum-comments .comment-body {
	float: left;
	padding: 10px;
	border: 1px solid #878889;
	width: 100%;
	word-wrap: break-word; 
}

#forum-comments .user-image {
	width: 50px;
	margin-top: 10px;
	padding: 5px 7px 7px 5px;
	height: 50px;
	background-color: #afc3d0;
	border: 1px solid #878889;
}

#forum-comments .user-image img {
	border: 1px solid #b6b5b5;
}


#forum-comments .comment-username {
	font-size: 13px;
}

#forum-comments .comment-username a {
	font-weight: bold;
	color: #1f5ba5;
}

#forum-comments .comment-level {
	font-size: 11px;
}

#forum-comments .comment-level a {	
	color: black;
}


#forum-comments .comment-title {
	padding: 0px;
	font-size: 14px;
	font-weight: bold;
	color: black;
	margin: 0px;
}


#forum-comments .comment-content 
{
	margin: 0px;
	padding: 10px 0px 0px 0px;
	word-wrap: break-word;
	width: 730px;
}

#forum-comments .date-posted {
	margin: 0px;
	color: #8d99a6;
}

#forum-comments .post-toolbar {
	margin: 0px;
	color: #8d99a6;
}

#forum-comments .forum-quote {
	padding: 10px;
	background-color: #FFF4E8;
	border: 1px solid #FF6600;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left:10px;
}

#forum-comments .quote-author {	
	margin-top: 5px;
	margin-bottom: 5px;
}

#forumquickreply textarea {
	
	width: 660px;
	height: 100px;
}

.forum-pagestart {
	width: 4px;
	height: 10px;
	float: left;
	
}

#forum .forum-pagenum {
	
	float: left;
	border: 1px solid #D6D6D6;
	background-color: white;
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 2px;
	padding-right: 2px;
}

#forum .forum-pagenum a {
	font-size: 12px;
}

#forum .forum-title {
	
}

#forum .forum-titletext {
	float: left;
}

#forum .forum-subtitle {
	
}

#forum .forum-postdate {

}

#forum .forum-pages {
	float: left;
}

.forum-header
{
	padding: 0px 0px 4px 0px;
}


/* Align columns to the top, and add some space between them. */
table.bbcode_columns { border-collapse: collapse;
    margin-top: 1em; margin-bottom: 1em; }
table.bbcode_columns td.bbcode_column { padding: 0 1em; vertical-align: top;}
table.bbcode_columns td.bbcode_firstcolumn { border-left: 0; padding-left: 0; }

/* Wrap quotes in a big blue box. */
div.bbcode_quote { border: 1px solid #6F6458; margin: 0.5em 0; }
div.bbcode_quote_head { background-color: #6F6458; color: white;
    font-weight: normal; padding: 0.25em 0.5em; }
div.bbcode_quote_head a { font-weight: bold  }
div.bbcode_quote_head a:link { color: white; }
div.bbcode_quote_head a:visited { color: white; }
div.bbcode_quote_head a:hover { color: white; text-decoration: underline; }
div.bbcode_quote_head a:active { color: white; text-decoration: underline; }
div.bbcode_quote_body { background-color: #FFF4E8;
    color: black; padding: 0.5em 1em; }

/* Wrap code in a big blue box. */
div.bbcode_code { border: 1px solid #6F6458; margin: 0.5em 0; }
div.bbcode_code_head { background-color: #6F6458; color: white;
    font-weight: normal; padding: 0.25em 0.5em; }
div.bbcode_code_body { background-color: #FFF4E8; color: black;
    font: 10pt monospace; padding: 0.5em 1em; }
    

#pagebrowser {
	float: left;
	border-top: 1px dotted #83aac7;
	border-bottom: 1px dotted #83aac7;
	padding: 10px 0 10px 0;
	background-color: #DDE8F5;
	text-align: left;
	width: 100%;
}

#pagebrowser .items {
	float: left;
	text-align: center;
	width: 100%;
}

#pagebrowser .current-page {
	font-weight: bold;
	margin: -1px 0 0 0;
	font-size: 12px;
}

#pagebrowser .page {
	padding: 0 2px 0 2px;
}

#pagebrowser .count {
	float: left;
	text-align: left;
	font-size: 10px;
	color: #787878;
	padding: 0 0 0 10px;
	width: auto;
}

/**
 * Footer
 */
 #footer {
	 float: left;
	 width: 100%;
	 height: 74px;
	 text-align: center;
	 background: url('../images/main/footer-background.png') repeat-x;
	 border-top: 2px solid #c9caca;
 }

 #footer .text {
	 padding-top: 30px;
 }

 #footer .links a {
	 color: #4567e6;
	 text-decoration: underline;
 }

/**
 * Settings
 */

#settings {
	padding: 10px;
}

#settings table {
	padding: 10px;
	background-color: #f6f9fb;
	border: 1px solid #9fb7cb;
}

#settings tr {
	float: left;
	margin-top: 10px;
	padding: 10px;
	background-color: #fcfdfd;
	border: 1px solid #d4d4d4;
	width: 845px;
}

#settings td {
	float: left;
	width: 100%;
}

h1 {
	font-size: 18px;
	color: #393939;
	font-weight: bold;
}

/**
 * Profile page
 */
#profile-team {
	float: left;
	width: 100%;
	border-bottom: 1px dotted black;
	padding: 0 0 8px 0;
	margin: -5px 0 5px 0;
}

#profile-team .picture {
	float: left;
	width: 50px;
	height: 50px;
}

#profile-team .information {
	float: left;
	width: 145px;
	padding: 0 0 0 5px;
}

/**
 * Pages
 */
.pages-block {
	width: 100%;
	margin-top: 10px;
	background-color: #DFEDF9;
	padding: 5px;
	border: 2px solid #87BAE5;
}

hr {
	border: 0px;
	height: 1px;
	border-bottom: 1px solid #DFDFDF;
}

ul {
	list-style: square;
	padding-left: 15px;
	margin-top: 10px;
}

li {
	color: black;
}

.toc-block {
	margin-top: 10px;
	background-color: #DFEDF9;
	padding: 5px;
	border: 2px solid #87BAE5;
}

.toc-header {
	text-align: center;
	font-weight: bold;
	font-size: 13px;
}

.toc-link1 {
}

.toc-link2 {
	padding-left: 30px;
}

.toc-link3 {
	padding-left: 50px;
}

.toc-link4 {
	padding-left: 70px;
}

/**
 * Friends
 */
#friends {
	float: left;
	width: 100%;
}

#friends .odd {
	float: left;
	padding: 5px 0 5px 0;
	width: 100%;
	background-color: #F3F9FF;
	height: 50px;
}

#friends .even {
	float: left;
	padding: 5px 0 5px 0;
	width: 100%;
	height: 50px;
}

#friends .image {
	float: left;
	padding-left: 5px;
	width: 50px;
}

#friends .name {
	float: left;
	padding: 20px 0 0 10px;
}

#friends-count {
	float: left;
	padding-top: 10px;
	width: 100%;
}

/**
 * games
 */
#games {
	float: left;
	width: 100%;
}

#games .image {
	float: left;
	width: 90px;
	padding: 0 5px 0 5px;
}

#games .content-table {
	float: left;
	padding-left: 10px;
	width: 820px;
}

.player-profile-game {
	background-color: #DDE8F5;
	padding: 5px;
	border: 2px solid #4881C5;
	width: 920px;
	margin-top: 10px;
}

#lobby {
	float: left;
	width: 100%;
}

#lobby .left-content {
	float: left;
	width: 700px;
	padding-left: 10px;
}

#lobby .game-image {
	float: left;
	width: 90px;
	padding: 5px;
}

#lobby .game-information {
	float: left;
	width: 550px;
	padding-left: 5px;
}

#lobby .right-content {
	float: left;
	width: 225px;
}

#games-list {
	float: left;
	width: 100%;
}

.user-team-link {
	padding: 5px 0 15px 0;
}


.thumb-img {
	border-top:1px solid #CCC; border-left:1px solid #CCC; border-bottom:1px solid #AAA; border-right:1px solid #AAA;
	position:relative; 
	width:100px; height:100px;
	margin:10px; padding:6px;
	background:#FFF;
	cursor: hand;
}

.thumb-inner {
	position:relative; overflow:hidden; width:100%; height:100%; 
}
.thumb-img img {
	border:0;
	width:100px;
	height:100px;
}
.thumb-strip {
	position:absolute; width:100px; height:10px; bottom:6px; left:6px;
	background:#FFF;
	
	filter: alpha(opacity=60);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	-moz-opacity: 0.60;
	opacity:0.60;
}
.thumb-zoom {
	background:url(../images/thumbs/search.png) no-repeat;
	position:absolute; width:22px; height:22px;
	right:10px; bottom:7px;
}