/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= 
Name: DateAlt
Date: 13/04/2008
Author: Steve Morgan
Version: 0.0
Based on a template by: Matthew James Taylor
URL: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */


	/* <!-- */

	/* General styles */
	body {
		color: #DDD;
		margin:0;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:100%;
		background: #000 url('/img/background_fade.jpg') no-repeat; /*  url(img/bg.jpg) repeat-x; */
		min-width:600px;		/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
		/*padding-left: 90px; */ /* removed, from altdate */
		/* font-size:90% "Trebuchet MS",Verdana,sans-serif; */
		font: normal 80% "Trebuchet MS",Verdana,sans-serif;
	}
	a {
		color:#369;
	}
	a:hover {
		color:#FF3;
		background:#369;
		text-decoration:none;
		/*font: normal 2em Impact,sans-serif*/
	}
	h1, h2, h3 {
		margin:.8em 0 .2em 0;
		padding:0;
		font: normal 100% Tahoma,sans-serif;
	}
	h1 a {
		color: #000;
		text-decoration: none;
	}
	h1 a:hover {
		color: #F00;
	}
	blockquote {
		color: #CCA;
		display: block;
		font-weight: bold;
		padding-left: 28px;
	}
	p {
		margin:.4em 0 .8em 0;
		padding:0;
	}
	img {
		margin:10px 0 5px;
	}
	img.centered {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	hr {
		padding:0.5em 0 0;
	}
	/* Form styles */
	label {
		font-weight:bold;
	}
	fieldset legend {
		/* ie seemed to need this!?! */
		color: #fff;
	}
	/* TO DO - need to look at these */
	form.profileform fieldset {
		margin-bottom: 10px;
	}
	form.profileform legend {
		padding: 0 2px;
		font-weight: bold;
		color: #fff;
	}
	form.profileform label {
	  display: inline-block;
	  line-height: 1.8;
	  vertical-align: top;
	}
	form.profileform hr {
		padding: 0.5em 0 0 0;
	}
	form.profileform fieldset ol {
	  margin: 0;
	  padding: 0;
	}
	form.profileform fieldset li {
	  list-style: none;
	  padding: 5px;
	  margin: 0;
	}
	form.profileform fieldset fieldset {
	  border: none;
	  margin: 3px 0 0;
	}
	form.profileform fieldset fieldset legend {
	  padding: 0 0 5px;
	  font-weight: normal;
	}
	form.profileform fieldset fieldset label {
	  display: block;
	  width: auto;
	}
	form.profileform em {
	  font-weight: bold;
	  font-style: normal;
	  color: #f00;
	}
	form.profileform label {
	  width: 200px; /* Width of labels */
	}
	form.profileform fieldset fieldset label {
		margin-left: 143px; /* Width plus 3 (html space) */
	}
	.profilepicture  {
		display: block;
		text-align: center;
		font: normal 70% "Trebuchet MS",Verdana,sans-serif;
	}
	
	.genreRatingHeader {
		background: #fff;
		margin: 10px 10px 10px 10px;
		padding: 10px 10px 10px 10px;
	}
	.genreRatingHeaderLeft {
		float:left;
		font-weight: bold;
		color: #000;
		background: #fff
	}
	
	.genreRatingHeaderRight {
		float:right; 
		font-weight: bold;
		color: #000;
		background: #fff
	}
	
	/* End of Form styles */
	/* Header styles */
	#header {
		clear:both;
		float:left;
		width:100%;
		min-height:260px;
		/*height:500px;*/
	}
	#header {
		/*border-bottom:1px solid #000; */
	}
	#headerlogo {
		padding:0 5%;
		float:right;
	}
	#header p,
	#header h1,
	#header h2 {
		padding:.4em 15px 0 15px;
		margin:0;
	}
	#header ul {
		clear:left;
		float:left;
		width:100%;
		list-style:none;
		margin:10px 0 0 0;
		padding:0;
	}
	#header ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;
	}
	#header ul li a {
		display:block;
		float:left;
		margin:0 0 0 1px;
		padding:3px 10px;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:15px;
		line-height:1.3em;
	}
	#header ul li a:hover {
		background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
		color:#fff;
		background:#000;
		font-weight:bold;
	}
	#header ul li a span {
		display:block;
	}
	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	
	/* misc */
	.clearer {
		clear: both;
		font-size: 0;
	}

	.left {float: left;}
	.right {float: right;}

	.datealt,.datealt-small {
		background: url('/img/menu_spray_long.gif') no-repeat left center;
		color: #000;
		font: normal 2em Impact,sans-serif;
		letter-spacing: 1px;
		padding: 0 0 4px 22px;
	}
	
	h3.datealt a {
		color: #000;
	}

	.pagination {
		clear: both;
		text-align: center;
	}
	.datealttop {
		background: url('/img/menu_spray_long.gif') no-repeat left center;
		color: #000;
		font: normal 2em Impact,sans-serif;
		letter-spacing: 1px;
		padding: 0 0 4px 22px;
		margin: 0 0 0.2em;
	}

	.datealt-small {
		background: url('/img/menu_spray.gif') no-repeat left center;
		padding-top: 6px;
	}
	
	.descr {
		color: #8DC63F;
		margin-bottom: 6px;
		font: normal 1em Impact,sans-serif;
	}
	
	.formheader { 
		font-weight: bold;
	}
	
	.pagination {
		align: 
	}
	
	.button {
		text-align: center;
	}
	/* End Misc */
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
		padding:
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	
	/* 3 Column settings */
	.threecol {
	}
	.threecol .colmid {
		right:21%;			/* width of the right column */
	}
	.threecol .colleft {
		right:58%;			/* width of the middle column */
	}
	.threecol .col1 {
		width:54%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		width:17%;			/* Width of left column content (column width minus padding on either side) */
		left:25%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
		padding:0 0 0 3em;
	}
	.threecol .col3 {
		width:17%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) 
						89 originally(100 - 17) + (2 + 1) + (*/
	}
	/* Footer styles */
	#footer {
		clear:both;
		float:left;
		width:100%;
		border-top:1px solid #000;
	}
	#footer p {
		padding:10px 0 2% 23%;
		margin:0;
		border-top:1px dashed #333333;
		color:#666666;
		font-family:sans-serif;
		font-size:0.7em;
	}
	
	/* navigation */
	#navigation {
		left: 5px;
		position: relative;
		/*top: 290px;*/
		width: 80%;
		padding:0 0 0 0; 
		margin: 0;
	}
	#navigationspacer {
		position: relative;
		padding:6em 0 0 0;
	}
	#navigation h2 {
		color: #000;
		font-size: 1.5em;
		letter-spacing: 0;
		line-height: 30px;
		margin: 0;
	}
	#navigation ul {
		margin: 0 0 0.75em 1.5em;
		padding: 0;
	}
	#navigation li {
		list-style: none;
	}
	#navigation li a {
		color: #8DC63F;
		font-size: 1.1em;
		line-height: 1.5em;
		text-decoration: none;
	}
	#navigation li a:hover {
		color: #8DCA3F;
	}
	/* --> */
	
	#gads {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	/* tabs */
	#tabs_container {
	
	}
	#tabs_container ul.tabs {
		list-style: none;
		/* border-bottom: 1px solid #ccc; */
		margin: 0;
	}
	#tabs_container ul.tabs {
		float: left;
		margin: 0;
		padding: 0; 
	}
	#tabs_container li {
		float: left;
		margin: 0;
	}
		
	#tabs_container ul.tabs a {
		background: url('/img/menu_spray.gif') no-repeat left center;
		padding: 1.5em 0 0 2em; 
		display: block;
		margin: 0;
		text-decoration: none;
		min-width:12em;
		font: normal 100% Tahoma,sans-serif;
		color: #000;
		font-weight: bold;
		height: 2.5em;
	}
	
	#tabs_container ul.tabs a:hover {
		color: #8DCA3F;
	}
	
	#tabs_container ul.tabs li.active a {
		background-color: #fff;
		padding-top: 4px;
	}

	div.tab_contents_container {
		border: 1px solid #ccc;
		border-top: none;
		padding: 10px;
	}
	div.tab_contents {
		display: none;
	}
	div.tab_contents_active {
		display: block;
	}
	div.clear {
		clear: both;
	}
    /* END OF TABS */
	
	/* Photos */
	div.photoContainer {
		float: left;
		position: relative;
		padding: 1.5em 4em 1.5em 2em;
		display: block;
		text-align: center;
	}
	/* END Photos */
	
	/* Search */
	.search {
		float:left;
		position:relative;
		padding: 0.5em;
		width: 100%;
	}
	div.search-preview {
		padding: 1.5em 0 1.5em 0;
		clear: both;
		border-bottom: #DDDDDD 2px solid;
		overflow: auto;
		width: 100%
	}
	div.search-preview-header{
		/*background: url('/img/menu_spray_long.gif') no-repeat left center; */
		min-height: 30px;
		padding: 1.5em 2.75em;
	}
	div.search-preview-header {
		background: url('/img/menu_spray_long.gif') no-repeat left center;
		color: #000;
		font: normal 2em Impact,sans-serif;
		padding: 0 0 8px 22px;
	}
	a.search-preview-header {
		color: #000;
		letter-spacing: 2px;
	} 
	div.search-preview-profile {
		padding: 0 0 0 0;
		clear: both;		
	}
	div.search-preview-img {
		float: left;
		width: 10%;
	}
	div.search-preview-contents {
		float: right;
		width: 90%;
	}
	/* End of Search */
	
	/* Inbox */
	.unread {
		font-weight: bold;
		background: #222;
	}
	/* END of Inbox */
	
	/* Messages */
	.message {
		padding: 1em 0 0 0;
		margin: 3em 3em 3em 3em;
		clear: both;
		position:relative;
		border-bottom:2px solid #DDDDDD;
	}
	.messageContainer {
		margin: 3em 3em 3em 3em;
		clear:both;
	}
	
	.messageImgL {
		float: left;
		width: 20%;
	}
	.messageImgR {
		float: right;
		width: 20%;
	}
	
	.messageContentsL{
		float: left;
		width: 80%;
	}
	
	.messageContentsR{
		float: left;
		width: 80%;
	}
	
	.messageForm {
		clear: both;
		position:relative;
	}
	/* END Messages */
	
	/* Profile */
	.profileContainer {
		padding: 1em 0 0 0;
		margin: 1em 2em 2em 2em;
		clear: both;
		position:relative;
		border-bottom:2px solid #DDDDDD;
	}
	
	.profileHeadline{
		color: #8DC63F;
		margin-bottom: 6px;
		font: normal 1.5em Impact,sans-serif;
	}
	
	.profileImage{
		float: left;
		width: 30%;
	}
	
	.profileDetailsContainer{
		float: left;
		width: 70%;
	}
	
	.profileDetailsContainer  dl.profileDetails dt {
		clear:left;
		float:left;
		font-weight: bold;
	}
	
	.profileDetailsContainer dl.profileDetails dd {
		width:340px;
		padding:1px 60px 3px;
	}
	
	.profileDetailsContainer dl.profileDetails dt, .profileDetails dl.profileDetails dd {
		padding:1px 0 3px;
	}
	
	.profileContents {
		clear:left;
		float:left;
		width:100%;
	}
	.profileLikes{
		float:left;
		width:50%;
	}
	.profileHates{
		float:right;
		width:50%;
	}
	.profileImages{
		text-align: center;
	}

	/* END Profile */