/*   
Theme Name: YWC8 - Young Webmaster Camp 8
Theme URI: http://www.ywc.in.th/
Description: Theme for Young Webmaster Camp 8 Website by YWC7
Author: @woraperth & @kotzhul
Author URI: http://www.designil.com/ & http://www.kotzhul.com
Version: 1.0
Tags: ywc8, green, yellow, young webmaster camp, nu
.

YWC8 Theme is a theme for Young Webmaster Camp 8 Website (2010).
Designed by @kotzhul (http://www.kotzhul.com/) - YWC7.
HTML/CSS by @woraperth (http://www.designil.com/) - YWC7.

.
*/

/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* Element Tag */

body {
	background: #478202 url(/8.0/public/images/bg.jpg) no-repeat center top;
	font-family: sans-serif;
	font-size: 10pt;
	line-height: 1.1em;
	text-align:center;
}

a , a:visited {
	text-decoration:none;
	color:#FF6A00;
}

a:hover {
	text-decoration:underline;
}

/* Layout */

#wrapper {
	width: 960px;
	margin: 0 auto;
}

#header {
	width: 914px;
	height: 200px;
	position: relative;
	margin: 0 auto;
	background: url(/8.0/public/images/topbg.png) bottom repeat-x;
}
	#header h1 {
		position: absolute;
		bottom: 0;
		left: -39px;
	}
	#header #quizza {
		position: absolute;
		bottom: 3px;
		right: 410px;
	}
		#header h1 a {
			width: 361px;
			height: 184px;
			background: url(/8.0/public/images/logo.png) no-repeat;
			text-indent: -9999px;
			display: block;
		}
	
	#blog-desc {
		position: absolute;
		top: 0;
		right: -39px;
		background: url(/8.0/public/images/squid.png) no-repeat;
		text-indent: -9999px;
		width: 406px;
		height: 96px;
	}
	
	#sponsor {
		position: absolute;
		bottom: -2px;
		right: 0;
		text-indent: -9999px;
		width: 421px;
		height: 107px;
		background: url(/8.0/public/images/sponsor.png) no-repeat;
	}
	#sponsor li:first-child{width:260px}
	#sponsor li{float:left;width:161px;height:110px}
	#sponsor a{text-indent:-9999px;display:block;width:100%;height:100%}

#main {
	background: url(/8.0/public/images/middlebg.png) repeat-y;
	overflow: hidden;
	position: relative;
}
	#mainregis {
		width: 880px;
		margin: 0 auto 15px;
		padding-top: 13px;
		overflow: hidden;
		position: relative;
	}
		#boxregis {
			width: 498px;
			height: 468px;
			background: url(/8.0/public/images/redbox.png) no-repeat;
			float: left;
			text-align:left;
		}
			#boxregis h2 {
				height: 55px;
				text-indent: -9999px;
				width: 498px;
				background: url(/8.0/public/images/redbox_h1.png) no-repeat top left;
			}
			#boxregis li {
				float: left;
				display: inline;
				width: 124px;
				background: url(/8.0/public/images/selectbg.png) no-repeat;
				background-position: 50% 70px;
				height: 412px;
				position: relative;
			}
				#boxregis li a.name {
					position: absolute;
					bottom: 350px;
					font-size: 14pt;
					width: 99%;
					font-weight: bold;
					text-align: center;
					line-height: 1.1em;
					margin: 0 auto;
					text-decoration: none;
					color: #EE9931;
				}
				#boxregis li a.name:hover {
					color: #FFF;
				}
				#boxregis li a.register {
					width: 99%;
					position: absolute;
					bottom: 290px;
					left: 27px;
					width: 70px;
					height: 40px;
					background: url(/8.0/public/images/register_now.png);
					text-indent: -9999px;
				}
				#boxregis p.detail {
					position: absolute;
					bottom: 210px;
					left: 24px;
					text-align: center;
					width: 78px;
				}
				#boxregis a.img {
					position: absolute;
					bottom: 75px;
					width: 99%;
					text-align:center;
				}
				#boxregis img {
					display: block;
					margin: 0 auto;
				}
				#boxregis p.count {
					position: absolute;
					top: 345px;
					left: 14px;
					width: 97px;
					height: 57px;
					background: url(/8.0/public/images/regiscount.png) no-repeat;
					text-align: center;
					padding-top: 5px;
					color: #FFF;
				}
				#boxregis p.count b {
					display: block;
					padding-top: 7px;
					font-size: 15pt;
					font-weight: bold;
				}
				#boxregis span {
					color:#F2F2F2;
					font-size:11px;
					left:20px;
					position:absolute;
					top:55px;
					width:450px;
				}
		#box800 {
			width: 373px;
			height: 467px;
			float: right;
			text-align:left;
			background: url(/8.0/public/images/greenbox.png) no-repeat;
			position: relative;
		}
			#box800_in {
				padding: 10px;
			}
			#box800_in h2 {
				height: 55px;
				text-indent: -9999px;
				width: 353px;
				background: url(/8.0/public/images/greenbox_h1.png) no-repeat;
				background-position: -13px -12px;
			}
			#box800_in p {
				margin-bottom: 10px;
				color: #FFF;
				line-height: 1.2em;
				width: 263px;
			}
			#box800_in p b {
				color: #00ff78;
			}
			#box800_in .idea-list li {
				background-color: #b1fd91;
				border: 1px solid green;
				position: relative;
				margin-top: 18px;
				padding: 5px 50px 5px 5px;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 5px;
				line-height: 1.2em;
				font-size:11px;
			}
			#box800_in .idea-list li .idea-id {
				position: absolute;
				background: url(/8.0/public/images/greenbox_count.png);
				width: 43px;
				height: 36px;
				display: block;
				text-align: center;
				color: #FFF;
				font-size: 13pt;
				line-height: 26px;
				right: 5px;
				top: -15px;
			}
			#box800_in a.more {
				bottom:9px;
				color:#FFFFFF;
				display:inline;
				margin-top:6px;
				position:absolute;
				right:10px;
			}
			#box800_in .big {
				font-size:15px;
				font-weight:bold;
			}
			#box800_in .idea-send {
				background-image:url(/8.0/public/images/800_send.png);
				height:92px;
				position:absolute;
				right:10px;
				text-indent:-9999px;
				top:57px;
				width:89px;
			}
			#box800_in form {
				margin-top: 10px;
				position: absolute;
				bottom: 10px;
			}
			#box800_in input#idea {
				display: block;
				padding: 5px;
				border: 0;
				margin: 5px 0;
				font-size: 11pt;
				background-color: #73bb97;
				width: 340px;
			}
			#box800_in input#author, #box800_in input#email {
				background: #00451b;
				border: 0;
				padding: 5px;
				font-size: 11pt;
				margin: 0 3px;
				color: #00ff78;
				width: 90px;
			}
			#box800_in label {
				color: #FFF;
				font-size: 11pt;
			}
			#box800_in input#send {
				color: #FFF;
				background-color: #00451b;
				font-size: 11pt;
				padding: 5px;
				border: 0;
				margin-left: 5px;
			}
			#box800_in .guru-list li {
				float:left;
			}
			#box800_in .guru-list li img {
				border:1px solid green;
			}
			#box800_in .handy {
				padding-left: 3px;
			}
	#main .more-idea {
		-moz-border-radius:0 0 5px 5px;
		-webkit-border-radius:0 0 5px 5px;
		background-color:#007C49;
		padding:3px 5px;
		position:absolute;
		color: #FFF;
		right:49px;
		top:480px;
	}
	#maindetail {
		width: 880px;
		margin: 0 auto 15px;
		overflow: hidden;
	}
		#boxdetail_l {
			float: left;
		}
			#box2_orange {
				width: 576px;
				height: 401px;
				background: url(/8.0/public/images/detailbox.png);
			}
				.box25 {
					overflow: hidden;
					width: 548px;
					margin: 0 auto;
				}
				#box3_left {
					float: left;
					width: 248px;
					height: 224px;
					background: url(/8.0/public/images/detail_left.png) bottom center no-repeat;
				}
					#box3_left h2 {
						text-indent: -9999px;
						background: url(/8.0/public/images/detail_h1left.png) bottom right no-repeat;
						width: 194px;
						height: 52px;
					}
					#box3_left p {
						padding: 15px 14px;
						line-height: 1.2em;
						color: #444;
						text-align:left;
					}
						#box3_left b {
							color: #ff5300;
							font-weight: bold;
						}
				#box3_right {
					float: right;
					width: 289px;
					height: 224px;
					background: url(/8.0/public/images/detail_right.png) bottom center no-repeat;
				}
					#box3_right h2 {
						text-indent: -9999px;
						background: url(/8.0/public/images/detail_h1right.png) bottom right no-repeat;
						width: 223px;
						height: 51px;
					}
					#box3_right img {
						margin: 12px auto 5px;
						display: block;
					}
					#box3_right ul {
						padding: 0 14px;
						color: #444444;
						line-height: 1.1em;
						text-align:left;
					}
				#boxcenter {
					margin-top: 12px;
					background: url(/8.0/public/images/detailbox2.png) no-repeat;
					width: 550px;
					height: 135px;
					text-align: left;
				}
					#center_l {
						float: left;
						width: 230px;
					}
						#center_l h3 {
							text-indent: -9999px;
							background: url(/8.0/public/images/detail_h2left.png) bottom right no-repeat;
							width: 186px;
							height: 38px;			
						}
						#center_l p {
							padding: 5px 0 0 13px;
							font-size:12px;
						}
					#center_r {
						float: right;
						width: 280px;
					}
						#center_r h3 {
							text-indent: -9999px;
							background: url(/8.0/public/images/detail_h2right.png) bottom right no-repeat;
							width: 234px;
							height: 38px;			
						}
						#center_r p {
							padding: 5px 0 0 0;
							font-size:12px;
						}						
			#box2_green {
				width: 579px;
				height: 568px;
				background: url(/8.0/public/images/timebox.png);
				margin-top: 10px;
			}
				#boxgreen_left {
					float: left;
					width: 263px;
					height: 545px;
					background: url(/8.0/public/images/timebox_left.png) bottom right no-repeat;
				}
					#boxgreen_left h2 {
						text-indent: -9999px;
						background: url(/8.0/public/images/time_h1left.png) bottom right no-repeat;
						width: 242px;
						height: 54px;			
					}
					
					#boxgreen_left .dd {
						padding:8px 0px 2px 0px;
						font-size: 12px;
					}
				#boxgreen_right {
					float: right;
					width: 304px;
					height: 545px;
					background: url(/8.0/public/images/timebox_right.png) bottom left no-repeat;
				}
					#boxgreen_right h2 {
						text-indent: -9999px;
						background: url(/8.0/public/images/time_h1right.png) bottom right no-repeat;
						width: 257px;
						height: 54px;			
					}
					#boxgreen_right p {
						padding: 8px 25px 0 12px;
						line-height: 1.2em;
						text-align:left;
					}
					#boxgreen_right p b {
						color: #00a651;
						font-weight: bold;
					}
		#boxdetail_r {
			float: right;
			width: 285px;
			text-align:left;
		}
		#more_sponsor {
			width: 285px;
			text-align: center;
			
		}
		#more_sponsor h4 {
			font-size: 18pt;
			font-family: serif;
			line-height: 2.0em;
			text-align: left;
		}
		#board_wrap {
			width: 880px;
			margin: 0 auto;
			overflow: hidden;
		}
		#boxdetail_blog {
			float: right;
			width: 285px;
			height: 248px;
			background: url(/8.0/public/images/blogbox.png);
			margin-bottom: 10px;
			text-align:left;
			margin-top: 10px;
		}
		#boxdetail_blog h2 {
			text-indent: -9999px;
			height: 55px;
		}
		#boxdetail_blog ul {
			margin: 10px 0;
			padding: 0 10px;
		}
		#boxdetail_blog li {
			text-align: left;
			float: left;
			width: 50%;
			color: #444;
			line-height: 1.2em;
		}
		#boxdetail_blog li a {
			color: #0060BF;
		}
		#boxdetail_blog a#more {
			margin-right: 10px;
			color: #000;
		}
		#boxdetail_blog a#more:hover {
			color: #666;
		}
		#boxdetail_blog li a:hover {
			color: #000;
		}
		#socialline {
			height: 10px;
			width: 99%;
		}
	#signup-form {
		padding: 10px 40px;
		text-align: left;
	}
		#signup-form table {
			width:100%;
		}
			#signup-form table td {
				padding: 5px;
				vertical-align: middle;
			}
			#signup-form table th {
				padding: 20px 0px;
				vertical-align: middle;
				text-align: left;
				color: green;
				font-size:20px;
			}
		#signup-form .submit {
			-moz-border-radius:3px 3px 3px 3px;
			-webkit-border-radius:3px 3px 3px 3px;
			background-color:green;
			border:0 none;
			color:#FFFFFF;
			cursor:pointer;
			font-weight:bold;
			padding:2px 5px;
		}
	#idea-form {
		left:36%;
		position:absolute;
		top:50%;
		background-color: #FFF;
		padding: 5px;
		display:none;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
		#idea-form table td {
			padding:5px;
			vertical-align: middle;
		}
		#idea-form textarea {
			width:402px; 
			height:50px;
		}
		#idea-form input {
			width:150px; 
		}
		#idea-form a {
			color:#FFF;
			text-decoration:none;
			background-color:#999;
			padding: 3px 5px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
	#main #idea-list-page {
		margin:10px 40px;
	}
		#main #idea-list-page li {
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			background-color:#B1FD91;
			border:1px solid green;
			font-size:11px;
			line-height:1.2em;
			margin-top:18px;
			padding:5px 50px 5px 5px;
			position:relative;
		}
		#main #idea-list-page li .idea-id {
		background:url("/8.0/public/images/greenbox_count.png") repeat scroll 0 0 transparent;
		color:#FFFFFF;
		display:block;
		font-size:13pt;
		height:36px;
		line-height:26px;
		position:absolute;
		right:5px;
		text-align:center;
		top:-15px;
		width:43px;
		}
#myboard {
	float: left;
	width: 580px;
}
#mainboard {
	width: 580px;
	margin: 33px 0 0 0;
	position: relative;
	background: url(/8.0/public/images/board_middle.png) repeat-y;
	background-position: 0 0;
}
	#mainboard h2 {
		position: absolute;
		top: -10px;
		left: 20px;
		text-indent: -9999px;
		background: url(/8.0/public/images/board_h1.png) bottom right no-repeat;
		width: 138px;
		height: 31px;
		z-index: 2;
	}
	#board_top {
		position: absolute;
		top: -23px;
		left: 0;
		width: 580px;
		height: 23px;
		background: url(/8.0/public/images/board_top.png);
		z-index: 1;
	}
	#board_posts {
		padding: 25px 10px 0;
		position: relative;
	}
	#board_posts a {
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		background-color:#FF8D00;
		bottom:-10px;
		color:#FFFFFF;
		padding:3px 5px;
		position:absolute;
		right:10px;
	}
	#board_below {
		width: 580px;
		background: url(/8.0/public/images/board_below.png) no-repeat;
		height: 18px;
	}
#mainguru {
	width: 878px;
	height: 463px;
	background: url(/8.0/public/images/gurubox.png) no-repeat;
	margin: 10px auto;
}
	#mainguru h2 {
		text-indent: -9999px;
		background: url(/8.0/public/images/gurubox_h1.png) bottom right no-repeat;
		width: 263px;
		height: 50px;		
		float:left;
	}
	#mainguru ul {
		display: block;
		width: 846px;
		height: 379px;
		background: url(/8.0/public/images/gurubox_in.png) no-repeat;
		margin: 0 15px;
		clear:both;
	}
	#mainguru li {
		width: 282px;
		height: 93px;
		float: left;
		display: inline;
	}
	#mainguru img {
		margin: 10px 10px 15px 12px;
		float: left;
	}
	#mainguru p {
		padding: 18px 0 0;
		line-height: 1.2em;
		font-size: 9pt;
		color: #555555;
		text-align: left;
	}
		#mainguru p b {
			display: block;
			color: #FF6B00;
		}
#mainlink {
	width: 880px;
	margin: 20px auto 0;
	position: relative;
	background: url(/8.0/public/images/linkfarm_middle.png) repeat-y;
	background-position: 0 0;
}
	#mainlink h2 {
		position: absolute;
		top: -3px;
		left: 20px;
		text-indent: -9999px;
		background: url(/8.0/public/images/linkfarm_h1.png) bottom left no-repeat;
		width: 400px;
		height: 31px;
		z-index: 2;
	}
	#link_top {
		position: absolute;
		top: -10px;
		left: 0;
		width: 880px;
		height: 23px;
		background: url(/8.0/public/images/linkfarm_top.png);
		z-index: 1;
	}
	#link_posts {
		padding: 30px 10px 5px;
		position: relative;
	}
	#link_posts .pr-button {
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		background-color:#FF8D00;
		bottom:-5px;
		color:#FFFFFF;
		padding:3px 5px;
		position:absolute;
		right:10px;
	}
	#link_below {
		width: 880px;
		margin: 0 0 10px 40px;
		background: url(/8.0/public/images/linkfarm_below.png) no-repeat;
		height: 18px;
		float:left;
	}
#footer {
	background: #000;
	overflow: hidden;
	padding: 20px 0 30px;
	font-size: 10pt;
	line-height: 1.2em;
	margin-top: 20px;
	text-align: center
}
	#footerwrap {
		width: 898px;
		margin: 0 auto;
		overflow: hidden;
		color: #FFF;
		text-align:left;
	}
	#footer_l {
		float: left;
		padding-bottom: 5px
	}
	#footer_l strong {
		font-weight: bold;
		color: #FFC600;
	}
	
	#footer_r {
		float: right;
		text-align: right;
		padding-bottom: 5px
	}
	#footer_r a {
		color: #FFC600;
	}
	#wrapper_end {
		width: 964px;
		height: 45px;
		background: url(/8.0/public/images/wrapper_end.png) no-repeat;
		margin: 0 auto;
	}
	
/* Custom Class */

.align-right {
	display: block;
	text-align: right;
}

.clearfix {
	clear: both;
}
.dai-a-rai-img-left {
		margin-left:20px;
		width:100px;
		float:left;
}
.dai-a-rai-img-right {
		margin-left:5px;
		width:100px;
		float:left;
}
.dai-a-rai-detail-left {
	margin-left:20px;
	width:125px;
	float:left;
	text-align:left;
}
.dai-a-rai-detail-right {
	margin-left:5px;
	width:125px;
	float:left;
	text-align:left;
}
.error {
	background-color:#FF5500;
	border:1px solid red;
	color:#FFFFFF;
	line-height:15px;
	list-style:disc inside none;
	margin:5px 40px;
	padding:5px;
}
.success {
	background-color:green;
	color:#FFFFFF;
	line-height:20px;
	list-style:disc inside none;
	margin:200px 40px;
	padding:10px;
}
.page-link {
	margin: 10px 40px;
}
.page-link li {
	background-color:#FFC221;
	border:1px solid #F29221;
	color:#FFFFFF;
	float:left;
	margin:0 2px;
	padding:3px 5px;
}