/*********************************************************************************
 * Shoutster || http://www.shoutster.com 
 * Copyright 2007. Shoutster. All Rights Reserved
 * 
 * 
 *********************************************************************************/

/*********************************************************************************
 * STRUCTURE 
 *********************************************************************************/
 
body  {
	background: #252525 url('images/bg_highlight.gif') repeat-x; 
	text-align: center; 
	font-family: verdana, arial, sans-serif;
	color: #fff;
	font-size: 11px; 
	line-height: 16px; 
}


a {
	color: #3385C5; 
	text-align: right;  
	text-decoration: none; 
}

a:visited {
	color: #3385C5; 
	text-align: right; 
	text-decoration: none; 
}

a:hover {
	color: #74BAF0; 
	text-align: right; 
	text-decoration: underline; 
}


#container {
	width: 910px;
	margin: 0 auto; 
	position:relative;
}

/* HEADER */

#header {
	width: 910px; 
	height: 70px; 
	position: relative; 
	top: 10px; 
}

ul.navigation {
	list-style-type: none;
	margin-top: 10px; 
	padding: 0px; 
}

ul.navigation li {
	display: inline; 
	margin-right: 6px; 
	background: #3e3e3e; 
	padding: 8px; 
}

ul.navigation li a {
	font-family: verdana, sans-serif;
	font-weight: bold;
	color: #ffffff; 
	font-size: 8pt; 
	text-decoration: none; 
	padding: 2px; 
}

ul.navigation li a:visited {
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-size: 8pt; 
	color: #ffffff; 
	text-decoration: none; 
	padding: 2px; 
}

ul.navigation li a:hover {
	font-family: verdana, sans-serif;
	font-weight: bold;
	font-size: 8pt; 
	color: #e77d31; 
	text-decoration: none; 
	padding: 2px; 
}


/* CONTENT */

#content {
	background: #e37d34; 
	text-align: left; 
	font-family: verdana, arial, sans-serif;
	font-size: 11px; 
	color: #000000; 
	width: 910px; 
	height:1365px;
	position:relative;
}

.top_header { 
	height: 75px;
	width: 890px; 
	position: absolute; 
	top:10px;
	left:10px;
	margin: 0px;
	padding: 0px; 
	border: 0px; 
}

.sites {
	height:800px;
	top: 95px; 
}


.sites.sites_left {
	background: #ffffff; 
	width: 700px; 
	position: absolute; 
	left:10px;
	margin: 0px;
	padding: 0px; 
	border: 0px; 
}


.sites.sites_right {
	background: #6bbede url('images/shoutster_howtouse.gif');
	background-repeat: no-repeat; 
	width: 180px; 
	height: 800px; 
	position: absolute; 
	left:720px;
	margin: 0px;
	padding: 0px; 
	border: 0px; 
}


.top {
	height:225px;
	top: 310px; 
}


.top.splash {
	width: 680px; 
	position: absolute; 
	left:10px;
	margin: 0px;
	padding: 0px; 
	border: 0px; 
	height: 225px; 
}

.top.splash_content {
	position: absolute;  
	width: 200px; 
	left:700px;
}

.middle {
	height:200px;
	top:905px;
}

.middle.content_box {
	background: #ffffff;
	position: absolute;  
	width: 290px; 
	left:10px;
}

.middle.content_main {
	background: #ffffff;
	position: absolute;  
	width: 590px; 
	right:10px;
}

.bottom {
	top:1065px;
	width:290px;
	height:200px;
}

.bottom.content_left {
	background: #801925;
	position: absolute;  
	left:10px;
}

.bottom.content_center {
	background: #28426c;
	position: absolute;  
	left:310px;
}

.bottom.content_right {
	background: #f4d143;
	position: absolute;  
	right:10px;
}

/* WRAPPERS */

.wrapper {
	margin:5px;
}

.wrapper_stats {
	background: url('images/bg_stats.gif');
	width: 200px;
	height: 225px; 
}

.wrapper_stats_content {
	position: relative;
	top: 85px; 
	margin-left: 10px;
	margin-right: 10px; 
	margin-bottom: 10px; 
}

.wrapper_spread {
	background: url('images/bg_spread.gif');
	width: 290px;
	height: 200px; 
}

.wrapper_spread_content {
	position: relative;
	top: 133px; 
	margin-left: 10px;
	margin-right: 10px; 
	margin-bottom: 10px; 
}

.wrapper_howto {
	background: url('images/bg_howto.jpg');
	width: 590px;
	height: 200px; 
}

.wrapper_howto_content {
	position: relative;
	top: 90px; 
	margin-left: 10px;
	margin-right: 10px; 
	margin-bottom: 10px; 
	background: #f6f4e2; 
	padding: 10px; 
	width: 500px;
}


/* BOOKMARKS */

.bookmarks {
	text-align: center; 
}

.bookmarks_invite {
	margin-bottom: 7px; 
}

.bookmarks_invite a {
	color: #9c511c;
	font-weight: bold; 
}

.bookmarks_invite a:visited {
	color: #9c511c;
	font-weight: bold; 
}

.bookmarks_invite a:hover {
	color: #e89153;
	font-weight: bold; 
}

.bookmarks_img {
	margin-right: 5px; 
}


/* BLOG CONTENT */

.blog_content {
	background: #f7f7f7;
	padding: 10px; 
	height: 70px; 
	position: relative;
	top: 90px; 
	left: 10px; 
	width: 240px; 
	font-size: 10px; 
	margin: 0px; 
	overflow: hidden; 
}

.blog_jing {
	background: url('images/blog_jing.gif'); 
	width: 280px;
	height: 190px; 
	margin: 0px;
	padding: 0px; 
}

.blog_charles {
	background: url('images/blog_charles.gif'); 
	width: 280px;
	height: 190px; 
	margin: 0px;
	padding: 0px; 
}

.blog_richard {
	background: url('images/blog_richard.gif'); 
	width: 280px;
	height: 190px; 
	margin: 0px;
	padding: 0px; 
}

ul.blog_list {
 	padding: 0px;
	margin-left: 15px; 
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px; 
}

ul.blog_list li {
 	margin: 0px; 
 	padding: 0px; 
}

.blog_link {
	text-align:right; 	
}

.charles {
	color: #205c9f; 
}

.charles a {
	color: #205c9f; 
}

.charles a:visited {
	color: #205c9f; 
}

.charles a:hover {
	color: #4a9ed9; 
}

.jing {
	color: #9b2020; 
}

.jing a {
	color: #9b2020; 
}

.jing a:visited {
	color: #9b2020; 
}

.jing a:hover {
	color: #de346c; 
}

.richard {
	color: #ebe13b; 
}

.richard a {
	color: #d3bd2c; 
}

.richard a:visited {
	color: #d3bd2c;
}

.richard a:hover {
	color: #ebe13b;
}

/* COOL */


.cool {
	top:1115px;
	height:240px;
}

.cool.comics {
	background: #fff;
	position: absolute;  
	left:10px;
	width:590px; 
}

.cool.tip {
	background: url('images/bg_tipoftheday.gif'); 
	position: absolute;  
	left:610px;
	width: 290px; 
}




/* CONTENT */

#footer {
	width: 910px; 
	height: 50px; 
	margin-top: 10px; 
	position: relative; 
	color: #636363;
	line-height: 17px; 
	font-size: 11px; 
	font-family: verdana, arial, sans-serif; 
}

#footer a {
	color: #717171; 
	text-decoration: underline; 
} 

#footer a:visited {
	color: #717171; 
	text-decoration: underline; 
} 

#footer a:hover { 
	color: #969696;
	text-decoration: none; 
}

.footer_fineprint {
	text-decoration: none;
}

.footer_fineprint a {
	color: #717171;
	text-decoration: none;
}

.footer_fineprint a:visited {
	color: #717171;
	text-decoration: none;
}

/* FLOAT */ 

.left {
	float: left; 
	text-align: left; 
}

.right {
	float: right; 
	text-align: right; 
}

/*********************************************************************************
 * ABOUT 
 *********************************************************************************/

#about_content {
	background: #e37d34; 
	text-align: left; 
	font-family: verdana, arial, sans-serif;
	font-size: 11px; 
	color: #000000; 
	width: 910px; 
	height:1120px;
	position:relative;
}

.about_splash {
	position: absolute; 
	width: 890px;
	background: url('images/about_splash.gif'); 
	height: 180px; 
	top: 10px; 
	left: 10px; 
}

.about {
	top:200px;
	height:890px;
}

.about.about_left {
	background: #ffffff;
	position: absolute;  
	left:10px;
	width:290px;
	padding-left: 15px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;  
}

.about.about_center {
	background: #ffffff;
	position: absolute;  
	left:325px;
	width:250px;
	padding-left: 15px; 
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px; 
}

.about.about_right {
	background: #ffffff;
	position: absolute;  
	right:10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px; 
	padding-left:15px; 
	width: 270px; 
}

.profile_pic {
	width: 55px; 
	height: 47px; 
	float: left; 	
}

.profile_text {
	font-size: 10px;  
}


.profile_name { 
	font-size: 17px;
	font-weight: bold; 
	letter-spacing: -0.05em;
	font-family: arial, sans-serif;
	color: #474747; 	
}

.profile_title {
	font-size: 10px;  
	text-transform: uppercase; 
	color: #989898; 
	padding-bottom: 5px; 
}



hr {
	color: #bdbdbd;
	margin-top: 15px; 
	margin-bottom: 15px; 
	text-align: center; 
	border: 0px none; 
	height: 1px; 
	width: 80%; 
	background-color: #bdbdbd; 
}

.space {
	height: 20px; 	
}

/*********************************************************************************
 * STATS 
 *********************************************************************************/

.stats {

}

.stats_line {
	width: 180px; 
	height: 20px; 
}


.stats_icon {
	width: 30px;
	height: 20px; 
	background: url('images/stats_icon.gif'); 
	background-repeat: no-repeat; 
	margin: 0px;
	padding: 0px; 
	float: left;
}

.stats_number {
	font-family: arial, sans-serif;
	font-size: 13px; 
	margin-left: 20px; 
	font-weight: bold; 
	color: #4A4E46; 
  
}

.stats_site  {
	float: right; 
	width: 145px; 
	height: 20px; 
	font-size: 10px; 
	overflow: hidden; 
	text-align: right;
}

.stats_site a {
	color: #416220;
	text-decoration: none; 
}

.stats_site  a:visited {
	color: #416220;
	text-decoration: none; 
}

.stats_site  a:hover {
	color: #fff;
	text-decoration:underline; 
}



/*********************************************************************************
 * COMIC STRIP 
 *********************************************************************************/

.comic_strip {
	width: 590px;
	height: 200px; 
	background: #fff; 
}

.comic_nav {
	width: 590px;
	height: 40px; 
	border: 0px;
	padding: 0px;
	margin:0px; 
	overflow: hidden; 
}

.comic_nav a {
	border: 0px; 
}

.comic_nav a:visited {
	border: 0px; 
}


.comic_oldest {
	width: 51px;
	height: 40px; 
	background: url('images/comic_oldest.gif'); 
	background-repeat: no-repeat; 
	float: left; 
	border: 0px; 
	cursor: pointer; 
}

.comic_prev {
	width: 107px;
	height: 40px; 
	background: url('images/comic_prev.gif'); 
	background-repeat: no-repeat; 
	float: left; 
	border: 0px; 
	cursor: pointer; 
}

.comic_title {
	float: left; 
	width: 292px;
	height: 40px; 
	background: url('images/comic_title.gif'); 
	background-repeat: no-repeat; 
	border: 0px; 
	text-align: center;  
}

.comic_title_text {
	font-family: arial, sans-serif;
	font-size: 14px;
	font-weight: bold; 
	vertical-align: middle;
	margin-top: 10px; 
}


.comic_next {
	width: 75px;
	height: 40px; 
	background: url('images/comic_next.gif'); 
	background-repeat: no-repeat; 
	float: left; 
	cursor: pointer; 
	border: 0px; 
}

.comic_newest{
	float: left; 
	width: 65px;
	height: 40px; 
	background: url('images/comic_newest.gif'); 
	background-repeat: no-repeat; 
	border: 0px; 
	cursor: pointer; 
}


/*********************************************************************************
 * TIP OF THE DAY
 *********************************************************************************/


.tipoftheday {
	background: #fff;
	padding: 10px; 
	height: 110px; 
	position: relative;
	top: 90px; 
	left: 10px; 
	width: 250px; 
	font-size: 10px; 
	margin: 0px; 
	opacity:0.7;
	filter:alpha(opacity=70);
	moz-opacity:0.7;
}

.tipoftheday_content {
	margin: 5px; 
}

.tipoftheday_title {
	font-size: 11px;
	font-weight: bold; 
	text-align: center; 
}

/*********************************************************************************
 * SITES 
 *********************************************************************************/

.sites_wrapper {
	margin: 20px; 
}

.site {
	width: 330px; 
	float: left; 
}

.site_icon {
	float: left; 
	width:58px;
	height: 64px; 
	background: url('images/chat_bubble.gif'); 
	background-repeat: no-repeat; 
	margin-right: 10px; 
	text-align: center; 
}

.site_number {
	margin-top: 11px; 
	font-size: 18px; 
	font-family: arial, sans-serif;
	color: #605929; 
	font-weight: bold; 
	letter-spacing: -.05em;  
}

.site_number a {
	font-size: 18px; 
	font-family: arial, sans-serif;
	color: #605929; 
	font-weight: bold; 
	letter-spacing: -.05em;  
	border: 0px;
	text-decoration: none; 
}

.site_number a:visited {
	font-size: 18px; 
	font-family: arial, sans-serif;
	color: #605929; 
	font-weight: bold; 
	letter-spacing: -.05em;  
	border: 0px;
	text-decoration: none; 
}

.site_number a:hover {
	font-size: 18px; 
	font-family: arial, sans-serif;
	color: #e6d354; 
	font-weight: bold; 
	letter-spacing: -.05em;  
	border: 0px;
	text-decoration: none; 
}


.site_description {
	float: left;
	width: 230px; 
	margin-top: 17px; 
	height: 57px; 
	overflow: hidden; 
}

.site_description a {
	font-family: arial, sans-serif;
	color: #105db5;
	font-size: 11pt; 
	font-weight: bold;
	border-bottom: 1px solid #73aaef; 
	text-decoration: none; 
}


.site_description a:visited {
	font-family: arial, sans-serif;
	color: #105db5;
	font-size: 11pt; 
	font-weight: bold;
	border-bottom: 1px solid #73aaef; 
	text-decoration: none; 
}

.site_description a:hover {
	font-family: arial, sans-serif;
	color: #3b4c62;
	font-size: 11pt; 
	font-weight: bold;
	border-bottom: 1px solid #73aaef; 
	text-decoration: none; 
}
 
.site_links {
	font-family: arial, sans-serif;
	font-size: 11px;
	color:#919191; 
	margin-top: 6px; 
	border: 0px; 
}

.site_links a {
	font-family: arial, sans-serif;
	font-size: 11px; 
	color: #528ece; 
	font-weight: normal; 
	text-decoration: none; 
	border: 0px; 
}

.site_links a:visited {
	font-family: arial, sans-serif;
	font-size: 11px; 
	color: #528ece; 
	font-weight: normal; 
	text-decoration: none; 
	border: 0px; 
}

.site_links a:hover {
	font-family: arial, sans-serif;
	font-size: 11px; 
	color: #3b4c62; 
	font-weight: normal; 
	text-decoration: none; 
	border: 0px; 
}
 
.site_icon_img {
	margin-left: 3px; 
	margin-right: 2px; 
	position:relative;
	top: 2px; 
	display: inline; 
}

.sites_title {
	margin-bottom: 15px; 
	font-family: arial, sans-serif;
	font-size: 17px;
	letter-spacing: -0.05em; 
	color: #000000; 
	font-weight: bold; 
	float: left; 
}

.sites_column {
	width: 330px; 
	float: left; 
}




/*********************************************************************************
 * CONTACT 
 *********************************************************************************/

#contact_content {
	background: #e37d34; 
	text-align: left; 
	font-family: verdana, arial, sans-serif;
	font-size: 11px; 
	color: #000000; 
	width: 910px; 
	height:720px;
	position:relative;
}

.contact_splash {
	position: absolute; 
	width: 890px;
	background: url('images/contact_splash.gif'); 
	height: 180px; 
	top: 10px; 
	left: 10px; 
}

.contact {
	top:200px;
	height:490px;
}

.contact.contact_left {
	background: #ffffff;
	position: absolute;  
	left:10px;
	width:505px;
	padding-left: 15px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;  
}

.contact.contact_right {
	background: #ffffff;
	position: absolute;  
	right: 10px; 
	width:320px;
	padding-left: 15px; 
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px; 
}

.contact_pic {
	width: 65px; 
	height: 47px; 
	float: left; 	
}

.contact_text {
	font-size: 10px;  
	float: left; 
	width: 240px; 
	margin-bottom: 20px; 
}

.accent_blue {
	color: #2b6ba6; 
	font-weight: bold; 
}



div.contactform  { 
	padding: 10px; 
	float: left; 
	width: 450px; 
}
 
 
div.contactleft {  
	float: left; 
	width: 180px; 
	color: #5a5a5a; 
}

div.contactright {
	margin-bottom: 10px; 
	float: left; 
	width: 250px; 
	margin-left: 10px; 
}


.button {
	border-left: 1px solid #ccc; 
	border-top: 1px solid #ccc;
	border-right: 1px solid #8f8f8f;  
	border-bottom: 1px solid #8f8f8f; 
	padding: 3px;
	font-family: verdana, arial, sans-serif; 
	font-size: 11px;
	color: #ffffff; 
	background-color: #3782b7; 
	cursor: pointer; 
}


input, textarea {
	border: 1px solid #ccc; 
	padding: 3px;
	font-family: verdana, arial, sans-serif; 
	font-size: 11px;
	color: #2b4879; 
}