/* COLOR BLUE #1B81B7 */
* {
	margin: 0;
	padding: 0;
}
body {
	background:url(../images/global/bg.gif) top left repeat-x;
}
#page {
	width:990px;
	margin:0 auto;
}
#container {
	position: relative;
}



/**************************************************/
/**************** HEADER   ************************/
/**************************************************/

#header {
	margin-bottom:15px;
	height: 110px;
}
#header .logo {
	margin-top: 15px;
	width: 316px;
	float: left;
}

#header .tagline {
	float:right;
	margin-top:65px;
}


/**************************************************/
/****************  NAVIGATION MENU  ***************/
/**************************************************/

#menu {
	position:absolute;
	right:95px;
	top:0;
}

#menu ul {
}
#menu ul li {
	display: block;
	float: left;
	height: 60px;
	list-style: none;
	margin-right: 5px;
}
#menu ul li.current {
	width: 152px;
	background: url(../images/global/menu-current-bg.jpg) no-repeat;
}
#menu ul li.suggest {
	width: 157px;
	background: url(../images/global/menu-suggest-bg.jpg) no-repeat;
}
#menu ul li.what {
	width: 107px;
	background: url(../images/global/menu-what-bg.jpg) no-repeat;
}
#menu ul li.home {
	width: 55px;
	background: url(../images/global/menu-home-bg.jpg) no-repeat;
}
#menu ui li a {

}


/**************************************************/
/****************  CONTENT  ***********************/
/**************************************************/

h1 {
	font-size:20px;
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
	color:#1B81B7;
	font-weight:normal;
}
h2 {
	font-size:26px;
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
	color:#1B81B7;
	font-weight:normal;
}

.title {
	text-align:center;
	padding: 7px 0;
}
.content {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
.content h2 {
	font-size:18px;
}
.content h2, .content p, .content ol, .content ul {
		line-height:20px;
		margin:10px 0;
}
.content ul, .content ol {
	margin-left:35px;
}

a {
	outline: none;
}


/**************************************************/
/****************  MAIN SEAKERS     ***************/
/**************************************************/


.conversation {
	background: url(../images/global/main-block.jpg) no-repeat center top;
	height: 281px;
}
.conversation .inner {
	background: url(../images/global/main-speech.jpg) no-repeat center 40px;
	height: 281px;
}

.conversation p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#828282;
	line-height:22px;	
	text-align:center;
}
.conversation p.instructions {
	font-size:10px;
	height:auto;
	padding:0 30px 0 190px;
	line-height: 16px;
}

.conversation p.instructions a {
	display:inline;
}



/**************************************************/
/****************   MAIN SPEAKER 1  ***************/
/**************************************************/


.speaker1 {
	float:left;
	width:490px;
	height:240px;
	margin-left: 5px;
	position: relative;
	/*background:url(../images/speaker1.jpg) top left no-repeat;*/
}

.speaker1 p {
	height:132px;
	left:185px;
	/*padding:30px 30px 0 190px;*/
	position:absolute;
	top:20px;
	width:280px;
}
.speaker1 a {
	color:#2D7B0B;
	font-weight:bold;
	display:block;
}
.speaker1 h2 {
	color:#2D7B0B;
	left:185px;
	/*padding:0 30px 0 290px;*/
	position:absolute;
	text-align:center;
	top:155px;
	width:280px;
}
.speaker1 .pic {
	position: absolute;
	top: 0;
	width: 157px;
	height: 214px;
	left: 2px !important;
	left: -2px;
}
*:first-child+html .speaker1 .pic {
	left: 8px !important;
}

.conversation .speaker1 p.instructions {
	left:185px;
	padding:0;
	top:193px;
}

/**************************************************/
/****************   MAIN SPEAKER 2  ***************/
/**************************************************/

.speaker2 {
	float:left;
	width:490px;
	height:240px;
	position: relative;
	/*background:url(../images/speaker2.jpg) top left no-repeat;*/
}

.speaker2 p {
	height:132px;
	right:185px;
	position:absolute;
	top:20px;
	width:280px;
}
.speaker2 a {
	color:#C11E1E;
	font-weight:bold;
	display:block;
}
.speaker2 h2 {
	color:#C11E1E;
	right:185px;
	position:absolute;
	text-align:center;
	top:155px;
	width:280px;
}
.speaker2 .pic {
	position: absolute;
	top: 0;
	width: 157px;
	height: 214px;
	right: 2px !important;
	right: 8px;
}
*:first-child+html .speaker2 .pic {
	right: 4px !important;
}


.conversation .speaker2 p.instructions {
	right:185px;
	padding:0;
	top:193px;
}



/*
.vs {
	float:left;
	padding:80px 10px 0 0;
}
*/


/**************************************************/
/****************   FOOTER      *******************/
/**************************************************/
#footer {
	text-align:center;
	margin-top: 20px;
}
#footer p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#828282;
	margin:20px 0;
}



/**************************************************/
/****************   SHARE       *******************/
/**************************************************/

.share {
	margin:10px 0 30px;
}


/**************************************************/
/****************  RECENT RECKONS  ****************/
/**************************************************/

#recent {	
	margin-left: 160px !important; /* THIS WAS TO CENTER WHEN ONLY TWO */
}

#recent .reckon {
	/*margin-left: 333px !important; /* THIS WAS TO CENTER WHEN ONLY ONE */
	margin: 0;
}

*:first-child+html #recent .reckon {
	/*margin-left: 333px !important;*/
}	


/**************************************************/
/****************  RECKONS  ***********************/
/**************************************************/

#current {
	/*margin-left: 160px; /* remove this when more than two */
}

.reckon img {
	border: medium none;
}

.reckon a {
	text-decoration: none !important;
}

#reckons {
	margin-left: 0 !important;
	width: 990px;
	margin-bottom: 20px;
}

li.reckon {
	list-style: none;
	outline: none;
	width: 320px;
	height: 171px;
	display: block;
	float: left;
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
	background: url(../images/global/reckon-bg.jpg) no-repeat left top;
	margin: 0 0 10px 10px !important;
	margin: 0 0 10px 5px;
	cursor: pointer;
}

li.reckon:hover, li.reckon.sfhover {
	background: url(../images/global/reckon-bg.jpg) no-repeat left bottom;
}

/*
a:hover.reckon {
	background: url(../images/global/reckon-bg.jpg) no-repeat bottom top !important;
}*/
.reckon .title {
	color: #1b81b7;
	font-size: 14px;
	font-weight: bold;
	padding: 0;
}
.reckon a .title:hover {
	text-decoration: none;
}
.reckon .s1 {
	float: left;
	width: 160px;
}
.reckon .s1 .image {
	width: 92px;
	height: 118px;
	margin-left: auto;
	margin-right: auto;
}
.reckon .s2 {
	width: 160px;
	float: left;
}
.reckon .s2 .image {
	width: 92px;
	height: 118px;
	margin-left: auto;
	margin-right: auto;
}
.reckon .vs {
	width: 27px;
	float: left;
	margin: 0 2px;
}
.reckon .s1-name {
	color: #2d7b0b;
	font-size: 12px;
	font-weight: bold;
	width: 160px;
	float: left;
	text-align: center;
	line-height: 12px;
	padding-top: 2px;
}
.reckon .s2-name {
	color: #c11e1e;
	font-size: 12px;
	font-weight: bold;
	width: 160px;
	float: left;
	text-align: center;
	line-height: 12px;
	padding-top: 2px;
}
.reckon .s1-name a,
.reckon .s2-name a {
	text-decoration: none;
}
.reckon .count {
	font-weight: normal;
	font-size: 10px;
}

/**************************************************/
/**************** SUGGEST A RECKON  ***************/
/**************************************************/

#suggest-page {
	margin-left: 40px;
}


/**** the form *******/


#suggestform {
	background: url(../images/global/suggest-form-mid.jpg) repeat-y left top;
	width: 480px;
	position: relative;
	float: left;
	margin-right: 50px;
}
#suggestform .inner {
	background: url(../images/global/suggest-form-top.jpg) no-repeat left top;
}
#suggestform .inner-inner {
	background: url(../images/global/suggest-form-bottom.jpg) no-repeat left bottom;
}
#suggestform .form-item label {
	float: left;
	padding-right: 5px;
	text-align: right;
	width: 109px;
	padding-top: 7px;
}
#suggestform .form-item .description {
	padding-left: 118px;
}
#suggestform .form-item input {
	background: url(../images/global/form-input-bg.jpg) no-repeat;
	border:medium none;
	padding:6px;
	width:318px;
}

#suggestform .form-item input.error {
	background: url(../images/global/form-input-error-bg.jpg) no-repeat !important;
	color: #FF0000;
}

#suggestareckon {
	padding: 10px;
}

#suggest-submit {
	background: url(../images/global/submit-reckon-btn.jpg); 
	width: 146px;
	height: 32px;
	border: medium none;
	cursor: pointer;
	float: right;
	margin: 10px 0;
}

.required-text {
	color:#515151;
	font-size:10px;
	position:absolute;
	right:9px;
	top:7px;	
}


/***** recently suggested reckons ********/

#recently-suggested {
	float: left;
}

#recently-suggested .suggestion {
}
#recently-suggested .suggestion .list {
	float: left;
	width: 32px;
	padding-top: 2px;
}
#recently-suggested .suggestion .details {
	float: left;
	background: url(../images/global/suggestions-border-dash.jpg) no-repeat left bottom;
	margin-bottom:10px;
	padding-bottom:5px;
	
}
#recently-suggested .suggestion .details .name {
	color: #515151;
	font-size: 14px;
}
#recently-suggested .suggestion .details .name span {
	font-weight: bold;
}
#recently-suggested .suggestion .details .by {
	color: #14788d;
	font-size: 11px;
	float: left;
}
#recently-suggested .suggestion .details .by a {
	text-decoration: underline;
	color: #14788d;
}
#recently-suggested .suggestion .details .like {
	float: left;
	margin-left: 5px;
}
#recently-suggested .suggestion .details .like .vote a {
	width: 68px;
	height: 18px;
	display: block;
	cursor: pointer;
	background: url(../images/global/like-this.jpg) no-repeat left top;
}
#recently-suggested .suggestion .details .like .vote a:hover {
	background: url(../images/global/like-this.jpg) no-repeat left bottom;
}

#recently-suggested .suggestion .details .like .voted {
	width: 95px;
	height: 18px;
	display: block;
	background: url(../images/global/you-like-this.jpg) no-repeat left top;
}


/**************************************************/
/**************** FORMS ***************************/
/**************************************************/


.form-item label {
	display:block;
	font-weight:bold;
	font-size: 14px;
	color: #515151;
	line-height: 14px;
	padding-top: 7px;
}

.form-item .description {
	font-size:0.85em;
}
.form-component-textfield {
	margin: 10px 0;
}
fieldset {
	border: 1px solid #cccccc;
	margin:5px 0;
	padding:5px 0;
}
legend {
	font-size: 14px;
	color: #515151;
	padding: 0 5px;
	margin-left: 7px;
}
input, textarea, select, option, legend, fieldset, label {
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
} 







/**************************************************/
/****************   MISC        *******************/
/**************************************************/