/*
Author: Stephen Waudby - Cube Studio - cubestudio.com
Author URL: http://www.cubestudio.com.com/
Tags: 
*/


/*  FORMAT  */    
/*  FORMAT  */    
/*  FORMAT  */    

.offset { 
    position: absolute;
    left: -9999px;
    }
    
.clear {
    clear:both;
    }
    
img {
    border: 0;
    }
    
a { 
    text-decoration: none;
    }
    
body {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    background: #61475b url('images/carletonhousefabrics-background.jpg') repeat-x scroll 0 0;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
    }
    
#container {
    width:960px;
    margin:10px auto;
    text-align: left;
    }    
    
/*  HEADER  */    
/*  HEADER  */    
/*  HEADER  */    
#header {
    background-color: #FFFFFF;
    }
    
#header-image {
    padding: 11px 0;
    }


/*  NAVIGATION  */    
/*  NAVIGATION  */    
/*  NAVIGATION  */    

#nav {
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 14px;
    }
    
#nav ul {
    list-style: none;
    padding:0;
    margin: 0;
    }
    
#nav ul li {
    float: left;
    background-color: #372440;
    height:60px;
    width: 172px;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 10px;
    border-bottom: 9px solid #5D3461;
    position: relative;
    }
    
#nav ul li a {
    padding-top: 23px;
    padding-bottom: 23px;
    display: block;
    color: #ffffff;
    }
#nav ul li a:hover {
    padding-top: 23px;
    padding-bottom: 23px;
    display: block;
    color: #cc99cc;
    }

/* Sub Nav */
#nav ul ul a.drop,
#nav ul ul a.drop:visited {
    background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;
    }

#nav ul ul a.drop:hover{
    background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;
    }
#nav ul ul :hover > a.drop {
    background:#c9ba65 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;
    }

#nav ul ul {
    visibility: hidden;
    position: absolute;
    height: 0;
    top: 60px;
    left: 0;
    z-index: 100;
    }

#nav ul ul li {
    background-color: #5d3461;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    border-bottom: none;
    position: relative;
    }
    
#nav ul ul li a {
    padding: 10px 0;
    display: block;
    color: #ffffff;
    }
#nav ul ul li a:hover {
    padding: 10px 0;
    display: block;
    color: #cc99cc;
    }


/* make the second level visible when hover on first level list OR link */
#nav ul li:hover ul,
#nav ul a:hover ul{visibility:visible; }

/*  PAGE LAYOUT  */
/*  PAGE LAYOUT  */
/*  PAGE LAYOUT  */

    
.page-wrapper {
    margin:0;
    padding:0;
    overflow: hidden;
    background-color: #747474;
    }

.page-wrapper a{
    color:#5d3461;
    border-bottom:1px dotted;
    }
.page-wrapper a:hover{
    border-bottom:1px solid;
    color: #fff;
    }


    
.content-left {
    float: left;
    width: 580px;
    background-color: #372440;
    }    
    
.content-right {
    float: right;
    width: 350px;
    padding: 5px 10px;
    }
    
.content-right p {
    margin: 0 0 8px 0;
    padding: 0;
    }

div.navigation {
    padding: 10px;
    clear: both;
    }
    
div.navigation .alignleft { text-align: left; display: inline; padding: 0 20px; }
div.navigation .alignright { text-align: right; display: inline; padding: 0 20px; }
    
    
/*  PAGE LAYOUT - Locations  */    

.content-locations-left {
    float: left;
    width: 390px;
    background-color: #372440;
    }
    
.content-locations-right {
    float: right;
    width: 540px;
    padding: 5px 10px;
    }
    
.content-locations-right p {
    margin: 0 0 8px 0;
    padding: 0;
    }

    
/*  PAGE LAYOUT - Fabrics  */
/* image size 218x146 */

.content-fabrics {
    width: 940px;
    padding: 5px 10px;
    text-align: center;
    }
    
p.click-for-more {
    padding: 0;
    margin: 0 0 20px 0;
    }
    
.fabric-thumb {
    float: left;
    margin: 5.5px;
    }
    
.fabric-thumb img {
    display: block;
    border: 3px solid #fff;
    width: 218px;
    height: 146px;
    }
    
.fabric-thumb h4 {
    font-weight: normal;
    margin: 5px;
    clear: both;
    }
    
.fabric-thumb h4 a {
    color: #fff;
    border-bottom: 1px solid;
    }
    
    
/*  PAGE LAYOUT - Fabric Details  */
/* image size large - 563x375; small - 163x109 */


.content-top {
    width: 100%;
    padding: 10px 0 0 0;
    clear: both;
    }
    
.content-top h2.page-title {
    display: inline;
    margin: 0 0 0 590px;
    padding: 0;
    }

.content-left.details {
    float: left;
    width: 580px;
    text-align: right;
    padding: 10px 0;
    background: transparent;
    }
    
.content-left.details img{
    width: 563px;
    border: 3px solid #fff;
    }

.content-right.details {
    float: right;
    width: 360px;
    padding: 10px 10px;
    }

.content-right.details p {
    margin: 0;
    padding: 0;
    }

.content-right.details span.fabric-details-attr {
    color: #372440;
    font-weight: bold;
    }
    
.content-right.details .fabric-thumb {
    float: left;
    margin: 5.5px 5.5px 5.5px 0;
    text-align: center;
    }

.content-right.details .fabric-thumb img {
    width: 163px;
    height: 109px;
    border: 3px solid #fff;
    }
    
.content-right.details span.fabric-details-pattern,
.content-right.details span.fabric-details-color {
    font-weight: bold;
    }

/*  TEXT STYLING  */
/*  TEXT STYLING  */
/*  TEXT STYLING  */


h2.page-title {
    color: #FFFFFF;
    font-family: Georgia, Serif;
    font-size: 21px;
    font-weight: normal;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    }

.content-fabrics h2.page-title {
    padding-bottom: 0;
    }
    
/*  TEXT STYLING - Locations  */    

.locations-state-title,
.content-locations-right h3 {
    color: #FFFFFF;
    font-family: Georgia, Serif;
    font-size: 18px;
    font-weight: normal;
    text-decoration:underline;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    }    
    

.locations-company-name,
.content-locations-right h4 {
    color: #FFFFFF;
    font-weight:bold;
    margin: 0;
    padding: 0;
    }


#content {
    font-size: 13px;
    }    
    
.directions-link  a{
    color:#5d3461;
    border-bottom:1px dotted;
    }

.directions-link  a:hover{
    border-bottom:1px solid;
    color: #fff;
    }

/*  FOOTER  */
/*  FOOTER  */
/*  FOOTER  */
        
#footer {
    background: #372440 url(images/carletonhousefabrics-footer-background.jpg) no-repeat scroll 0 0;
    height: 135px;
    color: #FFFFFF;
    border-top: 2px solid #ceccb6;
    }

#footer a {
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom:1px dotted;
    }
    
#footer a:hover {
    border-bottom:1px solid;
    color: #cc99cc;
    }

#footer ul {
    list-style: none;
    padding:0;
    margin: 0;
    }
    
#footer ul li.footer-navigation {
    float: right;
    width: 500px;
    padding-top:10px;
    }
    
#footer ul li ul li {
    padding-left: 10px;
    padding-bottom:4px;
    }
    
#footer ul li ul li a {
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    }
    
    
#footer ul li.footer-right {
    background-color: #5d3461;
    float: right;
    width: 340px;
    height: 125px;
    overflow: hidden;
    padding: 5px 20px;
    }
    
.footer-contact-text {
    font-size: 12px;
    }

#credits {
    width: 100%;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: right;
    margin-top: 10px;
    }

#credits a{
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dotted;
    }
    
#credits  a:hover {
    border-bottom: 1px solid;
    color: #cc99cc;
    }
