/* 
Description: Components (buttons, forms, tables etc) stylesheet for Dead Letter Circus main site
Author: James Diacono (jd@thefarmdigital.com.au)
Date created: 12th of January, 2010
*/

/*
Buttons
*/

/* .button is a generic horizontally scalable button with cufon image
   replacement.  
   HTML:  <a class="button"><span>Text</span></a> */
.button,
ul.buttons>li>a {
    text-transform:uppercase;
    text-decoration:none;
    font-size:17px;
    color:White;
    display:block;
    background:url(/Images/Components/button_left_sprite.png) no-repeat;
    float:left;
    margin-right:18px;
    }
    
.button span,
ul.buttons>li>a>span {
    display:block;
    height:22px;
    padding:5px 17px 0 18px;
    margin-right:-18px;
    cursor:pointer;
    background:url(/Images/Components/button_right_sprite.png) no-repeat right top;
    }
    
.button:hover,
ul.buttons>li>a:hover {background-position:left -54px;}
.button:hover span,
ul.buttons>li>a:hover span {background-position:right -54px;}

.button.active,
ul.buttons>li>a.active {background-position:left -27px;}
.button.active span,
ul.buttons>li>a.active span {background-position:right -27px;}
    
.button.arrow,
ul.buttons.arrows>li>a,
.button.plus {
    margin-right:29px;
    }
    
.button.arrow span,
ul.buttons.arrows>li>a span,
.button.plus span,
.button.close span {
    margin-right:-29px;
    padding-right:37px;
    background-image:url(/Images/Components/button_right_sprite_arrow.png);
    }
    
.button.plus span {
    background-image:url(/Images/Components/button_right_sprite_plus.png);
    }
    
.button.close span {
    background-image:url(/Images/Components/button_right_sprite_cross.png);
    }
  
.button.slim {
    font-size:14px;
    margin-right:29px;
    background-image:url(/Images/Components/button_dropdown_left_sprite.png);
    }
    
.button.slim span {
    height:18px;
    margin-right:-28px;
    padding-right:37px;
    background-image:url(/Images/Components/button_dropdown_right_sprite.png);
    }
    
.button.slim:hover {background-position:left -24px; color:black;}
.button.slim:hover span {background-position:right -24px;}

/* cufon image replacement fix for IE7 */
.button cufoncanvas,
ul.buttons>li>a>span>cufon>cufoncanvas {
    *top:-2px !important;
    }
    
/*
Dropdown menu (not functional without modification - serves as a framework only)
*/
.dropdownMenu>li {
    float:left;
    position:relative;
    }
    
.dropdownMenu>li>ul {
    position:absolute;
    left:0;
    top:1em;
    display:none;
    }
    
.dropdownMenu>li>ul:hover,
.dropdownMenu>li:hover>ul {
    display:block;
    }
    
.dropdownMenu>li>ul>li {
    display:block;
    }

/* Functional graphic version of dropdown - has a description and then a link

    HTML:	
    <ul id="otherSites" class="dropdownMenu graphic">
        <li>
            <a class="button plus" id="visitOurOtherSites"><span>Visit our other sites</span></a>
            <ul>
                <li class="myspace">
                    <a href="#">
                        <span class="description">For latest news and tour dates</span> 
                        <span class="link">Go to our Myspace page</span> 
                    </a>
                </li>
                <li class="facebook">
                    <a href="#">
                        <span class="description">To discuss all that is DLC</span>
                        <span class="link">Go to our Facebook page</span> 
                    </a>
                </li>
                <li class="youtube">
                    <a href="#">
                        <span class="description">For music videos, interviews and more</span>
                        <span class="link">Go to our Youtube page</span> 
                   </a>
                </li>
            </ul>
        </li>
    </ul>
     */
.dropdownMenu.graphic,
.dropdownMenu.graphic ul {
    padding-left:0 !important;
    }
    
.dropdownMenu.graphic li {
    list-style:none !important;
    }
    
.dropdownMenu.graphic>li>ul {
    top:27px;
    right:0;
    z-index:15;
    }
    
.dropdownMenu.graphic>li>a.button.slim+ul {
    top:24px;
    }

.dropdownMenu.graphic>li>ul>li {
    width:246px;
    height:44px;
    padding-top:3px;
    background:url(/Images/Components/button_fat.png) no-repeat left top;
    position:relative;
    margin-bottom:-3px !important;
    }

.dropdownMenu.graphic>li>ul>li:hover {
    background-position:right top;
    }

.dropdownMenu.graphic>li>ul>li>a>span.description {
    display:block;
    height:33px;
    padding-top:3px;
    margin:0 0 0 12px;
    background-repeat:no-repeat;
    color:White;
    font-size:13px;
    }

.dropdownMenu.graphic>li>ul>li>a>span.link {
    color:#ac484d;
    text-transform:uppercase;
    text-decoration:none;
    font-size:13px;
    position:absolute;
    top:22px;
    left:12px;
    padding-right:18px;
    padding-top:1px;
    background:url(/Images/Components/arrow_red_on_white.png) no-repeat right center;
    }
    
/*
Sections
*/

/* horizontal thin section for login inputs etc */
.bar {
    display:block;
    height:27px;
    float:left;
    margin-right:20px;
    background:url(/Images/Components/bar_left.png) no-repeat;
    font-size:0.9em;
    }
    
.bar>span {
    display:block;
    height:20px;
    padding:7px 18px 0 18px;
    margin-right:-18px;
    background:url(/Images/Components/bar_right.png) no-repeat right top;
    }
    
.bar>span>* {
    float:left;
    margin-right:4px;
    }

/*
Images
*/

#content img {
    margin-bottom:1.3em;
    }

/*
Lists
*/

/* plain lists */
#content ul,
#content ol {
    margin-bottom:1.3em;
    list-style-position:outside;
    padding-left:3em;
    }

#content ul {
    list-style-type:disc;
    }
    
#content ol {
    list-style-type:decimal;
    }
    
#content li,
#content li {
    margin:0 0 0.4em 0;
    }

/* the repeating item style */
ul.entries {
    margin:0;
    margin-bottom:1.3em !important;
    list-style:none !important;
    padding:0 !important;
    }

ul.entries>li {
    border-top:1px solid #333;
    padding-top:1.4em;
    padding-bottom:1.6em;
    margin:0;
    }

ul.entries>li>:last-child {
    margin-bottom:0;
    }

/* .products and .news inherit from .entries - a repeater style */
.products .coverArt {
    float:left;
    margin-left:8px;
    }

.products img 
{
    display:block;
    float:left;    
}
    
.products .details {
    float:left;
    margin-left:1.5em;
    width: 370px;
    }
    
#mainColumn .products .details p {
    margin-right: 0;
}

.news>li:first-child {
    padding-top:0;
    border-top:none;
    }
    
.news a {
    text-decoration: none;
}
    
.news .navigation {
    height:1.5em;
    }
    
.news .navigation .newer {
    float:right;
    }
    
.news .navigation .older {
    float:left;
    }
    
/* bookmarkAndShare doesn't need to be in a list - just a container.bookmarkAndShare, 
    a wrapper.facebook (or whatever) and an <a> */
.bookmarkAndShare {
    padding-left:0 !important;
    }

.bookmarkAndShare>li {
    margin:0 0 0.3em 0 !important;
    list-style:none !important;
    }

.bookmarkAndShare a {
    display:block;
    min-height:16px;
    padding-left:20px;
    font-size:1.2em;
    padding-top:0.1em;
    color:White;
    text-decoration:none;
    background-repeat:no-repeat;
    }
    
.bookmarkAndShare .shareThis a {background-image:url(/Images/Components/tile_shareThis_xsmall.png);}
.bookmarkAndShare .facebook a {background-image:url(/Images/Components/tile_facebook_xsmall.png);}
    
    
/* definition lists for contacts/forms etc */
dt {
    margin-bottom:-1em;
    min-height:1em;
    }
    
dd {
    margin-left:9em;
    margin-bottom:1.7em;
    font-size:1.1em;
    }
    
dl.details dt {
    font-weight:bold;
    }
    
dl.details dd {
    color:White;
    margin-left:6em;
    }
    
/*
Forms
*/

input {
    width:9.7em;
    padding:0 0.1em;
    border-width:0.1em;
    }

select {
    width:10em;
    }

input.small {
    border:0;
    color:White;
    background-color:#484848;
    font-size:11px;
    padding:0 0.3em;
    width:7em;
    height:13px;
    overflow:hidden;
    }
    
dd input,
dd select {
    margin-top:-0.3em;
    }
    
/*
Horizontal rules (it's way better than vertical!)
*/

/* 1 pixel non-clearing hr */
hr {
    border-width:0;
    border-style:none;
    border-top:1px solid #333;
    background:transparent;
    color:black;
    margin-bottom:2em;
    }
    
hr.clear {
    clear:both;
    }
    
/*
Embedded objects
*/

/* bottom margin for embedded objects */
#content embed {
    margin-bottom:1em;
    }

/* same thing for IE */
#content object + * {
    margin-top:1em;
    }
    
/*
Tables
*/

/* regular content table */
#content table {
    margin-bottom:1.3em;
    border-collapse:collapse;
    }
    
#content table caption {
    font-style:italic;
    font-weight:bold;
    text-align:left;
    margin-bottom:0.3em;
    color:White;
    }
    
#content table .highlighted {
    color:#bbb;
    font-weight:bold;
    background-color:#444;
    }
    
#content table td {
    background-color:#333;
    }
    
#content table td,
#content table th {
    padding:0.4em 0.9em;
    border:1px solid black;
    }
    
#content table th {
    background:#777;
    color:black;
    }
    
#content table.fullWidth {
    width:508px;
    }

#content .pass {
    background: url('/images/components/bar_pass.png');
    width: 327px;
    height: 418px;
    margin: -40px 0 0 40px;
}


.videoFlow {
    width: 100%;
    height: 330px;
}