/*
Theme Name: bonsaibeach
Author: franklin
Version: 1.0
*/

/* GLOBAL */

body 								{ background:#cbcbcb url("img/background.jpg") no-repeat top left; font:normal 12px Helvetica,Verdana,Arial; color:#333333; }
hr 									{ background:#b7b7b7; color:#b7b7b7; }
h2, h3								{ color:#333333; }
a, a:hover 							{ color:#662d91; }
p									{ margin-bottom:9px; }
em									{ font-style:italic; color:#424242; }
blockquote 							{ color:#7d7d7d; margin: 18px 0; padding-left: 30px; border-left: 1px solid #7d7d7d; }

/* FORMS */

.input								{ background:transparent url("img/form_bg.gif") no-repeat top left; color:#333333;  width:195px; height:18px; padding:5px 20px 0 5px; border:0; }
.submit								{ background:#333333; color:#ffffff; border:0; padding:2px 5px 2px 5px; cursor:pointer; }
.textarea							{ background:transparent url("img/form_bg.gif") no-repeat top left; color:#333333;  width:480px; height:150px; border:0; }
.error								{ color:#ff0000; }


.striper 							{ background:transparent url("img/striper.gif"); height:8px; width:100%; }
.leftalign							{ float:left; }
.rightalign							{ float:right; }
.clear 								{ clear:both; }
.clearend:after						{ clear:both; }
.space								{ width:100%; height:1px; display:block; }
.space_10							{ width:100%; height:10px; display:block; }
.space_20							{ width:100%; height:20px; display:block; }

/* TEMPLATE */
#container							{ width:900px; margin:0 auto; }
#header 							{ height:100px; width:100%; }

#logo 								{ float:left; width:260px; height:60px; background:#333333; }
#logo:hover							{ background:#000000; }

#dheader h1 a						{ background:#333333 url("img/logo.gif") no-repeat; width:260px; height:60px; display:block; text-indent:-999px; }
#header ul							{ float:right; margin-top:30px;}
#header li 							{ float:left; margin-left:40px; }
#header .menu_item a 				{ color:#7d7d7d; padding-bottom:1px; }
#header .menu_item a:hover 			{ color:#333333; border-bottom:2px solid #333333; }
#header .current_menu_item a		{ color:#333333; border-bottom:2px solid #333333; }

#page 								{ width:100%; }
#content 							{ width:600px; float:left; }
#content-full						{ width:900px; }
#sidebar 							{ width:220px; float:right; }
#sidebar h2							{ border-bottom:1px solid #b7b7b7; margin:20px 0 8px 0; line-height:30px;}
#sidebar li							{ line-height:18px; }
#searchform input					{ background:transparent url("img/search_bg.gif") no-repeat; color:#333333; border:0; width:195px; height:18px; padding:5px 20px 0 5px; }
#footer 							{ height:50px; color:#7d7d7d; width:100%; }
#copyr								{ font-size:11px; float:left; margin-top:18px; }

.navigation							{ width:100%; height:20px; margin:10px 0; position:relative; }
.alignright							{ position:absolute; right:0; }
.alignleft							{ position:absolute; left:0; }

/* BLOG */
.post hr							{ margin:3px 0 10px 0; }
.post h3							{ margin:36px 0 9px 0; }
.post h4							{ margin:36px 0 9px 0; text-transform:uppercase; }
.post i								{ color:#555555; }
.post ul							{ list-style-type:square; list-style-position:inside;}
.post li							{ margin: 3px 1px; }
.post .border 						{ border:8px solid #ffffff; }
.postmetadata a						{ color:#b7b7b7; background:#333333; padding:1px 8px 2px 8px; margin-right:5px; }
.postmetadata a:hover				{ background:#000000; }
.comment							{ border-top:1px solid #b7b7b7; margin:10px 0 20px 0; padding-top:10px; }
.comment-metadata					{ float:left; width:100px; }
.comment-body						{ float:right; width:480px; }
#commentform						{ border-top:1px solid #b7b7b7; margin:10px 0 20px 0; padding-top:10px; }
.form-list							{ width:600px; }
.form-label							{ float:left; width:120px; color:#7d7d7d; padding:5px 0 1px 0; }
.form-input							{ float:left; width:480px; padding:3px 0 3px 0; }

/* SWFObject */
object								{ background:#b7b7b7; border:8px solid #ffffff; }
.entry div							{ margin: 8px 0; }

/* CODECOLORER */
.codecolorer, .codecolorer *		{ font-size:12px; }

/* WORKLIST */
#worklist							{ width:908px; }
.worklist-item						{ position:relative; margin:0 8px 8px 0; }
.worklist-item a					{ border:6px solid #ffffff; width:207px; height:135px; display:block; background:#ffffff; }
.worklist-item a:hover				{ border-color:#333333; }
.worklist-info						{ position:absolute; bottom:6px; left:6px; width:207px; background:#000000; opacity:0.85; display:none; }
.worklist-info p					{ color:#ffffff; font-size:11px; margin:5px; text-transform:uppercase; }

/* WORK */
#work-info							{ float:left; width:600px; }
#work-description					{ height:105px; }
#work-sidebar						{ float:right; width:235px; margin-right:-6px; }
#work-sidebar a						{ border:3px solid #ffffff; width:65px; height:42px; display:block; background:#ffffff; margin:0 6px 6px 0; float:left; }
#work-sidebar a:hover				{ border-color:#333333; }
#work-tags li						{ float:left; margin-right:5px; }
#work-tags, #work-tags a			{ color:#7d7d7d; }

/* SCROLLABLE */
div.scrollable 						{ position:relative; overflow:hidden; width:900px; height:397px; }
div.scrollable div.items 			{ width:20000em; position:absolute;	clear:both; margin-left:150px; }
div.scrollable div.items div 		{ float:left; width:580px; height:377px; margin-right:30px; border:5px solid #ffffff; }
div.navi 							{ margin:0 auto; height:20px; overflow:visible; }
div.navi a 							{ width:8px; height:8px; float:left; margin:3px; background:url(img/navigator.png) 0 0 no-repeat;	cursor:pointer; }
div.navi a:hover 					{ background-position:0 -8px; }
div.navi a.active 					{ background-position:0 -16px; }

#tooltip 							{ background-color:#000000; opacity:0.85; padding:5px; position:absolute; width:200px; z-index:3000; }
#tooltip h3, #tooltip div 			{ color:#ffffff; font-size:11px; margin:0; text-transform:uppercase; }