/* 
Theme Name: WDD Theme
Description: Webbdesign Direkt Custom Made Theme
Version: 1.1
Author: Westin Produktion
Author URI: http://westinproduktion.se
*/

/********************************************
*  RESET
*********************************************/

body						{ border:0px; margin:0px; padding:0px; }
body, html, div, span, h1, h2, h3, h4, h5, h6, p, a, ol, ul, li, pre, img, table, tr, td 
							{ border:0px; margin:0px; padding:0px; }
div 						{ overflow:hidden; }

/********************************************
*  COMMON TAGS
*********************************************/							

.clear 						{ clear:both; height:0px;}
.left, .floatleft			{ float:left; }
.right, .floatright			{ float:right; }
.wrap						{ margin:8px; padding:0; }
.w15 						{ width:15%; }
.w20 						{ width:20%; }
.w35 						{ width:35%; }

/********************************************
*  LAYOUT
*********************************************/

body 						{ text-align: center; }
#wrapper 					{ margin: 0 auto; text-align: left; width: 980px; }
#frontpage, #single, #page, #archive, #cssgallery
		 					{ float:left; width: 712px; }
#sidebar 					{ float:right; width: 260px; }
#board						{ float:left; width:488px; }
#menu						{ float:left; margin:0 0 0 8px; width: 216px; }

/********************************************
*  BACKGROUNDS AND COLORS
*********************************************/

body 						{ background:#F1F0E8; }
#header						{ background:white }
#main						{ background:url(images/mainbg.png); }

.item						{ border-color:#F1F0E8;  }

#header	a					{ color:#000; }
#header	a:hover				{ color:#DF0F1A; }
#header h2 a:hover			{ background:url(images/header.jpg); color:#000; }

.navbar	li					{ background:#FFFFFF; }
.navbar li.current_page_item a, .navbar li.current_page_parent a, .navbar li.current-cat  a			
							{ background:#F2F0B8; color:#DF0F1A; }
.navbar	a:hover				{ background:#F2F0B8; color:#DF0F1A; }
.navbar ul					{ border-bottom:1px dashed gray; }

#cssgallery					{ background:#FFFFFF; }			

a							{ color:#DF0F1A; }

.articleheader 				{ background:#F7F0E0; } 
.articleheader span			{ background-color:#FFFFFF; }
.articleheader span	a		{ color:#000; }

#frontpage .article h3 a, #archive .article h3 a
							{ color:#DF0F1A; }
#frontpage .article p, #archive .article p
					 		{ color:#333333; }
                            
.archive h1, .search h1		{ background:#F7F0E0; }
.article h3 a, .article h1	{ color:#DF0F1A; }
.article p 					{ color:#666666; }

.posthead p 				{ color:#DF0F1A;}
p.deprecated 				{ color:#DF0F1A; }

div.ex 						{ background: #99FF99; border-color: #339900; }	
pre 						{ border-color:#b4b4b4; }

blockquote 					{ color: #917A69; }

table.faktaruta 			{ background-color:#E6E6FA; }
table.faktaruta caption 	{ background-color: #5498C5; color: #FFFFFF; }
table.faktaruta a 			{ color:#000000; }
table.faktaruta 			{ background-color:#E6E6FA; }
table.faktaruta th 			{ background: #DFE6EC; }
table.faktaruta tr 			{ background: #BFCCD9; }
#attribut 					{ background-color:#E5E5E5; border-color:#990C0F; color:#000000; }
#attribut h2 				{ background:#990C0F; color:#FFFFFF; }
#attribut h3 				{ background:#BF0F12; color:#FFFFFF; }
#attribut th 				{ background:#E6946E; color:#000000; }

.leftsidebar a				{ color:#DF0F1A; }


ul.pusher li				{ background:#DF0F1A; color:#FFFFFF; }
ul.pusher li.css			{ background:#339900; }
ul.pusher li a				{ color:#FFFFFF; }

#footer						{ background:#FFFFFF; border-color:#F1F0E8; }

.colorone					{ background-color: #DF0F1A; }
.colortwo					{ background-color: #5498C5; }
.colorthree					{ background-color: #BFCCD9; }
.colorfour					{ background-color: #99FF99; }

/********************************************
*  TEXT
*********************************************/

body 					{ font-size:12px; }
body 					{ line-height:150%; } 
body 					{ font-family: Georgia, "Times New Roman", Times, serif; }
li 						{ line-height:120%; }

/********************************************
*  MAIN TEXT STYLE
*********************************************/

.article h1, h2, h3, h4, h5, h6 { font-weight:bold; line-height:100%; margin:15px 0 10px; }
.article h1 					{ font-weight:normal; font-size:300%; }
.article h2 					{ font-size:200%; margin:20px 0 10px 0; }
.article h3 					{ font-size:150%; }
.article h4 					{ font-weight:normal; font-size:125%; }
.article h5 					{ font-size:120%; }
.article h6 					{ font-size:100%; }
.article p 						{ font-size:100%; margin: 5px 0; color:#333333; font-size:115%; line-height:150%; }

p.deprecated 					{ font-weight: bold; }
p.declaration					{ padding:0 30px 0 0; }
p.ex, p.exempel					{ clear:left; font-weight: bold; margin: 10px 0 -2px 0;  }
div.ex 							{ border-style:solid; border-width:1px; clear:left; margin: 0px; padding:10px; }	

p.preheading 					{ clear:left; font-weight: bold; margin: 10px 0 -2px 0; }
.article pre 					{ clear:left; border-style:dashed; border-width:1px; border-left-style:solid; border-left-width:20px; font-size:90%; margin: 0 0 10px; overflow:auto; padding: 10px; }

p.info, p.tips, p.alert, p.mera { margin:5px 0 10px; padding: 3px 5px 3px 35px; }
p.info							{ background:transparent url(images/icon/info.jpg) no-repeat 2px 50% scroll; }
p.tips 							{ background:transparent url(images/icon/tips.jpg) no-repeat 2px 50% scroll; }
p.alert 						{ background:transparent url(images/icon/alert.jpg) no-repeat 2px 50% scroll; }
p.mera 							{ background:transparent url(images/icon/mera.jpg) no-repeat 2px 50% scroll; }

.article ul						{ clear:left; list-style:disc;  margin: 5px 0; padding: 0 0 0 20px; }
.article ol						{ clear:left; margin: 5px 0; padding: 0 0 0 20px; }
.article ul li, .article ol li	{ padding:3px 0; line-height:150%; }

table.faktaruta 				{ font-size:90%; margin:0 0 10px 0; width: 470px; }
table.faktaruta caption 		{ font-size:100%; font-weight:bold; padding: 2px; }
table.faktaruta tr 				{ margin:10px; }
table.faktaruta th 				{ text-align:left; padding: 3px 5px; }
table.faktaruta td 				{ padding: 3px 5px; }

#attribut 						{ border-bottom:2px solid; border-width:0px; font-size:90%; margin: 10px 0; padding:0; }
#attribut h2 					{ font-size:120%; margin: 0; padding: 5px; }
#attribut table 				{ margin:0; padding:0; width:100%; }
#attribut table tr 				{ margin:0; padding:0; }
#attribut table td 				{ padding: 0 5px; vertical-align:top; }
#attribut table td h3 			{ font-size:110%; margin:0 -5px; padding: 5px; }
#attribut th 					{ padding: 5px; }

.article a:link 				{ text-decoration:none; }
.article a:visited 				{}
.article a:active 				{}
.article a:hover 				{ text-decoration:underline; }

.article acronym, .article abbr { border-bottom:1px dashed #969696; cursor:help; 
								  font-variant:small-caps; text-transform:lowercase; }
ol.declaration 					{ margin:0px; }

.article blockquote				{ background:transparent url(../images/quote.jpg) no-repeat top left scroll;
							  	  font-size: 130%; font-style: italic; margin:10px 15px 10px 15px; padding:0; }
.article blockquote:first-letter { font-size:150%; }
.article blockquote.floatleft	{ display:block; float:left; width:30%; }
.article blockquote.floatright	{ display:block; float:right; width:30%; }

/********************************************
*  EXTRA STYLE
*********************************************/

/** HEADER **/
#header						{ margin:65px 0 0; position:relative; }
#header	a					{ text-decoration:none; }
#header	a:hover				{ text-decoration:none; }


#header h2 					{ background:url(images/header.jpg); margin:0 5px; height:85px; width:970px; }
#header h2 a				{ color:#E4E3CF; display:block; font:4px; height:85px; width:970px; }
#header h2 a:hover			{ color:#E4E3CF; }
#header h3					{ float:left; clear:left; margin:0 0 10px 10px; } 
 
/** NAVBAR **/                             
.navbar						{ padding:0; width:auto; }
.navbar ul 					{ float:left; list-style-type:none; margin:0; padding:0; width:100%; }
.navbar ul li 				{ clear:none; margin:0 3px 0 0; float:left; }
.navbar ul li a 			{ display:block; margin:0; padding: 7px 10px 5px; }
.navbar ul li a				{ font-size:100%; font-weight:bold; }

#navbar-top					{ margin:4px 0 0 5px; }
#navbar-bottom				{ margin:0px 0 0 5px; }



p#addsite_header			{ color:#333; font-size:230%; font-weight:bold; width: 260px; text-align:center; position:absolute; bottom:0px; right:0px; }
/** SEARCHFORM **/  
#searchform					{ clear:none; margin:0px; padding:0px; position:absolute; top:0px; right:0px; }
#searchform	div				{ }
#searchinput				{ width:190px; }
#searchsubmit				{ margin:1px 5px 0 0; }

/** MAIN **/
#main						{ margin:0; }

/** ARTICLEHEADER **/

.articleheader 				{ float:none; font-size:140%; margin:5px 0; padding:0 8px; } 
.articleheader span			{ float:left; font-weight:bold; margin:0 0 -4px; padding:0 4px; position:relative; text-transform:uppercase; top:-2px; }

/** ARTICLE **/                         
.article 					{ margin:10px 0; padding:5px; }
                        
img.thumb					{ border:1px solid #D9D9D9; float:left; margin:2px 7px 7px 0px; padding:5px; width:auto;  }
img.thumb:hover				{ border:1px solid #666666; }


#frontpage .article h3, #archive .article h3
							{ font-size:190%; font-weight:bold; margin:1px 0px 5px; }
.article h3 a
							{ text-decoration: none; }
                            
#frontpage .article h3 a:hover, #archive .article h3 a:hover
							{ text-decoration: underline; }                            


#archive .article p, #frontpage .article p
					 		{ color:#333333; float:left; font-size:115%; line-height:150%; margin:0; padding:5px 0; width:330px; }


a.comment					{ background:url(images/icon/comments.gif) no-repeat 0 0; float: right; font-size:110%; margin:0px; padding:0px 10px 6px 11px; text-decoration:none; }

#board p.tags				{ background:url(images/icon/tagsarrow.gif) no-repeat 0px 2px; float:left; font-size:90%; padding:0 0 0 15px; }
#board p.tags a				{ color: #666666; }

p.add_this_title			{ font-weight:bold; margin:14px 0 0 0; }                        
div.add_this				{ margin:0; padding:5px 0; }                      
#frontpage div.add_this, #archive div.add_this
							{ border:0px; margin: 10px 0 10px 100px; }
                            

img.size-large				{ background:#F5F5F5; border:1px solid #CCCCCC; padding:4px; width:457px; }   



/** HEADING AND CONTENT **/
.rss 						{ background:transparent url(images/rss.jpg) no-repeat center top scroll; display:block; float:right;
                                  height: 16px; margin:0; text-indent:-9999px; width:16px; }
.posthead img 				{ float:left; margin:0 7px 7px 0; width:auto; }
.posthead p 				{ font-size:110%; font-style: italic; }


/** SINGLE POST **/
h1.title	 				{ font-size:190%; font-weight:bold; }

.articleheader span	ul		{ list-style-type:none; margin:0; padding:0; }
.articleheader span	ul li	{ list-style-type:none; margin:0; padding:0; }
.articleheader span	ul li a	{ color:black; text-decoration:none; }

   
                            

/** SINGLE PAGE**/
.singlepage 				{ width:490px; float: left; }

/** ARCHIVE AND SEARCH**/
.archive h1, .search h1		{ float:left; font-size:140%; margin:5px 0; padding:0 8px; width:100%; } 
.archive h1	span, .search h1 span
							{ background-color:#FFFFFF; float:left; font-weight:bold; 
							  margin:0 0 -4px; padding:0 4px; position:relative; text-transform:uppercase; top:-2px; }
.archivepost img, .searchresult img
							{ border:0px; margin:7px; float:left; }
.archivepost h2, .searchresult h2
							{ font-size:120%; font-weight:bold; margin:7px 5px 5px 5px; }
.archivepost h2, .searchresult h2
							{ text-decoration: none; }
.archivepost p, .searchresult p
							{ float:left; font-size:90%; line-height:120%; margin:0; padding:0 5px 5px 0; width:335px; }
.archivepost				{ border:3px solid #ECE3D1; margin:0 0 7px 0; }


.navigation					{ padding:5px; }
.alignleft					{ float:left; }
.alignright					{ float:right; }
.alignleft a, .alignright a	{ font-weight:bold; text-decoration:none; }


/** MENU AND SIDEBAR **/
.menu						{ font-size:100%; float:left; }
.item						{ border-bottom-style:solid; border-bottom-width:7px; padding:8px; }
.widget 					{ margin: 5px 0; }

.menu ul li					{ list-style-type:none; padding:3px 0 2px 16px;}
.menu ul ul					{ padding:0 0 0 10px; }

.item h4, .menu h4			{ font-size:100%; font-weight:bold; text-transform:uppercase; margin:0 0 5px; padding:0 0 5px; }


.item .latest-comments li	{ list-style-type:none; margin:0 0 10px; }


.sidebar 					{ font-size:100%; float:right; }

.sidebar h4 a, .menu h4 a	{ color:black; text-decoration:none;}
.sidebar ul li				{ list-style-type:none;}


.sidebar ul li 				{ padding: 5px 0; }
.sidebar ul li a			{ }


/** PUSHER **/
ul.pusher 					{ float:none; }
ul.pusher li				{ float:none; list-style-type:none; margin:0 0 10px 0; padding:10px; }
ul.pusher li a				{ font-size:140%; font-weight:bold; text-decoration:none; }


/** SIDEBAR ADD SITE **/
#addsite					{ background:#F7F0E0; margin:0; padding:0; }
#addsite h4					{ background:#333; color:white; cursor:pointer; margin:0px; padding:8px; }
#addsite div				{ margin:8px; }
#addsite label				{ clear:both; display:block; font-size:90%; margin:7px 0 0; }
#addsite input				{ width:240px }
#addsite #addsite_captcha	{ width:50px; }

#addsite em					{ clear:both; display:block; font-size:90%; }
#addsite textarea			{ width:240px; }
#addsite p					{ font-size:90%; margin:0 0 7px; }
#addsite img				{ float:left; margin:0px; }


#addsite pre				{ background:white; border:1px solid gray; color:black; font-size:90%; overflow:auto; padding: 5px; height:40px; width:240px; }
#addsite li					{ margin:4px 10px 4px 15px; } 
#addsite .addsite_question	{ cursor:pointer; font-weight:bold; list-style:disc; text-decoration:underline; }
#addsite li	pre				{ width:210px; } 
210px
/** SIDEBAR ADS **/
.sidebar .ads { margin: 5px 0 5px 5px; }
.sidebar .ads .frame {width: 124px; margin: 5px; border: solid 1px #E7D9C6; float: left;}
.sidebar .ads .img120x120 { background-color: #0000FF; height: 120px; width: 120px; margin:2px;  float:left;}


/** SIDEBAR SPY **/
ul.spy						{ margin:0px; padding:0px; width:100%; }
ul.spy li					{ list-style-type:none; margin: 0 0 11px 0; overflow:hidden; }
ul.spy li a					{ border:0; float:left; }
ul.spy li img				{ border:1px solid #D9D9D9; margin: 0 5px 5px 0; padding:1px; }
ul.spy li img:hover			{ border:1px solid #666666; }
ul.spy li div				{ float: left; width: 170px; }


ul.spy li div				{ float: left; width: 170px; }
ul.spy li div a				{ float: none; }
ul.spy li h4				{ font-size:90%; font-weight:bold; line-height:110%; margin:0 0 2px 0; }
ul.spy li p					{ font-size:90%; line-height:110%; margin:0; }





/** WIDGETS **/
#calendar_wrap {margin: 0 auto;}


.tagcloud {padding: 0 30px; text-align:center; }
.tagcloud  h3{margin: 10px}


/** LEFTSIDEBAR **/
.leftsidebar 				{ float: left; }
.leftsidebar ul 			{ font-size:100%; list-style:none; margin:5px 0; padding:0; }
.leftsidebar ul li 			{ margin:0; padding:6px 0; }
.leftsidebar ul li.down		{ background:transparent url(images/downarrow.jpg) no-repeat 120px 8px scroll; }
.leftsidebar ul li.down:hover
							{ background:transparent url(images/rightarrow.jpg) no-repeat 120px 8px scroll; }
.leftsidebar ul li a 		{ padding:4px 0 6px; }
.leftsidebar ul li ul 		{ }
.leftsidebar ul li ul		{ margin: 6px 0 0 0; padding: 0; }
.leftsidebar ul li ul li	{ list-style: none; margin:0; padding:6px 0 6px 10px; }
.leftsidebar ul li ul li:last-child
							{ padding: 6px 0 0 10px; }
.leftsidebar .item 			{ margin-bottom: 40px; }



/** FOOTER **/

#footer 					{ height: 200px; background: #FFFFFF ; border-top:7px solid #F1F0E8; border-bottom:17px solid #F1F0E8; }
#footer p 					{ display: block; float: left; width: 100%; text-align: center; padding: 20px 0 20px 0; font-size: 14px; font-weight: bold; font-family: 'Trebuchet MS', 'Arial', 'Verdana', sans-serif; }
#footer p.madeby 			{ float:right; width:auto; padding: 5px; clear:both;}
#footer p a 				{ text-decoration: none;}

/** COMMENTS **/

#comments 					{ margin: 20px 0; padding: 0px;  }
#comments h3 				{ }

#comment-counter 			{ margin: 0px; padding: 0px;  }
#comment-now-link			{ float:right; font-weight:bold; }
.comment 					{ margin-bottom: 15px; }
.commentbox 				{ margin:5px 0; }
.comment-meta 				{ padding: 3px 0 3px 5px; }
.comment-meta a 			{ color: #000000; text-decoration: underline; }
#comments .comment-text		{ font-size:90%; padding: 5px; }

.comment-author 			{ font-weight: bold; }
.comment-date 				{ color:#999999; display:block; font-weight: bold; font-size: 70%; line-height:70%; }

#commentform-title 			{ color:#000000; font-size:150%; font-weight:bold; margin:0 0 15px; padding: 5px 0; }
#commentform form			{ border-bottom:3px solid #E6E6FA; border-top:3px solid #E6E6FA; padding:15px 0;}
#commentform span 			{ display: block; font-size: 14px;  margin-bottom: 10px;}
#commentform input 			{ border: solid 2px #E6E6FA; background-color: #ffffff; padding: 3px; width: 300px; margin-right: 10px; }
#commentform input:focus	{ background:#E6E6FA; border: 2px solid #5498C5; }
#commentform textarea 		{ width: 452px; border: 2px solid #E6E6FA; padding: 3px;  margin:0 0 10px;}
#commentform textarea:focus	{ background:#E6E6FA; border: solid 2px #5498C5; }
#commentform #submit		{ background:#E6E6FA; border: 2px solid #5498C5; }

/** CSS GALLERY POST CONTENT **/
#cssgallery					{ min-height:1150px; }
#cssgallery	.cssgallery-item 
							{ float:left; margin:11px; overflow:visible; padding:0px; }
#cssgallery a				{ display:inline; }

p.cssgallery-palette		{ font-weight:bold; }                    
div.palette_item			{ float:left; padding:0px; text-align:center; width:40px; }
div.palette_item div		{ height:85px; width:40px; }
div.colorpalette p			{ display:none; }

              
.cssgallery-ratings			{ margin:-115px 0 10px 233px }
.cssgallery-ratings	p		{ font-weight:bold; }
.cssgallery-ratings .post-ratings	{ }






/** CSS GALLERY IN MENU **/
#menu						{ overflow:visible; }
.cssgallery					{ overflow:visible; }
.cssgallery	h4				{ margin:9px 0px 5px; text-align:center;  }
.cssgallery	h4 a			{ color:#333; font-size:140%; font-weight:bold; text-decoration:none; text-transform:uppercase; }
.cssgallery-item			{ color:#555555; overflow:visible; position:relative; }
.cssgallery-item img		{ background:#F5F5F5; border:1px solid #CCCCCC; margin:0; padding:4px; }

/*
a.cssgallery-title		{ background:#FFFFFF url(images/gradient-gray.gif) repeat-y scroll 0 0; bottom:28px; border-color:#999999 #999999 #999999 #888888; border-style:solid; border-width:1px; color:#000000; display:block; font-style:normal; left:-2px; max-width:156px; text-decoration:none; padding:2px 10px; position:absolute;  }
a.cssgallery-title:hover	{ background:#FFDB01 url(images/orange-gradient.gif) repeat-y scroll 0 0;border-color:#C25B08;
}
*/
p.cssgallery-title			{ width:210px; }
.cssgallery-title a			{ color:black; font-size:90%; margin:-1px 0 0 0; text-decoration:none; }
.cssgallery-title:hover a	{ text-decoration:underline; }

.cssgallery-item .post-ratings img
							{ background:none; border:none; margin:0; padding:0; }

/** SIDEBAR TREEVIEW **/
.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview .hitarea {
	background: url(images/treeview/treeview-default.gif) -64px -25px no-repeat;
	height: 16px;
	width: 16px;
	margin-left: -16px;
	float: left;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
	display: inline;
	float:none;
}

.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected { color:black; }

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(images/treeview/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }

.treeview-red li { background-image: url(images/treeview/treeview-red-line.gif); background-repeat:repeat-y; }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview/treeview-red.gif); } 

.treeview-black li { background-image: url(images/treeview/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview/treeview-black.gif); }  

.treeview-gray li { background: url(images/treeview/treeview-gray-line.gif) no-repeat; list-style-type:none; }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview/treeview-gray.gif); } 

.treeview-famfamfam li { background-image: url(images/treeview/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview/treeview-famfamfam.gif); } 


.filetree li { padding: 3px 0 2px 16px; }
.filetree span.folder, .filetree span.file { padding: 1px 0 1px 16px; display: block; }
.filetree span.folder { background: url(images/treeview/folder.gif) 0 0 no-repeat; }
.filetree li.expandable span.folder { background: url(images/treeview/folder-closed.gif) 0 0 no-repeat; }
.filetree span.file { background: url(images/treeview/file.gif) 0 0 no-repeat; }


/** PREDEMO **/

#demo_source { background-color: #FFFFCC; display:none; text-align:left; }

.demo_css { cursor:pointer;	}

.demo_wrap { overflow:visible; position:relative; }

.demo_links { position:absolute; top:-15px; left: 40px; }
.demo_links a { color:#333333; cursor:pointer; font-size:11px; margin:0 20px 0 0; text-decoration:none; }

.demo_links a:hover { color:#000000; text-decoration:underline; }
.demo_hide { display:none; }

.demo_wrap pre.demo_css {padding:10px;}

.demo_wrap pre.hidden { position:absolute; left: 10000px; }

#demo_textarea {
	margin: 0 0 10px;
	padding: 10px;
	border:1px dashed #66FF66;
	border-left: 20px solid #66FF66;
	overflow:auto;
	font-size: 11px;
}

textarea.{
	border:none;
	width: 440px;
	padding:10px;
	overflow: visible;
	font-size: 11px;
}

#demo_container {
	background-color:transparent;
	display:none;
	overflow:visible;
	position:fixed;
	right:10px;
	top:20px;
	text-align:left;
	z-index:10000;
}
#demo_title {
	font-weight:bold;
	position:absolute;
	top:-16px;
	left:0px;
}
#demo_close {
	background:transparent url("images/icon/close.png") 0 0 no-repeat;
	height:15px;
	width:15px;
	cursor:pointer;
	position:absolute;
	top:1px;
	right:1px;
}

#demo_close:hover {
	color:black;
}

#demo_iframe {
	background-color:white;
	border:1px solid gray;
	width:300px;
	height:250px;
}

.hasfocus {background-color:#99CC00}

.togglehtml {cursor:pointer;}