@charset "UTF-8";

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

/* Hide from IE-Mac \*/ 
html {
	height: 100%;
	/*overflow-x: hidden;*/
}
/* End hide */

body, td, .bod, font, p, div, form, span {
	margin: 0;
	padding: 0;
	color: #909090;
	font: 12px/18px "Helvetica Neue", Arial, sans-serif;
	/*background: url("
   	javascript:
     document.body.onload = function(){
        var test = document.getElementById('RightMap');
        if (test) {
            RightMap.style.zIndex = 2;
        }
     }
 ");*/
}

body {
	background: #000000 url(../images/cccontainer.gif) top left repeat-y;
	overflow: auto;
}

img { border: 0; }

/* UI */

a:link, a:active, a:visited {
	color: #333333;
	text-decoration: none;
	background-color: transparent;
}

a:hover {
	text-decoration: none;
	background-color: transparent;
	/*filter:alpha(opacity=90);
	-moz-opacity: 0.40;
	opacity: 0.40;*/
}

a.thumbs:link, a.thumbs:active, a.thumbs:visited {
	width: 158px;
	height: 25px;
	color: #909090;
	text-decoration: none;
	background: transparent url(../images/ccplaybtn_Off.gif) top left no-repeat;
}

a.thumbs:hover {
	color: #ffffff;
	text-decoration: none;
	background: transparent url(../images/ccplaybtn_Over.gif) top left no-repeat;
}

a.ken:link, a.ken:active, a.ken:visited {
	width: 158px;
	height: 25px;
	color: #ffffff;
	text-decoration: none;
	background: transparent url(../images/ccemailbtn_Off.gif) top left no-repeat;
}

a.ken:hover {
	color: #838383;
	text-decoration: none;
	background: transparent url(../images/ccemailbtn_Over.gif) top left no-repeat;
}

a.email:link, a.email:active, a.email:visited {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent;
}

a.email:hover {
	color: #ffffff;
	text-decoration: underline;
	background-color: transparent;
	/*filter:alpha(opacity=90);
	-moz-opacity: 0.40;
	opacity: 0.40;*/
}

a.drive:link, a.drive:active, a.drive:visited {
	color: #666666;
	text-decoration: none;
	background-color: transparent;
}

a.drive:hover {
	color: #ffffff;
	text-decoration: underline;
	background-color: transparent;
	/*filter:alpha(opacity=90);
	-moz-opacity: 0.40;
	opacity: 0.40;*/
}

.floater { float: left; }
.clear { clear: both; }
.overbox:after {
    content: "."; 
    display: block;
    height: 0px;
    clear: both; 
    visibility: hidden;
}

.overbox {display: inline-table;}
/*.overbox {padding-top: 4px;}*/

/* Hides from IE-mac \*/
* html .overbox {height: 1%;}
.overbox {display: block;}
/* End hide from IE-mac */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
 
#Container { 
	margin: 0 left;
	width: 1003px;
	padding: 0;
	background: transparent url(../images/cccontainer.gif) top left repeat-y;
	text-align: left;
	/*border-right: 1px solid #ffffff;*/
}

#BrandID { 
	position: absolute;
	top: 25px;
	left: 22px;
}

#Content { position: absolute; top: 125px; left: 185px; }
	
.Accordion {
	/*border-left: solid 1px gray;
	border-right: solid 1px black;
	border-bottom: solid 1px gray;*/
	overflow: hidden;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0;
	padding: 0;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab {
	/*border-top: solid 1px black;*/
	width: 805px;
	height: 25px;
	border-bottom: solid 2px #0f0f0f;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	background-color: #202020;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 805px;
	height: 350px;
	background-color: #0f0f0f;
}

.PanelThumbs { width: 785px; padding: 30px 0 0 30px; float: none; overflow: hidden; }
.PanelThumb { width: 170px; height: 130px; padding: 0 22px 0 0; overflow: hidden; float: left; }
.PanelThumbRow { width: 785px; height: 130px; padding: 0 0 25px 0; float: left; overflow: hidden; }
.PanelBioRow { width: 170px; height: 130px; padding: 30px 0 30px 0; float: left; overflow: hidden; }

.Thumb { width: 170px; height: 103px; float: left; background: #1b1b1b; }
.ThumbDesc { 
	width: 158px; 
	height: 25px; 
	padding: 6px 0 0 12px; 
	float: left; 
	background: #1b1b1b;
	font: 10px/16px "Helvetica Neue", Arial, Verdana, sans-serif;
	color: #ffffff; 
	text-transform: uppercase;
}

.ThumbSoon { color: #666666 }

.BioLeftCopy { 
	width: 230px; 
	padding: 0 0 0 30px; 
	float: left;
	overflow: hidden;
}
.AboutTitle {
	width: 805px;
	height: 30px;
	padding: 0; 
	float: left;
	overflow: hidden;
}
.AboutText {
	font: 14px/32px "Helvetica Neue Light", Arial, Verdana, sans-serif;
	padding: 0 0 30px 0; 
	/*padding: 5px 0 5px 0;*/
	/*text-transform: uppercase;*/
	color: #ffffff;
}
.BioRightCopy { 
	width: 470px;
	padding: 38px 75px 0 0; 
	float: right;
	overflow: hidden;
}

.LeftEmailCopy { 
	width: 260px;
	height: 260px; 
	padding: 30px 0 0 30px; 
	float: left;
	overflow: hidden;
}
.RightEmailCopy { 
	width: 430px;
	padding: 30px 40px 0 35px; 
	float: right;
}
#RightMap { 
	width: 505px;
	height: 260px;
	padding: 30px 0 0 0; 
	float: right;
	background: url(../images/ccgooglemap.gif) 0 35px no-repeat;
}

#CCMapDir {
	width: 505px;
	height: 25px;
	overflow: hidden;
	z-index: 2;
	background: transparent #999999;
	_visibility: hidden;
}
#CCMap {
	width: 446px;
	height: 236px;
	overflow: hidden;
	border: 12px solid #1b1b1b;
	z-index: 1;
	_visibility: hidden;
	
}
.EmailText {
	padding: 10px 0 0 0;
	overflow: hidden;
}
.CopySpacer { padding: 0 0 15px 0; font: 12px/18px Arial, Verdana, sans-serif; }
.TabText { float: right; }

.BottomRule { float: left; width: 805px; height: 25px; padding: 35px 0 0 0; background-color: #0f0f0f;}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	background-color: #333333;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	background-color: #333333;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #333333;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
	background-color: #131313;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #131313;
}