/* 
Description: Reusable components stylesheet for Emjoi Microsite
Author: James Diacono (jd@thefarmdigital.com.au)
Date created: 19th of January, 2010
*/

/*
Content
*/

/* Use a wrapping .plainContent box to add side margins
    This is so content can be inserted to be flush with the sides */
#bodyInner .plainContent {
    margin: 0 40px;
    padding: 1px 250px 1px 0; /* to stop margin collapsing messing up the shadows */
}

/*
Lists
*/

.plainContent ul, .plainContent ol {
    list-style: disc url(/Content/Images/Components/bullet_grey-circle.png) outside;
    padding-left: 18px;
    margin-bottom: 1.5em;
}

.plainContent ul li, .plainContent ol li {
    margin-bottom: 0.4em;
}

.plainContent ol {
    list-style: decimal none outside;
    padding-left: 22px;
}

dl dt {
    margin-top: 1.4em;
    margin-bottom: 0.4em;
    padding:0 0 0.6em;
}

dl dd {
    margin-bottom: 0.8em;
}

dl dt,
dl.faq dd .answer {
    font-size: 1.2em;
    font-weight: bold;
}

dl.faq dt,
dl.faq dd {
    margin-left:22px;
}

dl.faq dt .question,
dl.faq dd .answer {
    display:inline-block;
    margin-left:-18px;
}

dl.faq dd .answer {
    vertical-align:top;
}

/*
Tables
*/

.plainContent table {
    margin-bottom: 1.3em;
}

.plainContent td {
    border: 1px solid #ccc;
    padding: 1.6em 1.8em;
}

.plainContent td.divideBy2 {
    width:50%;
}

.plainContent td > :first-child {
    margin-top: 0 !important;
}

.plainContent td > :last-child {
    margin-bottom: 0 !important;
}

/*
Various
*/

/* Little 11px x 11px arrow which changes colour with the theme - must be on white */
.arrow {
    display: inline-block;
    width: 11px;
    height: 11px;
    background: #aaa url(/Content/Images/Components/arrow.png) no-repeat;
    overflow: hidden;
    vertical-align: middle;
}

/* Product detail standards */
.productDetails {
    margin-bottom:0.3em;
    }

.productDetails .name {
    font-size:1.6em;
    font-weight:bold;
    margin-bottom:0.2em;
    }

.productDetails .code {
    font-size:1.1em;
    margin-bottom:0.3em;
    display:block;
    }

.productDetails .price {
    font-size:1.2em;
    font-weight:bold;
    display:block;
    margin-bottom:1em;
    }

.productDetails .price .rrp {
    font-size:0.9em;
    }

.productDetails .blurb {
    color:#666;
    margin-bottom:1em;
    }
    
/* Product list */

ul.productsList {
    width:970px;
    height:400px;
    background:url(/Content/Images/Components/gradient_product-list.png) repeat-x 0 120px;
    clear:both;
    }

ul.productsList li {
    float:left;
    width:192px;
    padding-left:30px;
    padding-right:20px;
    margin-bottom:20px;
    }

ul.productsList li .content {
    padding-top:170px;
    position:relative;
    }

ul.productsList li .content .name {
    font-size:1.3em;
    width:8em;
    }

ul.productsList li .content .code {
    font-size:1.1em;
    }

ul.productsList li .content img {
    position:absolute;
    top:0;
    left:40px;
    }

/* Document links */

a.document, .documents a {
    display: inline-block;
    line-height: 18px;
    background: url(/Content/Images/Components/bullet_download.png) no-repeat;
    padding-left: 23px;
    text-decoration: none;
}

a.document span, .documents a span {
    display: inline-block;
    background: url(/Content/Images/Components/arrow_grey.png) no-repeat right center;
    padding-right: 19px;
    cursor: pointer;
}

ul.documents {
    list-style: none none;
    padding-left: 0;
}

/* Fancy coloured link with arrow */
#body a.fancy {
    position: relative;
    padding-right: 15px;
}

#body a.fancy .arrow {
    display: block;
    position: absolute;
    top: 2px;
    right: 0;
}

#body a.fancy .arrow:last-child {
    top: 3px; /* correction for fix for IE6/IE7 */
}


/* Misc classes */
.wai {
    visibility: hidden;
}