/* ===== Ian Haring Wedding Photography Stylesheet (c) jbandg.co.uk 2008 ===== */

body, html {
margin: 0;
padding: 0;
height: 100%; } 
* html #pages {
height: 100%; }
html {
background: url(../images/html-bg.jpg) top left repeat-x #151515;}
body {
background: url(../images/body-bg.jpg) top center no-repeat;}




/* ===== Page Structure ===== */

#pages {
font: 12px/18px Arial, Verdana, sans-serif; color: #cacaca;
padding: 0;
margin: 0 auto;
width: 991px;
position: relative;
min-height: 100%;}
#wedding-photography-intro {
width: 991px;
margin: 0 0 25px 0;
padding: 3px 0 0 0;
height:12px;}
#wedding-photography-intro h1, #wedding-photography-intro p, #wedding-photography-intro a, #wedding-photography-intro a:hover{
font: bold 12px Arial, Helvetica, sans-serif; color:#898989;
word-spacing:normal;
letter-spacing:normal;
margin:0;
padding:0;
text-decoration:none;}


#header {
width: 991px;
padding: 0;
margin: 0 0 12px 0;}

.headerleft {
width: 640px;
padding: 0;
margin: 0;
float: left;
}

.ian-logo {
float:left;
margin:0 0 0 0;padding:12px 0 0 0;}
.meith-logo {
float:right;
margin:0 0 0 0;padding:0;
display:block;}

.headerright {
width: 290px;
padding: 0;
margin: 0;
float:right;
text-align:right;}


/*
.headerleft {
width: 251px;
padding: 0;
margin: 0;
float: left;}
.headerright {
width: 460px;
padding: 0;
margin: 0;
float:right;
text-align:right;}
*/


.bar {
color:#6e6e6e;}
.clear {
clear:both;}
#main {
width: 991px;
background-color:#151515;
padding: 0 0 20px 0;}
#mainpic {
width: 984px;
padding: 0;
margin: 0 auto 0 auto;}
#mainpic img {
display:block;
padding: 0;
margin: 0;}
#content {
width:969px;
/*padding: 0 0 12px 15px;
margin: 0 14px 0 20px;*/
padding: 0 0 12px 15px;
margin: 0 0 0 3px;
background: url(../images/content-bg.jpg) top left no-repeat;}
#left {
width: 718px;
float: left;
padding: 0;
margin: 0;}
.double-left {
width: 467px;
padding: 0;
margin: 0;
float: left;}
.centre {
width: 231px;
padding: 0;
margin: 0 0 60px 0;
float: right;}
.centretext {
width: 231px;
padding: 30px 0 0 0;
margin: 0;
float: right;}
.centrealone {
width: 231px;
padding: 0;
margin: 0 0 0 20px;
float: left;}
#right {
width: 184px;
padding: 0 27px 26px 25px;
margin: 0 0 5px 0;
background: url(../images/right-bg.gif) bottom left repeat-y;
float:right;
color:#cccccc;}
.price {
padding: 0 0 15px 0;
margin: 0 0 8px 0;
background-color:#232325;
border: 1px solid #000000;}

.wedding-banner {
	background: url(/images/banners/wedding-banner-icon.gif) top right no-repeat #232325;
}

.price h3 {
padding: 15px 0 0 15px;
color:#fff;}
.price p {
padding: 0 15px 0 15px;
color: #CCCCCC;}
.price h4 {
padding: 0 0 0 15px;
color:#fff;
line-height:8px;
margin: 0 0 12px 0;}
.swatch { 
margin: 0 5px 0 0;}
#gallerynumber {
margin: 15px 0 0 0;}


.endprice {
margin-bottom: 25px;}

.price a {
text-decoration: none;
color: #c46600;
font-weight:bold;}			
.price a:hover{
text-decoration: none;
color: #fff;
font-weight:bold;}

a.reveal {cursor: pointer;}


.pricebronze {
font: normal 20px Arial, Helvetica, sans-serif; color:#a26c30;
margin: 0 0 0 0;
padding: 0;}

.pricesilver {
font: normal 20px Arial, Helvetica, sans-serif; color:#d7d7d7;
margin: 0 0 0 0;
padding: 0;}

.pricegold {
font: normal 20px Arial, Helvetica, sans-serif; color:#cbaf22;
margin: 0 0 0 0;
padding: 0;}



/* ==== navigation ==== */

#navcontainer {
height: 22px;
padding: 0;
margin: 0 0 3px 0;
background: url(../images/nav-bg.jpg) top left repeat-x;
width:991px;}
#nav, #nav ul {
float: left;
list-style: none;
color: #FFF;
padding: 0;
margin: 0;}
#nav a {
display: block;
font: normal 12px Arial, Helvetica, sans-serif; color: #999999;
text-decoration: none;
padding: 3px 0 4px 0;
width: 121px;
margin: 0;
text-align:center;
letter-spacing:2px;
background: url(../images/nav-bg-off.jpg) top left no-repeat;}
#nav a:hover {
background: #c46600 repeat-x;
color: #FFF;}
#current a:link, #current a:visited, #current a:hover, #current a:active { 
color:#fff; 
text-decoration:none; 
background: #151515; }
#current a:hover {
background: #151515;
color: #fff; } 
#last a:link, #last a:visited, #last a:active { 
width: 121px;
color:#999999;
text-decoration:none;
background: url(../images/nav-bg-last.jpg) top left no-repeat;}
#last a:hover {
background: #c46600 repeat-x;
color: #FFF;}
#nav li {
float: left;
padding: 0;}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 121px;
w\idth: 124px; }
#nav li ul a {
color: #999999;
width: 121px;
w\idth: 121px;
padding: 4px 0 4px 0;
background-color: #333333;}
#nav li.hover ul ul, #nav li.sfhover ul ul, {
left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
background: #000;
left: auto;
border-top: none;
width: 122px;
w\idth: 122px;
padding: 0;}
#currentlast a:link, #currentlast a:visited, #currentlast a:hover, #currentlast a:active { 
color:#fff; 
text-decoration:none; 
background: #151515;
width: 122px; }
#currentlast a:hover {
background: #151515;
color: #fff; } 

#drop a:link, #drop a:visited, #drop a:hover, #drop a:active { 
font: normal 12px Arial, Helvetica, sans-serif; color: #999999;
text-decoration:none; 
background: url(../images/nav-bg-off.jpg) top left no-repeat;
width: 122px; }
#drop a:hover {
background: #c46600 repeat-x;
color: #FFF; } 



/* ===== Text ===== */

body p {
margin: 0 0 9px 0;}
h1 {
font: normal 22px/20px Arial, Verdana, sans-serif; color: #fff;
padding: 0;
margin: 0 0 10px 0;
letter-spacing:-1px;}
h2 {
font: normal 20px/20px Arial, Verdana, sans-serif; color: #ffffff;
padding: 0;
margin: 0 0 10px 0;
letter-spacing:-1px;}
h3 {
font: normal 20px/20px Arial, Verdana, sans-serif; color: #333333;
padding: 0;
margin: 0 0 10px 0;
letter-spacing:-1px;}
h4 {
font: bold 15px Arial, Verdana, sans-serif; color: #ebebeb;
padding: 0;
margin: 10px 0 3px 0;}
.number {
font: bold 25px/25px Arial, Verdana, sans-serif; color: #fff;
letter-spacing:-1px;}
.wedding-price-intro {
font: bold 13px/20px Arial, Verdana, sans-serif; color: #fff;}

.special-text {
font: bold 16px/19px Arial, Verdana, sans-serif; color: #fff;}

.notes {
font: 10px Arial, Verdana, sans-serif; color: #666666;
}
.break  {
margin: 5px 0 5px 0;
padding: 0;
}

/*   header text   */
.ian-haring {
font:normal 48px Arial, Helvetica, sans-serif; color:#FFFFFF;
margin: -11px 0 0 0;
padding: 0;}
.call {
font:normal 26px Arial, Helvetica, sans-serif; color:#FFFFFF;
margin: 0 0 0 0;
padding: 0;}
.photography {
font: italic 24px Arial, Helvetica, sans-serif; color:#c46600;
margin: -10px 0 0 4px;
padding: 0;}
.contact {
font: italic 24px Arial, Helvetica, sans-serif; color:#c46600;
margin: -8px 0 0 4px;
padding: 0;}


/* ===== Links ===== */

#left a:link, #left a:visited, #left a:active {
text-decoration: none;
color: #c46600;
font-weight:bold;}			
#left a:hover{
text-decoration: none;
color: #fff;
font-weight:bold;}
#right a:link, #right a:visited, #right a:active {
text-decoration: none;
color: #c46600;
font-weight:bold;}			
#right a:hover{
text-decoration: none;
color: #ffffff;
font-weight:bold;}
.linkarrow {
margin: 0;
padding: 0 0 0 18px;
background: url(../images/link-arrow.gif) no-repeat 0 50%; }
.linkarrow:hover {
background: url(../images/link-arrow-over.gif) no-repeat 0 50%; }
.double-left a:link, .double-left a:visited, .double-left a:active {
text-decoration: none;
color: #c46600;
font-weight:bold;}			
.double-left a:hover{
text-decoration: none;
color: #fff;
font-weight:bold;}
#album a:link, #album a:visited, #album a:active {
text-decoration: none;
color: #c46600;
font-weight:bold;}			
#album a:hover{
text-decoration: none;
color: #fff;
font-weight:bold;}

#linksright a:link, #linksright a:visited, #linksright a:active {
text-decoration: none;
color: #c46600;
font-weight:bold;}			
#linksright a:hover{
text-decoration: none;
color: #fff;
font-weight:bold;}

/* ===== Arrow List ===== */

#content ul {
margin: 0 0 10px 0; 
padding: 0;
list-style-type: disc; }
#content ul li {
background-image: url(../images/list-arrow.gif);
background-repeat: no-repeat;
background-position: 0 0.35em;
margin: 0 0 0 15px;
padding: 0 0 2px 3px;}
#gallery ul li {
margin: 356px 0 0 3px;
padding: 2px 0 0 6px; }

#gallery a img, #gallery a:visited img {
border: 2px solid #fff;}
#gallery a:hover img {
border: 2px solid #c46600;}


/* ====  Contact form ==== */
#contactform {
margin: 0;
padding: 0;
width: 100%;}
#contactform fieldset {
margin: 0 0 5px 0;
padding: 1em;  
-moz-border-radius:4px;
border: 1px solid #d2d2d2;}
#contactform legend { 
font: bold 15px Arial, Helvetica, sans-serif; color: #fff;
letter-spacing:-1px;
margin: 0;
padding: 0 5px 0 0; }
#contactform label {
float: left;
width: 170px;
margin: 0;
padding: 6px 0 0 0 }
#contactform label.location {
float: left;
width: 140px;
margin: 0;
padding: 4px 0 0 0 }
#contactform .red {
font: bold 13px Arial, Helvetica, sans-serif; color: #356DCA;
width: 190px;
margin: 0;
padding: 4px 0 0 0; }
#contactform input { 
font: normal 11px Arial, Helvetica, sans-serif; color: #000;
width: 220px;
margin: 0;
padding: 0; }
#contactform select { 
font: normal 11px Arial, Helvetica, sans-serif; color: #000;
width: 220px;
margin: 5px 0 0 0;
padding: 0; }
#contactform textarea { 
font: normal 11px Arial, Helvetica, sans-serif; color: #000;
width: 222px;
height: 100px;
margin: 2px 0 0 0;
padding: 0; }
#contactform input:focus, #contactform textarea:focus { 
background-color: #FFC; }
#contactform input.chkbox {
width: auto;
margin: 0 4px 0 0;
padding: 0; }
#contactform input.radio1 {
width: auto;
margin: 4px 0 0 0;
padding: 0; }
#contactform input.radio2 {
width: auto;
margin: 4px 0 0 10px;
padding: 0; }
#contactform input.submit {
font: normal 11px/16px Arial, Helvetica, sans-serif; color:#CCCCCC;
width: 80px;
float: left;
margin: 10px 6px 0 0;
padding: 0;
background-color:#333;
border: 1px solid #666666;
cursor: pointer; }



/* ====== Availability form ====== */

#availability-form {
margin: 0 0 8px 0;
float:right;
padding: 13px 19px 0 19px;
background-color:#232325;
width: 192px;}

#availability  {
width: 192px;
margin: 0;
padding: 0;}
	
#availability form {
margin: 0 0 0 0;
padding: 0; }
	
#availability p {
margin: 0 0 5px 0;
padding: 0; }
	
#availability table {
margin: 0 0 10px 0;
padding: 0;
border: none; }
	
.cleardefault {
width: 185px;
padding: 2px;
margin: 2px 0 6px 0;
font-size: 11px;
line-height: 16px;
color: #747166;
font-family: Tahoma, Arial, Helvetica, sans-serif;
border: none;
height:14px;	}

.submitbutton { 
width: 150px;
height: 25px;
margin: 4px 0 9px 0;
cursor:pointer;
font-size: 11px;
color: #fff;
background-color:#1e1e1f;
border: solid 1px #000000;
font-weight:bold;	}


/* ==== venues ==== */

.wedding-venues {
	float: left;
	width: 233px;
	margin: 0;
	padding: 0;
}

/* ==== directions ==== */

#directions  {
width: 209px;
background-color: #232325;
margin: 12px 0 10px 0;
padding: 10px 10px;
border: solid 1px #000;
color: #ffffff;}
#directions form {
margin: 0;
padding: 0; }
#directions input {
font: normal 11px/16px Arial, Helvetica, sans-serif; color: #000000;
width: 150px;
margin: 0;
padding: 2px; }
#directions input.submit {
font: normal 11px/16px Arial, Helvetica, sans-serif; color:#CCCCCC;
width: 40px;
height: 23px;
margin: 2px 0 0 3px;
padding: 0;
background-color:#333;
border: 1px solid #666666;
cursor: pointer;}



/* ===== Images ===== */

.home-portfolio1 {
padding: 0;
margin: 0 11px 7px 0;}
.home-portfolio2 {
padding: 0;
margin: 0 0 7px 0;}
#pages img {
border:none;}
.graphistudio {
margin: 0 15px 0 8px;}

.spicer-hallfield {
	float: right;
	width: 219px;
	margin: 0;
	padding: 17px 15px 0 8px;
}
.spicer-hallfield-albums {
	margin: 5px 0 0 0;
	padding: 0;
}


/* ==== Gallery ==== */

.numberbutton {
width: 20px;
height: 20px;
padding: 0;
margin: 0;
font: normal 11px/16px Arial, Helvetica, sans-serif; color:#FFFFFF;
background-color:#333333;
border: 1px solid #666666;
cursor:pointer;
margin: 0 2px 0 0;}

.numberbuttoncurrent {
width: 20px;
height: 20px;
padding: 0;
margin: 0;
font: normal 11px/16px Arial, Helvetica, sans-serif; color:#FFFFFF;
background-color:#c46600;
border: 1px solid #333333;
cursor:pointer;
margin: 0 2px 0 0;}

.numberbutton:hover{
background-color:#c46600;
border: 1px solid #333333;
cursor:pointer;}

.buttons {
margin: 0 0 0 3px;}



/* ==== Banners and buttons ==== */

#banners a:link, #banners a:visited, #banners a:active {
color:#fff;
text-decoration:none;}

#banners a:hover{
color:#c46600;
text-decoration:none;}

#banners p {
margin: 0 0 3px 0;}

#banners {
margin: 0 0 8px 0;}

#bannersright a:link, #bannersright a:visited, #bannersright a:active {
color:#fff;
text-decoration:none;}

#bannersright a:hover{
color:#c46600;
text-decoration:none;}

#bannersright p {
margin: 0 0 3px 0;}

#bannersright {
margin: 0 0 8px 0;
float:right;
padding: 0 0 0 0;}


#albumwrapper {
float: right;
width: 481px;}


#album {
float: right;
width: 481px;
padding: 0 0 5px 0;
margin: 0 0 8px 0;
background-color: #232325;
border: 1px solid #000;}

#album h2 {
padding: 15px 0 0 15px;
color:#fff;}
#album p {
padding: 0 15px 0 15px;
color: #CCCCCC;}
#album h4 {
padding: 0 0 0 15px;
color:#fff;
line-height:8px;
margin: 0 0 12px 0;}




#linksright {
float: right;
width: 483px;
padding: 0 0 5px 0;
margin: 0 0 8px 0;}


.googlemap {
width: 224px;
height:56px;
background: url(../images/banners/view-google-map.gif) top left no-repeat;
display:block;
padding: 20px 0 0 7px;
margin: 0;
font: bold 15px/19px Arial, Helvetica, sans-serif; color:#333333;
text-decoration:none;}

.whychoose {
width: 224px;
height:56px;
background: url(../images/banners/why-choose-ian.gif) top left no-repeat;
display:block;
padding: 20px 0 0 7px;
margin: 0;
font: bold 15px/19px Arial, Helvetica, sans-serif; color:#333333;
text-decoration:none;}

.price-banner {
width: 224px;
height:56px;
background: url(../images/banners/prices.gif) top left no-repeat;
display:block;
padding: 20px 0 0 7px;
margin: 0;
font: bold 18px/19px Arial, Helvetica, sans-serif; color:#333333;
text-decoration:none;}

.contact-us {
width: 224px;
height:56px;
background: url(../images/banners/contact-us.gif) top left no-repeat;
display:block;
padding: 20px 0 0 7px;
margin: 0;
font: bold 18px/19px Arial, Helvetica, sans-serif; color:#333333;
text-decoration:none;}

.arrow {
padding: 0;
margin: 0 0 0 5px;}




.linksleft {
width: 180px;
float:left;}

.linksright {
width: 270px; 
float:right;}


.linksrightright {
width: 286px; 
float:right;}


/* ============= ibox ============== */

#ibox_w{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:100;
	width: 100%;
	height: 100%;
	background-color: #000;
	margin:0;
	padding:0;
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}

#ibox_progress {	
	margin:0;padding:0;
	position: absolute;
	z-index:105;
}

#ibox_wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:1000;
	padding:20px 20px 45px 20px;
	width:300px;
	height:300px;
	background-color:#fff;
	margin:0;}

#ibox_content {
	background-color:#FFFFFF;
	width:100%;
	height:100%;
	margin-bottom:5px;
	position:relative;
	top:0px;
	left:0px;
	border:1px solid #ccc;
}

#ibox_footer_wrapper {
	position:relative;padding:0;margin:0;top:0px;left:0px;
	font: bold 12px Arial, Helvetica, sans-serif; color: #333;
}

#ibox_wrapper a:link, #ibox_wrapper a:visited, #ibox_wrapper a:active {
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif; color: #6e6e6e;}			
#ibox_wrapper a:hover{
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif; color: #333333;}



/* ===== Spry =====*/

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

/* 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: 0 0 0 0;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* 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 {
	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;
	width: 10px;
	height: 14px;
	float: left;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font: normal 11px Arial, Helvetica, sans-serif; color:#FFFFFF;
	list-style: none;
background-color:#333333;
border: 1px solid #666666;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}

/* 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:#c46600;
border: 1px solid #333333;
}

/* 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:#c46600;
border: 1px solid #333333;
}

/* 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 {
	border: none;
	margin: -373px 0 0 0;
	float: left;
	clear:both;
	padding: 0;
}

/* 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: 0;
	margin: 0;
}

/* 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 {
	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: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: none;
	border: none;
}

/* 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;
}


/* ===== Footer ===== */

#footer {
width: 954px;
padding: 15px;
margin: 0 0 0 3px;
background-color: #232325;
font: 12px/18px Arial, Verdana, sans-serif; color: #7f7f7f;}
#footerleft {
float:left;
padding: 0;
margin: 0;
width: 502px;
height: 25px;
overflow:hidden;}
#footerright {
float:right;
padding: 0;
margin: 0;
width: 445px;
height: 25px;
overflow:hidden;}
#footercopy {
width: 954px;
margin: 0;
padding: 0;}
#footer a:link, #footer a:visited, #footer a:active {
color: #ababac;
text-decoration:none;}
#footer a:hover {
color: #fff;
text-decoration:none;}
#fsb-logo {
float: right;
margin: 0 0 0 10px;
padding: 5px 0 0 0;
border-left: 1px solid #1e1e1f;
font-size: 10px;}