/*
Theme Name: blanktheme
Theme URI: http://www.freshcoatofpaint.co.uk
Description: blanktheme is my widget ready default WP theme for use on client projects
Author: Anthony Brewitt
Author URI: http://www.freshcoatofpaint.co.uk
*/


img a, a img{border: none; text-decoration: none;}

.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
margin: 4px 10px 4px 0;
border: 1px solid #ccc;
padding: 1px;
}
.alignright {
	float: right;
border: 1px solid #ccc;
padding: 1px;
}
.wp-caption {
	background-color: #fff;
	border: 1px solid #ddd;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px; /* optional rounded corners for browsers that support it */
	/* margin: 10px; */
	padding-top: 4px;
	text-align: center;
}
.wp-caption img {
	border: 0 none;
	margin: 0;
	padding: 0;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}





li.widget_twitter{}

ul.twitter{margin: 0; padding: 0;}

h2.widgettitle a{font-size: 1em !important; color: #75A050 !important; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid #CECBBC; margin: 14px 0 10px 0; font-family:Georgia, "Times New Roman", Times, serif;}

li.twitter-item{ font-size: 1.3em !important;  margin-left: 0; padding: 0 0 10px 0; border-bottom: 1px solid #CECBBC;}


li.twitter-item a{font-size: 1.1em !important; font-weight: bold !important;}





#content table{
/* background-image: url('http://blog.bauduc.com/wp-content/uploads/2010/06/table-row.png'); */
}

#content table td{font-size: 1.1em !important; border: 1px solid #CECBBC; padding: 4px;}

#content table .heading{font-weight: bold;}

#content table tr:first-child {color:#75A050; font-weight: bold !important;} 



div.clear{display: block; clear: both; height: 10px;}

li.widget{margin-bottom: 16px !important;}

a.no-border, a.no-border img{border: none !important;}

li.widget_search label{
display: none;
}

li.widget_search #s{
width: 200px;
}

li.widget_text{}

#newsletter{float: right;width: 252px; height: 30px; background-image: url('pics/news.jpg'); padding-left:177px; margin-right: 78px; background-repeat: no-repeat;}

#newsletter_go{ width:39px;height:18px;margin:5px 3px 0 0; padding-left: 4px; float: left;}

.newsletter_name {float:left; width:64px;height:18px;color:#797979;font:12px Georgia; margin-top:3px; }
.newsletter_email { float:left; width:120px;height:18px;color:#797979;font:12px Georgia;margin-top:3px; }


a.underline{text-decoration: underline !important; font-size: 1em !important;}

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

div.textwidget{ width: 310px; display: block; }

div.border{border: 1px solid #CECBBC; padding: 8px; margin-top: 16px; float: left;}


ul.left-list{
padding: 0 !important;
margin: 0 !important;
width: 140px;
float: left;
text-align: left !important;
list-style: none !important;
}

ul.left-list li{
padding: 0 !important;
margin: 0 !important;
}

ul.left-list li a:link, ul.left-list li a:visited{
margin: 0 !important;
text-decoration: none;display: block; border-bottom: 1px solid #cccccc; color: #444; font-size: 1.3em; padding: 0.3em; width: 100%;
}

ul.left-list li a:hover, ul.left-list li a:focus{
background-color:#E4DECE;
}


ul.right-list{
padding: 0 !important;
margin: 0 !important;
width: 140px;
float: right;
text-align: left !important;
list-style: none !important;
}

ul.right-list li{
padding: 0 !important;
margin: 0 !important;
}

ul.right-list li a:link, ul.right-list a:visited{
margin: 0 !important;
text-decoration: none;display: block; border-bottom: 1px solid #cccccc; color: #444; font-size: 1.3em; padding: 0.3em; width: 100%;
}

ul.right-list li a:hover, ul.right-list li a:focus{
background-color:#E4DECE;
}


/* ---------------- main layout ---------------------- */

li.cat-item-89{display: none;}

li.cat-item-80{display: none;}

/* --
img.alignright{float: right;}

img.alignleft{float: left;}

-- */

p#trackback{margin: 8px 0 8px 0;}

#content ul{margin-left: 0; list-style: none; font-size: 1.3em;}

#content select{width: 300px;}

/* --

#content img{padding: 2px; margin: 4px; border: 1px solid #cccccc;}

-- */

div#popbox, div#recbox{width: 250px; float: left; margin: 0 20px 10px 0;}

#content p a:link, #content p a:visited{color: #8A1319;}

#content p a:hover, #content p a:focus{color: #75A050;}


h1 < a:first-child
{
font-weight:bold
} 

#popbox ul, #recbox ul, ul#archives{margin: 0 0 0 0; padding: 0 0 0 0; text-align: left; float: left;}

#popbox ul li, #recbox ul li, #archives li{list-style-type: none; font-size: 1em; color: #343434; 
padding: 0 0 0 0; margin: 0 0 0 0;}

#popbox ul li a:link, #popbox ul li a:visited, #recbox ul li a:link, #recbox ul li a:visited, #archives li a:link, #archives li a:visited{
color: #600000; 
text-decoration: none;
display: block;
margin: 0 0 0 0;
border-bottom: 1px solid #cccccc;  padding: 0.3em;}

#popbox ul li a:hover, #popbox ul li a:focus, #recbox ul li a:hover, #recbox ul li a:focus, #archives li a:hover, #archives li a:focus{background-color: #E4DECE; 
text-decoration: underline;}


#archives li a:link, #archives li a:visited{font-size: 1.3em;}

div#first p{font-size: 1.6em;}

body {
text-align : center; 
margin : 0; padding : 0;
font-family: Trebuchet MS;
font-size: 62.5%; 
background-color: #F4F1E0;
}

.whatrss{font-size: 1.3em;}

div#wrapper{
width : 900px;
margin : 0 auto;
padding : 0;
text-align : left; 
}


div#top{
padding: 0;
margin: 0;
width: 200px;
padding: 0;
height: 30px;
color: #666;
background-image: url('pics/top-3.gif');
background-repeat: no-repeat;
float: left;
padding-top: 5px;
}

div#newsletter{background-image: url('pics/news.jpg');}

a#bauduc-home{margin: 0 0 0 4px; padding: 0 0 0 0; width: 74px; display: block; height: 36px; float: left;}

a#blog-home{margin: 0 0 0 4px; padding: 0 0 0 0; width: 106px; display: block; height: 36px; float: left;}

#footer a:link, #footer a:visited{margin: 0 0 0 0; padding: 0 0 0 0; width: 196px; display: block; height: 36px;}

div#header{
padding: 0;
margin: 0;
width: 900px;
padding: 0;
height: 199px;
color: #666;
float: left;
background: #fff url('pics/header_back2.jpg');
background-repeat: no-repeat;
}

div#header.bg1{
background: #fff url('pics/header_back1.jpg');
background-repeat: no-repeat;
}

div#header.bg2{
background: #fff url('pics/header_back2.jpg');
background-repeat: no-repeat;
}

div#header.bg3{
background: #fff url('pics/header_back3.jpg');
background-repeat: no-repeat;
}

div#header.bg4{
background: #fff url('pics/header_back4.jpg');
background-repeat: no-repeat;
}


div#redbar{
padding: 0;
margin: 0;
width: 900px;
padding: 0;
height: 30px;
color: #666;
background: #fff url('pics/redbar-back.jpg');
background-repeat: no-repeat;
float: left;
text-align: right;
}

#redbar p{margin: 3px 5px 0 0;}

#redbar p a{color: #fff;text-decoration: none; font-size: 0.9em; font-weight: bold;  font-variant: small-caps; font-family:Verdana; margin: 3px 16px 0 0;  letter-spacing: 0.5px;}

div#content {
width : 550px;
float : left;
padding: 0;
margin: 18px 0 18px 0;

}

div#sidebar{
width: 310px;
float : right;
text-align: center;
padding: 0;
margin: 28px 0 0 0;
}

div#about{
text-align: center;
padding: 0 0 0 0;
margin: 0 0 0 0;

}

div#about p{
width: 310px;
padding: 0 0 0 0;
margin: 0 0 20px 0;
background-color: #E4DECF;
border: 1px solid #cccccc;
color: #777;
}

div#moreposts{
text-align: center;
padding: 0 0 0 0;
margin: 0 0 0 0;
float: left;
display: block;
}

div#moreposts p{
width: 310px;
padding: 0 0 0 0;
margin: 0 0 5px 0;
background-color: transparent;
color: #777;
}

div#moreposts p a{
padding: 0 0 0 0;
margin: 0 0 0 0;
font-size: 1em;
color: #600000;
}

div#footer{
text-align: left;
display: block;
clear: both;
background-color: transparent;
padding: 0 0 0 0;
margin: 0 0 0 0;
width: 900px;
height: 36px;
color: #666;
background-image: url('pics/top2.jpg');
background-repeat: no-repeat;
float: left;
}

/* ------------------- Headings and paragraphs ------------------- */

#header a:link, #header a:visited{display: block; width: 700px; height: 100px; padding: 0; margin: 0; background-color:transparent;}

h2.widgettitle{display: block; font-size: 1.1em; color: #75A050; font-weight: bold; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid #CECBBC; margin: 14px 0 10px 0; font-family:Georgia, "Times New Roman", Times, serif;}

.widget{margin-bottom: 16px;}

strong.contenttitle{display: block; width: 98%; font-size: 1.1em; color: #75A050; font-weight: bold; letter-spacing: 0.1em; /* font-variant: small-caps; */ text-transform: uppercase; border-bottom: 1px solid #CECBBC; margin: 14px 0 10px 0; font-family:Georgia, "Times New Roman", Times, serif; }

#content h1, #content h3, #content h4, #content h5{ margin: 14px 0 8px 0; text-decoration: none; padding: 0;  font-weight: normal; font-family:Georgia, "Times New Roman", Times, serif; color: #2E2B2B;}

#content h2{font-size: 1.6em; margin: 14px 0 8px 0; text-decoration: none; padding: 0;  font-weight: bold; font-family:Georgia, "Times New Roman", Times, serif; color: #2E2B2B;}

#content h3{font-size: 1.5em; margin: 14px 0 8px 0; text-decoration: none; padding: 0;  font-weight: bold; font-family:Georgia, "Times New Roman", Times, serif; color: #2E2B2B;}

h1 a:link, h1 a:visited{color: #2E2B2B; font-size: 22pt; line-height: 16pt; font-weight: normal; text-decoration: none; }

h1 a:hover, h1 a:focus{text-decoration: underline;}

h1{font-size: 22pt; color: #2E2B2B;}

p{margin: 0 0 10px 0; font-size: 1.5em; color: #343434; /* font-family:Verdana; */ font-family:Georgia;line-height: 20px;}

#sidebar p{margin: 0 10px 10px 0; font-size: 1.3em; float: left; font-family:Verdana; line-height: 20px; color: #343434; }

#sidebar p a{font-size: 1.3em;}

#content code{margin: 5px 10px 5px 0; font-size: 1.3em;}

p.meta{margin: 0 10px 10px 0; padding-bottom: 14px; font-size: 1.2em; color: #600000; border-bottom: 1px solid #CECBBC;}

p.date{margin: 0 10px 10px 0; font-size: 1.3em; color: #999; font-style: italic; width: 98%; border-bottom: 1px solid #CECBBC;}

#content p.date a:link, #content p.date a:visited{color: #999; text-decoration: none;}

p.meta a:link, p.meta a:visited{color: #600000;}


/* ---------------------- link lists ------------------------------ */

div#navcontainer{ background: url('pics/bauduc-logo2.gif'); 
background-repeat: no-repeat;  width: 100%;margin: 0; padding: 0; height: 61px; float: left;  background-color:#F4F1E0;}

#navcontainer ul
{
margin: 25px 0 0 0;  
padding-left: 0;
float: right;
width: 44%;
font-size: 1.2em;
text-align: right;
}

li a.bauduc{margin-right: 0 important!;}

#navcontainer ul li { display: inline; margin-right: 5px;}

#navcontainer ul li a
{
background-color: transparent;
float: left;
}



a#bauduc-home-logo{
width: 300px;
height: 60px;
padding: 0 0 0 0; 
background-repeat: no-repeat;
display: block; float: left;
}




#navcontainer ul li a.bauduc-home-title
{
width: 53px;
height: 25px;
padding: 8px 0 0 0; 
background-repeat: no-repeat;
}





#navcontainer ul li a.home
{
width: 53px;
height: 25px;
padding: 8px 0 0 0; 
background: #F4F1E2 url('pics/home.gif');
background-repeat: no-repeat;
}

#navcontainer ul li a.home:hover, #navcontainer ul li#active a.home
{
background: #F4F1E2 url('pics/home2.gif');
}


#navcontainer ul li a.about
{
width: 70px;
height: 25px;
padding: 8px 0 0 0; 
background: #F4F1E2 url('pics/about.gif');
background-repeat: no-repeat;
}

#navcontainer ul li a.about:hover, #navcontainer ul li#active a.about
{
background: #F4F1E2 url('pics/about2.gif');
}

#navcontainer ul li a.archives
{
width: 81px;
height: 25px;
padding: 8px 0 0 0; 
background: #F4F1E2 url('pics/archives.gif');
background-repeat: no-repeat;
}

#navcontainer ul li a.archives:hover, #navcontainer ul li#active a.archives
{
background: #F4F1E2 url('pics/archives2.gif');
}

#navcontainer ul li a.contact
{
width: 75px;
height: 25px;
padding: 8px 0 0 0; 
background: #F4F1E2 url('pics/contact.gif');
background-repeat: no-repeat;
}

#navcontainer ul li a.contact:hover, #navcontainer ul li#active a.contact
{
background: #F4F1E2 url('pics/contact2.gif');
}



#navcontainer ul li a.bauduc
{
width: 140px;
height: 25px;
padding: 8px 0 0 0; 
background: #F4F1E2 url('pics/bauduc.jpg');
background-repeat: no-repeat;
}



/* ------------------------- sidebar link lists -------------------------------- */

ul#sidebarlist{margin: 0 0 0 0; padding: 0 0 0 0; text-align: left; float: left;}

ul#sidebarlist li{list-style-type: none; font-size: 1em; color: #343434; margin-bottom: 10px;}

ul#sidebarlist li a:link, ul#sidebarlist li a:visited{
color: #600000; 
font-size: 1.3em;
text-decoration: none;
}

ul#sidebarlist li a:hover, ul#sidebarlist li a:focus
{
text-decoration: underline;
}

/* ------------------------- abbreviations -------------------------- */

abbr, span.abbr {
cursor: help;
border-bottom: 1px dashed #999;
}



/*------------------------------- forms ------------------------------ */

input.button{}

textarea#comment{width: 550px;}


/* --------------------------- comments ------------------------------- */

div#content ul#comment_list{padding: 0; margin:0;}

div#content ul#comment_list li a{color: #600000;}

div#content ul li{list-style-type: none; margin: 1.3em 0 1.3em 0;}



div#content ul#comment_list li.comment{ width: 550px; font-size: 0.7em;}

.test2{background-image: url(pics/commentpoint2.jpg); background-repeat: no-repeat;  background-position: bottom left; height: 40px; background-color: transparent; margin: 0 0 0 0; padding: 8px;}

div.combg p{background-color: #E4DECF; margin: 0 10px 0 0; padding: 10px; width: 530px; color: #111;}

p.comboxbottom{margin: 0 0 0 0; background-color: transparent; padding: 8px;background-image: url(pics/commentpoint3.jpg); background-repeat: no-repeat; font-size: 1em; background-position: top left; height: 32px;}

/* --------------------------------- widgets ------------------------- */

#tag_cloud li a:hover, #tag_cloud a:focus{text-decoration: underline; font-size: 10%;}

h2.widgettitle{}

.widget{margin-bottom: 20px !important;} 

.widget_categories ul, #recent-comments ul, .widget_links ul{margin: 0; padding: 0; list-style-type: none; width: 100%;}

.widget_categories li a:link, .widget_categories li a:visited, #recent-comments li a:link, #recent-comments li a:visited, .widget_links ul li a:link, .widget_links ul li a:visited{text-decoration: none;display: block; border-bottom: 1px solid #cccccc; color: #444; font-size: 1.3em; padding: 0.3em; width: 100%;}

.widget_categories li a:hover, .widget_categories li a:focus,#recent-comments li a:hover, #recent-comments li a:focus, .widget_links li a:hover, .widget_links li a:focus{background-color:#E4DECE;}






















<!--
#categories-1 ul, #recent-comments ul, .widget_links ul{margin: 0; padding: 0; list-style-type: none; width: 100%;}

#categories-1 li a:link, #categories-1 li a:visited, #recent-comments li a:link, #recent-comments li a:visited, .widget_links ul li a:link, .widget_links ul li a:visited{text-decoration: none;display: block; border-bottom: 1px solid #cccccc; color: #444; font-size: 1.3em; padding: 0.3em;}

#categories-1 li a:hover, #categories-1 li a:focus,#recent-comments li a:hover, #recent-comments li a:focus, .widget_links li a:hover, .widget_links li a:focus{background-color:#E4DECE;}

-->

#recent-comments ul{line-height: 2.6em;}












a.rssimg{background: url(pics/rss.png) no-repeat 0 50%; padding-left: 18px;  }


/*
Plugin Name: WP-Digg Style Paginator
Plugin URI: http://www.mis-algoritmos.com/2007/09/09/wp-digg-style-pagination-plugin-v-10/
Author: Victor De la Rocha
Author URI: http://www.mis-algoritmos.com
*/
/*CSS Digg style pagination*/
	div.pagination {
		padding: 3px;
		margin: 3px;
		text-align:center;
	}
	
	div.pagination a {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #75A050;
		
		text-decoration: none; /* no underline */
		color: #75A050;
	}
	div.pagination a:hover, div.digg a:active {
		border: 1px solid #75A050;
                background-color: #75A050;
		color: #fff;
              
	}
	div.pagination span.current {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #75A050;
		
		font-weight: bold;
		background-color: #75A050;
		color: #FFF;
	}
	div.pagination span.disabled {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #EEE;
	
		color: #DDD;
	}






/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	margin: 0px 0 10px 0;
	padding: 0px;
	float: left;
	clear: left;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}



.TabbedPanels ul{margin: 0; padding: 0; list-style-type: none;}

.TabbedPanels li a:link, .TabbedPanels li a:visited{text-decoration: none;display: block; border-bottom: 1px solid #dddddd; color: #444; font-size: 1.3em; padding: 0.3em;}

.TabbedPanels li a:hover, .TabbedPanels li a:focus{background-color:#E4DECE;}




/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 13px;
	margin: 0px 4px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #E4DECE;
	list-style: none;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
font-size: 1.2em; color: #75A050; font-weight: bold; letter-spacing: 0.1em; font-variant: small-caps;  font-family:Georgia, "Times New Roman", Times, serif;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: #F4F1E0;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
	background-color: #F4F1E0;
	border-bottom: 1px solid #F4F1E0;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
	background-color: #F4F1E0;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding: 10px;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}