/********************************************\
 * CSS Stylesheet for http://www.friendcodes.nl       *
 \********************************************/ 

body {
	background: #FFF4E2 url('../images/outerBG.jpg') repeat-x; 
	padding:0px; 
	margin:0px;
	font-family:tahoma, verdana, sans-serif; /*Trebuchet MS*/
	font-size:11px;
	line-height:18px;
	text-align:center;
}

/********************
  OUTSIDE LAYOUT  
*********************/
#container {
	width:924px; /*10+4+896+10+4*/
	text-align:left;
	background: url('../images/allShadow.jpg') repeat-y;
	margin-left:auto;
	margin-right:auto;
}

#leftShadow {
	float:left;
	width:10px;
	height:590px;
	background: url('../images/leftShadowGradient.jpg') repeat-y; 
}
#rightShadow {
	float:left;
	width:10px;
	height:590px;
	background: url('../images/rightShadowGradient.jpg') repeat-y; 
}
#middleContainer {
	float:left;
	width:896px;
	border-left:solid 4px #FFFFFF;
	border-right:solid 4px #FFFFFF;
	background: #D3CABB url('../images/middleBG.jpg') no-repeat;
}

/********************
  INSIDE LAYOUT  
*********************/
#loginbox {
	float:right;
	width:557px;
	height:26px;
	margin:0px;
	padding:10px;
	padding-top:13px;
	font-family: Verdana;
	color: #FFFFFF;
	font-size:10px;
}
#loginbox input {
	font-size:10px;
	font-family: Verdana;
}
#loginbox p {
	padding:0px;
	margin:0px;
}
#loginbox .text {
	width:70px;
}
#loginbox .checkbox {
	position:relative;
	top:2px;
}
#loginbox .msgalert {
	margin-left:5px; 
	float:left; 
	position:relative; 
	top:2px;
}
#loginbox a {
	color: #FFFFFF;
	text-decoration:none;
	font-weight:bold;
}
#loginbox a:hover {
	color: #000000;
}

#lowerMiddleContainer {
	padding:4px;
	padding-top:60px;
}

/********************
  TABS  
*********************/
#tabs {
	font-size:10px;
	font-family: Verdana;
	line-height:12px;
}
#tabs div {
	float:left;
	height:23px;
}

#tabs a {
	margin-top:8px;
	display:block;
	width:190px;
	text-align:center;
	color: #FF8C1E;
	font-weight: bold;
	text-decoration: none;
}
#tabs a:hover {
	color: #000000;
}

/* Main pieces */
#tabs .left {
	width:208px;
	background: url('../images/tabBG0.gif') repeat-x;
}
#tabs .middle {
	width:205px;
	background: url('../images/tabBG0.gif') repeat-x;
}
#tabs .right {
	width:205px;
	background: url('../images/tabBG0.gif') repeat-x;
}
#tabs .active {
	background: url('../images/tabBG1.gif') repeat-x;
}
#tabs .active a {
	margin-top:5px;
	color: #FF4F00;
}
#tabs .active a:hover {
	color: #000000;
}

/*Between pieces*/
#tabs .sMiddle {
	width:15px;
}
#tabs .sLeft, #tabs .sRight {
	width:10px;
}

#tabs .l1{
	background: url('../images/tabLeft1.gif');
}
#tabs .l0{
	background: url('../images/tabLeft0.gif');
}

#tabs .r1{
	background: url('../images/tabRight1.gif');
}
#tabs .r0{
	background: url('../images/tabRight0.gif');
}

#tabs .m10 {
	background: url('../images/tabMiddle10.gif');
}
#tabs .m00 {
	background: url('../images/tabMiddle00.gif');
}
#tabs .m01 {
	background: url('../images/tabMiddle01.gif');
}

/********************
  CONTENT  
*********************/
#content {
	background: #FFFFFF url('../images/contentBG.png') repeat-x;
	border-top: none;
	border-left: solid 1px #FFFFFF;
	border-right: solid 1px #DDC7A3;
	border-bottom: solid 1px #DDC7A3;
	padding:10px;
	color: #555555; /*6C7F97*/
}

/********************
  BUTTONS  
*********************/
#buttons {
	margin-bottom:10px;
	line-height:13px;
}
#buttons div {
	float:left;
	height:25px;
}
#buttons .left {
	background: url('../images/buttonLeft.png');
	width:6px;
}
#buttons .right {
	background: url('../images/buttonRight.png');
	width:6px;
}
#buttons .middle {
	background: url('../images/buttonMiddle.png');
	width:6px;
}
#buttons .button {
	background: url('../images/buttonBG.png');
	padding-left:20px;
	padding-right:20px;
}
#buttons #IEnoTransparentPNG .left { background: url('../images/buttonLeftNOTRANSP.png'); }
#buttons #IEnoTransparentPNG .right { background: url('../images/buttonRightNOTRANSP.png'); }
#buttons #IEnoTransparentPNG .middle { background: url('../images/buttonMiddleNOTRANSP.png'); }
#buttons #IEnoTransparentPNG .button { background: url('../images/buttonBGNOTRANSP.png'); }

#buttons a {
	position:relative;
	display:block;
	margin-top:6px;
	text-decoration:none;
	font-weight:bold;
	font-family: Verdana;
	font-size:11px;
	color: #838F9D;
}
#buttons a:hover {
	color: #2B6AB8;
}
#buttons .active a {
	color: #2B6AB8;
}

/********************
  INSIDE  
*********************/
#leftContent {
	float:left;
	width:570px;
	border:solid 1px #C8D2DE;
	margin-right:4px;
	padding:5px;
	padding-left:10px;
	padding-right:10px;
	overflow:hidden;
}

#rightContent {
	float:left;
}

#rightContent div {
	width:258px;
	border:solid 1px #C8D2DE;
	background: #E7EBF0;
	margin-bottom:4px;
	padding:5px;
	overflow:hidden;
}

/********************
 GENERAL TAG RESTYLING 
*********************/
/*text*/
h1 {
	color: #2B6AB8;
	font-size:16px;
	margin:10px;
	margin-left:2px;
	margin-right:2px;
	font-weight:normal;
}
h2 {
	font-size:14px;
	margin:10px;
	margin-left:4px;
	margin-right:4px;
	font-weight:normal;
}
p {
	margin:10px;
	margin-left:6px;
	margin-right:6px;
}

/*Links*/
a {
	color: #2B6AB8;
	text-decoration:underline;
}
a:hover {
	color: #000000;
}

/*lists*/
ul {
	margin:10px;
	padding-left:20px;
}

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

/********************
  FORM TAGS 
*********************/
form {
	margin:0px;
	padding:0px;
}
input {
	font-family: verdana, sans-serif;
	font-size:11px;
}
select {
	font-family: verdana, sans-serif;
	font-size:11px;
}

/*aanmeld pagina form styling*/
fieldset.wide label{
	display:block; 
	width:170px; 
	float:left; 
	text-align:right;
}
fieldset.wide input, fieldset.wide textarea, fieldset.wide select  {
	margin-right:5px; 
	margin-left:5px;
}
fieldset.wide .button {
	margin-left:175px;
}

/*fc pagina form styling*/
fieldset.small label {
	display:block; 
	width:100px; 
	float:left; 
	text-align:right;
}
fieldset.small input, fieldset.small textarea, fieldset.small select {
	margin-right:5px; 
	margin-left:5px;
}
fieldset.small .button {
	margin-left:105px;
}

fieldset.wideinput input, fieldset.wideinput textarea {
	width:300px;
}
fieldset.wideinput textarea {
	height:100px;
}
fieldset.wideinput .button {
	width:140px;
}

fieldset.extrawideinput input, fieldset.extrawideinput textarea {
	width:500px;
}
fieldset.extrawideinput textarea {
	height:100px;
}
fieldset.extrawideinput .button {
	width:140px;
}

/********************
  TABLE TAGS 
*********************/
table {
    border-spacing: 0px;
    border-collapse: collapse;
	margin:10px;
	margin-top:0px;
	width:550px;
}
th {
	background: #6C7F97;
	border-bottom:solid 4px #FFFFFF;
	color: #FFFFFF;
	font-weight:bold;
	padding:10px;
	padding-top:2px;
	padding-bottom:2px;
}
td {
	background: #E7EBF0;
	border-bottom: solid 4px #FFFFFF;
	padding:10px;
	padding-top:2px;
	padding-bottom:2px;
}
td.alt {
	background: #F1F4F8;
}
caption {
	font-weight:bold;
	color: #6C7F97;
	margin-top:10px;
}

/********************
  OTHER CLASSES 
*********************/
.error {
	color: #FF0000;
}
.success {
	color: #00FF00;
}
.warning {
	color: #FF9000;
}

.paginate span {
	color: #A0B5D0;
	border: solid 1px;
	margin-right:2px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:5px;
	padding-right:5px;
}
.paginate a {
	border: solid 1px #A0B5D0;
	text-decoration:none;
	margin-right:2px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:5px;
	padding-right:5px;
}
.paginate a:hover {
	background: #E7EBF0;
	color: #2B6AB8;
}
.paginate span.active {
	color: #FFFFFF;
	background: #2B6AB8;
	border:solid 1px #2B6AB8;
}

/********************
  FORUM ONLY 
*********************/
#forumLeftContent {
	float:left;
	width:678px;
	border:solid 1px #C8D2DE;
	margin-right:4px;
	padding:5px;
	padding-left:10px;
	padding-right:10px;
	overflow:hidden;
}
#forumRightContent {
	float:left;
}
#forumRightContent div {
	width:160px;
	overflow:hidden;
	border:solid 1px #C8D2DE;
	background: #E7EBF0;
	margin-bottom:4px;
}

#forumLeftContent table {
	width:658px;
}
#forumLeftContent .message {
	border:solid 1px #6C7F97; 
	padding:10px;
	margin:10px;
}
#forumLeftContent .userBox {
	float:left; 
	width:150px; 
	border-right:solid 4px #6C7F97; 
	border-bottom:solid 0px #6C7F97;
	margin-right:10px; 
}
#forumLeftContent .userBox img {
	float:right;
	margin:4px;
}
#forumLeftContent .userBox a {
	text-decoration:none;
}
#forumLeftContent .messageBox {
	float:right;
	width: 470px;
}
#forumLeftContent table a {
	text-decoration:none;
}
#forumLeftContent .userBox input {
	width:100px;
}




#footnote {
	padding-bottom:10px;
	text-align:center;
}
/*
playback timings (ms):
  capture_cache.get: 0.457
  captures_list: 0.483
  exclusion.robots: 0.018
  exclusion.robots.policy: 0.008
  esindex: 0.012
  cdx.remote: 5.98
  LoadShardBlock: 437.454 (3)
  PetaboxLoader3.datanode: 446.811 (4)
  PetaboxLoader3.resolve: 123.39 (2)
  load_resource: 139.32
*/

/* Local archive fixes */
#forumLeftContent .messageBox img {max-width:100%; height:auto;}
#forumLeftContent .messageBox blockquote {margin: 10px 0; padding-left: 10px; border-left: solid 4px #C8D2DE;}
#forumLeftContent .messageBox pre {overflow:auto;}

/* Profielpagina - gemaakte topics tabel */
#leftContent #topicsTable{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
}

#leftContent #topicsTable th:nth-child(1),
#leftContent #topicsTable td:nth-child(1){
    width:52%;
}

#leftContent #topicsTable th:nth-child(2),
#leftContent #topicsTable td:nth-child(2){
    width:18%;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
}

#leftContent #topicsTable th:nth-child(3),
#leftContent #topicsTable td:nth-child(3){
    width:12%;
    text-align:center;
}

#leftContent #topicsTable th:nth-child(4),
#leftContent #topicsTable td:nth-child(4){
    width:12%;
    text-align:center;
}

#leftContent #topicsTable td:nth-child(2) a{
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
}

/* Gemaakte topics op profielpagina: auteur mag niet in 3 regels breken */
#leftContent #topicsTable {
    width: 100% !important;
    table-layout: auto !important;
}

#leftContent #topicsTable th:nth-child(1),
#leftContent #topicsTable td:nth-child(1) {
    width: 50% !important;
}

#leftContent #topicsTable th:nth-child(2),
#leftContent #topicsTable td:nth-child(2) {
    width: 22% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

#leftContent #topicsTable th:nth-child(3),
#leftContent #topicsTable td:nth-child(3) {
    width: 14% !important;
    text-align: center !important;
}

#leftContent #topicsTable th:nth-child(4),
#leftContent #topicsTable td:nth-child(4) {
    width: 14% !important;
    text-align: center !important;
}

#leftContent #topicsTable td:nth-child(2) a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    display: inline !important;
}

/* Oude Friendcodes look: geen zebra rows, alles dezelfde blauwe rijstijl */
#content table td.alt,
#forumLeftContent table td.alt,
#leftContent table td.alt,
#rightContent table td.alt {
    background-color: #CDD6E0 !important;
}

/* Alles dezelfde rijachtergrond */
#content table td,
#content table td.alt,
#forumLeftContent table td,
#forumLeftContent table td.alt,
#leftContent table td,
#leftContent table td.alt,
#rightContent table td,
#rightContent table td.alt {
    background-color: #CDD6E0 !important;
}

/* Originele Friendcodes blauwe rijen */
#content table td,
#content table td.alt,
#forumLeftContent table td,
#forumLeftContent table td.alt,
#leftContent table td,
#leftContent table td.alt,
#rightContent table td,
#rightContent table td.alt {
    background: #d7e3f4 !important;
}

/* Originele Friendcodes row kleur */
#content table td,
#content table td.alt,
#forumLeftContent table td,
#forumLeftContent table td.alt,
#leftContent table td,
#leftContent table td.alt,
#rightContent table td,
#rightContent table td.alt {
    background: #E7EBF0 !important;
}

/* Forumoverzicht: laatste reactie altijd op 2 regels houden */
#forumLeftContent table td:last-child {
    width: 120px;
    white-space: nowrap;
}

#forumLeftContent table td:last-child a {
    white-space: nowrap;
    display: inline-block;
    line-height: 18px;
}