/*----------------------------------------------------------------------------
[Forms and Tables stylesheet]

This stylesheet should contain forms and table styles only. All styles should
be separated with a heading.

Project:	    	Webstructure.NET
Version:	    	1.0.0 [http://semver.org/]
Primary use:		For use of styling the FORMS and TABLES
Original Author: 	Qasim Alyas
Last change:		18/Mar/10 []
Last Assigned to:	Qasim Alyas

-----------------------------------------------------------------------------*/


a.button {
	display: inline-block;
	vertical-align: top;
	border-radius: 10px;
	padding: 2px 10px;
	color: #fff;
	text-align: center;
	background-color: #27446E;
	background: -moz-linear-gradient(top, #3a6fa8 0%, #284772 100%);
	background: -webkit-linear-gradient(top, #3a6fa8 0%, #284772 100%);
	background: -ms-linear-gradient(top, #3a6fa8 0%, #284772 100%);
	background: linear-gradient(to bottom, #3a6fa8 0%, #284772 100%);
}
a.button:hover {
	text-decoration: none;
}

/* =FORMS */
.storytext .formbox {
	margin-bottom:21px;
	border: 0;
	padding:0;
	background:#E7F5FB url(/magazine/graphics/decoration/factFileTop.png) no-repeat 0 0;
}
#reportContentResponse .storytext .formbox {
	background:0;
}
	.storytext .formbox .formbox_sleeve {
		background:url(/magazine/graphics/decoration/factFileBottom.png) no-repeat 0 100%;
		padding:14px 14px 0;
	}
	#reportContentResponse .storytext .formbox .formbox_sleeve {
		background:0;
		padding:0;
	}
		.storytext .formbox_sleeve > h2 {
			border-bottom:4px solid #7FC7E8;
			color:#27446E;
			font-size:1.077em;
			font-weight:bold;
			line-height:1.5;
			margin-bottom:7px;
			padding:0 0 3px;
		}

/* Generic form styles */
.formbox {
	margin-bottom: 21px;
	background-color: #FFF;
}
	.formbox .formbox_sleeve {
		position: relative;
	}
	.formbox hr {
		clear: both;
	}
	.formbox h2 {
		margin: 0 0 10px;
		padding: 0 0 4px;
	}
	.formbox .alert p {
		margin-bottom: 8px;
		padding:  1px 0;
	}
		.formbox .alert p img {
			float: none;
			padding: 0 2px;
			vertical-align: top;
		}
	.formbox .mandatory {
		float: right;
		padding-top: 3px;
		vertical-align: top;
	}
	.field {
		margin-bottom: 14px;
		line-height: 1.231;
	}
	.postOptions {
		margin-bottom:0;
	}
	#feedback .error,
	#report_moderator .error,
	#signin .error {
		padding:0;
	}
	.field:after {
		content: ".";
		clear: both;
		display: block;
		height: 0;
		visibility: hidden;
	}
	.field label, .field .label {
		float: left;
		margin:0 10px 0 0;
		font-weight: bold;
		font-size: 1em;
		line-height: 1.231;
		width:136px;
	}
		.field div {
			margin-left: 146px;
		}
			.field_text {
				margin-bottom: 8px;
				font-size:.846em;
				line-height:1.273;
			}
		.field .text_field {
			margin-bottom: 0;
		}
		.button {
			margin-left: 146px;
		}
		.forgottenpassword div {
			font-size: 1em;
			line-height: 1.231;
		}
		#forgotten_password .text {
			width:63%;
		}
		#forgotten_password .field label {
			padding-top:4px;
		}
		.loginoptions div a {
			display:block;
			font-size: 1em;
			line-height: 1.231;
			margin-bottom: 14px;
		}

	/* Generic form elements [text fields, text areas, radio and checkboxes] styles */
	.text {
		width: 71%;
	}
	.text, select {
		border: 1px solid #79C7E8;
		padding: 5px;
		font-size: 1em;
		line-height: 1.231;
		color: #333;
		float:left;
	}
	select {
		height:2.15em;
		padding:4px;
		width: 73.1%;
	}
	textarea {
		height: 100px;
		font-family:Tahoma, Arial, Helvetica, sans-serif;
	}
	.formsmall {
		width:27%;
	}
	.formmedium {
		width:47%;
	}
	.formlarge {
		width: 71%;
	}

	select.formsmall {
		width: 29%;
	}
	select.formmedium {
		width: 49%;
	}
	select.formlarge {
		width: 73.1%;
	}

	/* Radio and checkboxes */
	.field .radio, .field .checkbox {
		margin-left: 0;
	}
	.field .checkbox {
		margin-bottom: 0;
		margin-top: 0;
	}

	/* Select dates */
	.dategroup_day {
		width: 65px;
	}
	.dategroup_month {
		width: 105px;
	}
	.dategroup_year {
		width: 65px;
	}

	/* Form buttons */
	.button .submit {
		display: block;
		border: 0;
		width: 59px;
		height: 19px;
		text-indent: -9999px;
		cursor: pointer;
		background: url(/magazine/graphics/buttons/button.submit.png) no-repeat top;
	}

	/* Feedback message */
	.feedback_box {
		background:#FFF;
		border:4px solid #399EE7;
		padding:12px;
		position:absolute;
		width:320px;
		z-index:10;
		margin-left: 20%;
	}
		#comments_form .feedback_box h2,
		.storytext .feedback_box h2 {
			border: 0;
		}
		#comments_form .feedback_box p,
		.feedback_box p {
			margin: 7px 0 0;
		}
			.feedback_box_sleeve .feedback_close a {
				background: url(/magazine/graphics/buttons/tb.close.png) 0 0 no-repeat;
				float: right;
				height: 34px;
				outline: none;
				position: absolute;
				right: -14px;
				text-indent: -9999px;
				top: -14px;
				width: 34px;
			}
	.human_test strong {
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	.human_test label {
		float: none;
		display: block;
		width: auto;
		padding-right: 0;
	}
		.human_test label * {
			vertical-align: top;
		}
			.human_test label span {
				display: inline-block;
				margin-left: 38px;
				width: 311px;
				font-weight: normal;
				font-size: 1em;
			}
	.human_test #humantestans {
		margin-top: 10px;
		margin-left: 110px;
	}


	/* =FORM ERROR STYLES */

	.signIn .errorbox_large ul, #access_denied .errorbox_large ul {
		padding-right: 0;
	}

	/* Summary Validation styles */
	.errorbox_large {
		border-radius:4px 4px 4px 4px;
		-moz-border-radius:4px 4px 4px 4px;
		-webkit-border-radius:4px 4px 4px 4px;
		margin-bottom: 14px;
		padding: 14px 100px 7px 14px;
		background: #D92940 url(/magazine/graphics/icons/warning.large.png) no-repeat 99% 6px;
		min-height:65px;
	}
		.errorbox_large ul {
			margin: 14px 0 0;
			padding-right:100px;
		}
			.errorbox_large li {
				background: url(/magazine/graphics/decoration/errorList.png) no-repeat 0 5px;
				font-weight: bold;
				color: #FFF;
			}
				.errorbox_large li a,
				.errorbox_large li a:visited {
					color: #FFF;
					text-decoration: underline;
				}
				.errorbox_large li a:hover,
				.errorbox_large li a:focus {
					text-decoration: none;
				}
				.errorbox_large label {
					color: #FFF;
					cursor: pointer;
					border-bottom:1px dotted #FFF;
				}
				.errorbox_large label:hover {
					border:0;
				}

		/* Inline validation styles */
		.errorbox {
			background:url(/magazine/graphics/decoration/warning.arrow.png) no-repeat 0 100%;
			font-weight:bold;
			margin-bottom:1px;
			padding-bottom:9px;
		}
			.errorbox_sleeve {
				border-radius:4px 4px 4px 4px;
				-moz-border-radius:4px 4px 4px 4px;
				-webkit-border-radius:4px 4px 4px 4px;
				background-color:#D92940;
			}
			.errorbox_large h3, .errorbox p {
				margin: 0;
				font-size: 1em;
				line-height: 1.231;
				color: #FFF;
				font-weight: bold;
				padding-right:100px;
			}
			#comments_form .errorbox p, .errorbox p {
				background:url(/magazine/graphics/icons/warning.small.png) no-repeat 99.3% 5px;
				margin:0;
				padding: 5px 35px 5px 10px;
			}

	.formbox span.note {
		float: left;
		margin-left: 90px;
	}
		.formbox span.note label {
			width: auto;
			font-weight: normal;
		}

	.securityfilter {
		position: absolute;
		left: -9999px;
	}

	/* Additional information for fields */
	.additionalInfo {
		float:left;
		font-size:.846em;
		line-height: 1.273;
	}

	/* Terms and conditions */
	.termsandconditions p,
	.termsandConditions p {
		font-size:.846em;
		line-height: 1.273;
	}
	.termsandconditions p label,
	.termsandConditions p label {
		font-size:.846em;
		line-height: 1.273;
	}
		.termsandconditions .formOptions {
			margin-bottom: 7px;
		}
		.termsandconditions div .button,
		.storytext div .button,
		.subscription.freetrial .button {
			margin-left: 0;
			margin-right: 5px;
		}

	/* Fieldtips styles */
	.fieldtips {
		float:left;
		margin-left: 140px;
		padding-top: 2px;
		font-size:.846em;
		line-height: 1.273;
	}
	#remember_me {
		float: left;
	}

	/* Generic form overrides */
	.formbox .field div div {
		margin-left: 0;
	}
		.formbox .field div label {
			float: none;
			font-weight: normal;
		}
	.formbox .last div .button {
		margin-left: 0;
	}
	.field .errorbox {
		margin-left: 0;
	}
	/* Forms in popups */
	.wvPopupContent .formbox {
		margin-bottom: 0;
		border: 0;
		padding: 0;
		background: 0;
	}
		.wvPopupContent .formbox .formbox_sleeve {
			padding: 0;
			background: 0;
		}
			.wvPopupContent .formbox .button {
				margin-bottom: 0;
			}

.register .button {
	margin-left: 0;
}

	/* =TABLES */
	/* Generic table styles */
	.tableFull {
		margin: 0 0 21px;
		overflow: auto;
		position: relative;
		width: 620px;
	}
	.tableRight {
		width: 300px;
		overflow: auto;
		float: right;
		margin-left: 20px;
	}
	.tableLeft {
		width: 300px;
		overflow: auto;
		float: left;
		margin-right: 20px;
	}
	.tableLeft, .tableRight {
		margin-bottom: 21px;
	}
	.tableFull table {
		width: 100%;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
		color: #333;
		font-size:.923em;
		line-height:1.333;
		font-family: Arial, Helvetica, sans-serif;
	}
		table caption {
			position: absolute;
			left: -9999px;
		}
		table ul {
			font-size:1em;
			margin:0;
		}
		table a, table  a:visited {
			font-weight: normal;
			text-decoration: underline;
		}
		#ForumSection table tbody th a {
			font-weight:bold;
		}
		table a:focus, table a:hover {
			text-decoration: none;
		}
		table p {
			font-size: 1em;
			margin:0;
		}
		table td, table th {
			padding: 10px 7px 11px;
			border-right:2px solid #FFF;
			vertical-align:top;
		}
		table tr.even {
			background-color: #E2E2E2;
		}
		table tfoot td {
			padding-top: 8px;
			padding-bottom: 8px;
		}
		table thead tr {
			background: none;
		}
		table thead th {
			background-color: #99D344;
			color:#FFF;
			font-weight: bold;
			white-space:nowrap;
		}
		table thead .last_post {
			width:100px;
		}
		#ForumTags table thead .last_post {
			width:186px;
		}
		#ForumSection table thead .last_post {
			width:166px;
		}
		table thead th.options {
			width:90px;
		}
		table tbody th {
			font-weight: normal;
		}
		
		/* Legacy tables */
		table.dataloadtable {
			margin: 0 0 21px;
		}
			table.dataloadtable .odd,
			table.dataloadtable .even {
				background-color:#FFF;
			}
				table.dataloadtable td {
					background-color:#F1F1F1;
					border:2px solid #FFF;
				}
				table.dataloadtable .firstrow td {
					background-color:#FFF;
					white-space:nowrap;
					width:auto;
				}
					table.dataloadtable ul,
					table.dataloadtable ol {
						margin-bottom:0;
					}

	/* Comments Index */
	#comment_index table {
		width: 100%;
	}
	.col_posted {
		width: 180px;
		text-align: right;
	}
	
/* Subscribe */
#access_denied {
	background:#E5F4D0 url(/magazine/graphics/decoration/subExtrasLeft.png) no-repeat 0 100%;
	margin-bottom:21px;
	position:relative;
}
	#access_denied h2 {
		background:#FFF;
		border-bottom:4px solid #7FC7E8;
		color:#27446E;
		font-size:1.385em;
		font-weight:bold;
		line-height:1.333;
		margin:-10px -10px 10px;
		padding:0 0 3px;
	}
		#access_denied .formbox_sleeve {
			background:url(/magazine/graphics/decoration/subExtrasRight.png) no-repeat 100% 100%;
			color:#666;
			padding:10px 10px 0;
		}
			#access_denied p {
				border-bottom:1px solid #FFF;
				margin:0 0 14px;
				padding:0 0 13px;
			}
			#access_denied a {
				text-decoration:underline;
			}
			#access_denied a:hover,
			#access_denied a:focus {
				text-decoration:none;
			}
			#access_denied  fieldset {
				padding:0 0 28px;	
			}
			#access_denied .field {
				float:left;
				margin:0;
				padding:0 0 14px;
			}
				#access_denied .field div {
					margin:0;
				}
				#access_denied .field label {
					display:block;
					float:none;
					margin:0;
					padding:0 0 3px;
					width:280px;
				}
				#access_denied .password label {
					margin:0;
				}
				#access_denied .text {
					border-color:#999;
					float:none;
					margin:0;
					width:268px;
				}
				#access_denied #userName {
					margin-right:40px;
				}
					#access_denied .formOptions input {
						float:left;
						height:13px;
						margin:0 5px 0 0;
						width:13px;
					}
					.storytext #access_denied .formOptions label {
						width:600px;
					}
					#access_denied .button {
						margin:0;
					}
					#access_denied .forgottenpassword {
						bottom:0;
						left:10px;
						margin:0;
						position:absolute;
					}
						#access_denied .forgottenpassword a,
						#access_denied .forgottenpassword a:visited {
							background:url(/magazine/graphics/decoration/listsubExtras.png) no-repeat 0 4px;
							color:#666;
							display:block;
							padding:0 0 0 10px;
							text-decoration:none;							
						}
						#access_denied .forgottenpassword a:hover,
						#access_denied .forgottenpassword a:focus {
							text-decoration:underline;
						}
						#access_denied .errorbox {
							background-position:-130px 100%;		
							width:280px;
						}
							#access_denied .errorbox p {
								border:0;
								margin:0;
								padding:5px 35px 5px 10px;
							}

.storytext .emailfriend .formbox_subsleeve .last {
	margin:0;
	padding-bottom:14px;
}

/* My Account Edit */
#editAccount .storytext .formbox {
	background:0;
	margin:0;
}
	#editAccount .storytext .formbox .formbox {
		background:url("/magazine/graphics/decoration/factFileTop.png") no-repeat scroll 0 0 #E7F5FB;
		border:0 none;
		margin-bottom:21px;
		padding:0;
	}
		#editAccount .storytext .formbox .formbox_sleeve {
			background:0;
			padding:0;
		}
			#editAccount .storytext .formbox .formbox .formbox_sleeve {
				background:url("/magazine/graphics/decoration/factFileBottom.png") no-repeat scroll 0 100% transparent;
				padding:14px 14px 0;
			}
				#editAccount .storytext .formbox_sleeve > h2 {
					border:0;
					color:#333;
					font-size:1.538em;
					font-weight:normal;
					line-height:1.2;
					margin-bottom:11px;
					padding:0;
				}
				#editAccount .storytext .formbox h3 {
					border-bottom:1px solid #D0ECF8;
					color:#27446E;
					font-size:1.077em;
					font-weight:bold;
					line-height:1.5;
					margin-bottom:14px;
					padding:0 0 6px;
				}
				#editAccount .storytext .formbox .field {
					clear:left;
					margin:0;
					padding-bottom:14px;	
				}
				#editAccount .storytext .formbox .fieldTwo {
					display:inline-block;
					width:49.6%;
				}
				#editAccount .storytext .formbox .field span {
					display:block;
					font-weight:normal;
					position:absolute;
					top:30px;
					left:100px;
					width:480px;
				}
				#editAccount .storytext .formbox .additionalText {
					padding-bottom:28px;	
				}
				#editAccount .storytext .formbox .checkbox input {
					float:left;
				}
				#editAccount .storytext .formbox .checkbox label {
					margin-right:20px;
					padding:3px 0 0 2px;
					width:auto;
				}
				#editAccount .storytext .formbox .formsmall {
					width:60.5%;
				}
				#editAccount .storytext .formbox select.formsmall {
					width:32.4%;
				}
				#editAccount .storytext .formbox .fieldTwo select.formsmall {
					width:64.7%;
				}
				#editAccount .storytext .formbox .formlarge {
					width:80.4%;
				}
				#editAccount .storytext .formbox select.formlarge {
					width:82%;
				}
				#editAccount .storytext .formbox label {
					font-size:.846em;
					line-height:1.273;
					position:relative;
					width:90px;
				}
				#editAccount .storytext .formbox .labelTwoCol {
					text-align:right;
				}
				#editAccount .storytext .formbox .termsandconditions {
					padding-bottom:14px;
				}
				#editAccount .storytext select#subWant,
				#editAccount .storytext select#subWork,
				#editAccount .storytext select#subOld {
					height:80px;
				}
				#editAccount .storytext input#subLastname,
				#editAccount .storytext input#subCounty,
				#editAccount .storytext select#subCountry {
					margin-right:0;
				}
				#editAccount .storytext .formbox .mandatory,
				#editAccount .storytext h2 .mandatory {
					float:none;
					vertical-align:top;
				}
					#editAccount .storytext .formbox_sleeve p {
						margin:0;
						padding:0 0 14px;
					}
					#editAccount .storytext .formbox_sleeve p a {
						text-decoration:underline;
					}
					#editAccount .storytext .formbox_sleeve p a:hover,
					#editAccount .storytext .formbox_sleeve p a:focus {
						text-decoration:none;
					}
					.storytext .renewSubscribeButton {
						background:url(/magazine/graphics/buttons/subscribe_renew.png) no-repeat;
						display:block;
						height:19px;
						outline:0;
						margin:0;
						padding:0 0 14px;
						text-indent:-9999px;
						width:160px;
					}

/* Error message */
#editAccount .storytext .formbox .errorbox_large h3 {
	border:0;
	color:#FFFFFF;
	font-size:1em;
	line-height:1.615;
	margin:0;
	padding:0;
}
	#editAccount .storytext .formbox .errorbox {
		background-position:-48px 100%;
		float:left;
		width:99%;
	}
	#editAccount .storytext .formbox .fieldTwo .errorbox {
		width:98.5%;
		}
		#editAccount .storytext .formbox .errorbox p {
			padding:5px 35px 5px 10px;
		}
		#editAccount .storytext .formbox .errorbox_large li {
			background:url(/magazine/graphics/decoration/errorList.png) no-repeat 0 5px;
		}
			#editAccount .storytext .formbox .errorbox_large li label {
				font-size:1em;
			}

table .sort {
  position: relative;
  display: inline-block;
  width: 10px;
  text-indent: -5000px;
  text-align: left;
}
table .sort:after {
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
}
table .sort.desc:after {
  background-position: 0 -50px;
}
table .sort.asc:after {
  background-position: 0 -350px;
}
table a.sort.desc:after {
  background-position: 0 0px;
}
table a.sort.asc:after {
  background-position: 0 -300px;
}
.table-story,
.table-full,
.table-left,
.table-right {
  margin: 0 0 20px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-left,
.table-right {
  width: 66%;
}
.table-left {
  float: left;
  margin-right: 10px;
}
.table-left table {
  width: 100%;
}
.table-right {
  float: right;
  margin-left: 10px;
}
.table-right table {
  width: 100%;
}
table.datatable .al_l {
  text-align: left;
}
table.datatable .al_r {
  text-align: right;
}
table.datatable .al_c {
  text-align: center;
}
table.datatable .al_t {
  vertical-align: top;
}
table.datatable .al_b {
  vertical-align: bottom;
}
table.datatable .al_m {
  vertical-align: middle;
}
table.datatable .col_wide {
  width: 50%;
}
table.datatable .col_med {
  width: 30%;
}
table.datatable .col_narrow {
  width: 10%;
}