/*
 *********************************************
 *             Layout.css                    *
 * 											 *
 *		  IE6 Fixes: see ie6-Layout.css      *
 *		  IE7 Fixes: see ie7-Layout.css      *
 * 											 *
 *********************************************
 */

/* Base Grid
-------------------------------------------------------------- */

#page {
	margin: 0 auto;
	height: 100%;
	padding: 0;
	width: 940px;
	overflow: hidden;
	position: relative;
}
a.facebook {
  position: absolute; 
  top: 0; right: 0;
  background: url(/css/images/facebook.png);
  display: block;
  height: 44px;
  width: 130px;
  margin: 0;
  padding: 0;
  }
a.briandettor {
  background: url(/css/images/photo-by.png);
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 23px;
  width: 300px;
  }

#head {
	padding-top: 102px;
	margin-bottom: 0px;
	overflow: hidden;
	
}
#body {
	overflow: hidden;
	margin-top: 75px;
}	

#rightCol {
	float: right;
	padding-top: 65px;
	width: 193px;
}
#foot {
	background: transparent url(images/foot-back.png) left bottom repeat-x;
}

.leftCol {
	float: left;
	position: relative;
	width: 370px;
}

.leftCol img {
	display: block;
	margin: 0 auto;	
}
.main {
	float: right;
	margin: 0 0 1em 0;
	width: 390px;
}

.main p {
	
	line-height: 1.5;
	text-align: center;	
}

.about-main {
	background: transparent url(images/content-border.png) no-repeat;	
	height: 460px;
	padding: 29px 72px 29px 39px;
}

.contact-main {
	background: transparent url(images/contact-border.png) no-repeat;	
	height: 372px;
	margin-top: 35px;
	padding: 29px 62px 29px 39px;
	width: 382px;
}

.collections-main {
	width: 100%;	
}
.homepage-main {
	width: 960px;
	height: 498px;
}

.splash {
	margin: 0 auto;
	text-align: center;	
	width: 885px;
	height: 498px;
	overflow: hidden;
}

.splash img {
	display: block;
}

/* Head
-------------------------------------------------------------- */

#logo {
	float: left;
	margin: 0;
	padding: 0;
	width: 260px;
}
#logo h1 {
	margin: 0;
	padding: 0;
}
#logo h1 a {
	background: transparent url(images/logo.png) no-repeat;
	border: none;
	display: block;
	height: 181px;
	outline: none;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 253px;
}
#logo h1 a img {
	margin: 0;
	padding: 0;
}


/* Navigation
-------------------------------------------------------------- */

#main_menu { float: left; margin: 65px 0 30px 55px; }
#main_menu ul { list-style-type: none; padding: 0; margin: 0; }
#main_menu ul li { float: left; list-style: none; padding: 0; margin: 0; }
#main_menu ul li ul { display: none; position: absolute; margin-top: 0; list-style-type: none; }
#main_menu ul li ul li { float: none; list-style: none; }
#main_menu a { display: block; }

/* Top level items */
#store_link { background: url(/images/menu/nav-home.gif); width: 108px; height: 81px; }
#store_link.current { background: url(/images/menu/nav-home-over.gif); }
#about_link { background: url(/images/menu/nav-about.gif); width: 125px; height: 81px; }
#about_link.current { background: url(/images/menu/nav-about-over.gif); }
#collections_link { background: url(/images/menu/nav-collections.gif); width: 190px; height: 81px; }
#collections_link.current { background: url(/images/menu/nav-collections-over.gif); }
#company_info_link { background: url(/images/menu/nav-info.gif); width: 190px; height: 81px; }
#company_info_link.current { background: url(/images/menu/nav-info-over.gif); }

/* Second-level items */
#spring2010_link { background: url(/images/menu/nav-spring2010.gif); width: 190px; height: 28px; }
#spring2010_link:hover { background: url(/images/menu/nav-spring2010-over.gif); }
#contact_link { background: url(/images/menu/nav-contact.gif); width: 198px; height: 28px; }
#contact_link:hover { background: url(/images/menu/nav-contact-over.gif); }
#buzz_link { background: url(/images/menu/nav-thebuzz.gif); width: 198px; height: 28px; }
#buzz_link:hover { background: url(/images/menu/nav-thebuzz-over.gif); }
#where_to_buy_link { background: url(/images/menu/nav-wheretobuy.gif); width: 198px; height: 28px; }
#where_to_buy_link:hover { background: url(/images/menu/nav-wheretobuy-over.gif); }


/* left
-------------------------------------------------------------- */



/* Main
-------------------------------------------------------------- */

/* right
-------------------------------------------------------------- */

/* Footer
-------------------------------------------------------------- */

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {
	height: 100%;
}
body > #wrap {
	height: auto;
	min-height: 100%;
}
#page {
	padding-bottom: 152px;
}  /* must be same height as the footer */
#foot {
	position: relative;
	margin-top: -152px; /* negative value of footer height */
	height: 152px;
	clear:both;
}
/* CLEAR FIX*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */




/* Buttons
-------------------------------------------------------------- */

/* Forms
-------------------------------------------------------------- */

form.cssform {
	margin: 0 auto;
	padding: 0;
	width: 350px;
}
.cssform p {
	margin: 0 0 .8em;
	padding: 0;
	height: 1%;
	vertical-align: middle;
	clear: both;
}
.cssform label {
	display: block;
	/*font-weight: bold;*/
	margin: 0 0 .2em;
	padding: 0;
}
.cssform label span {
	color: red;
	padding: 0 4px;
}
.cssform textarea {
	background-color: #f0f0f0;
	border: 0px solid #ccc;
	height: 100px;
	padding: 2px;
	width: 100%;
}
.cssform textarea:focus, .cssform input:focus {
	background-color: #FFFFCC;
}
.cssform input {
	background-color: #f0f0f0;
	border: 0px solid #ccc;
	color: #442921;
	display: block;
	font-size: 108%;
	padding: 2px;
	width: 100%;
}

.cssform .text {
	padding: .2em;
}	
.cssform .phone {
	width: 50%;
}
.cssform input[type="text"]:focus {
	background-color: #FFFFCC;
}
.cssform select {
	margin:.4em 0 0;
}
.cssform .checkbox {
	background-color: #f0f0f0;
	margin: .6em 0 0;
	width: 20px;
}
.cssform .inline {
	display: inline;
}
.cssform .in-wrap {
	padding: 0 0 .3em;
}
.cssform .adp {
	width: 25px;
}
.cssform .submit {
	background: transparent url(images/submit.png) no-repeat;
	border: 0 none;
	cursor: pointer;
	display: block;
	padding: .05em;
	margin: 0 auto;
	height: 28px;
	text-indent: -9999px;
	width: 87px;
}
.cssform .formcol {
	float: left;
	width: 46%;
	margin-right: 20px;
	overflow: hidden;
}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}



.jcarousel-skin-tango .jcarousel-container {
   /* -moz-border-radius: 10px;*/
    background: transparent url(images/c-back.png) no-repeat;
   /* border: 1px solid #346F97;*/
}
 jcarousel-skin-tango{ }
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 767px;
	height: 340px;
    padding: 42px 96px 0;
	margin: 0 auto;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  760px;
    height: 296px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
	border: 2px solid #887d75;
    width: 214px;
    height: 286px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 50px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 163px;
    right: 14px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background: transparent url(images/next-horizontal2.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -45px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -90px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -135px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 163px;
    left: 5px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background: transparent url(images/prev-horizontal2.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -45px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -90px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -135px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(images/next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(images/prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}