/**
 *   File containining Article Stylesheet
 */

/** Importing of LESS styles from library **/
@import "lib";

/* Start body id wrap */
#article {

#main {
    z-index:11;
}

#article-container {

    float:left;
    width:635px;
    margin-left:10px;

    #article-image {
        position:relative;

        img {
                .rounded(10px);
        }
        #article-image-desc {
            width:380px;
            height:62px;
            background-color:#000;
            position:absolute;
            z-index:13;
            bottom:15px;
            color:#fff;
            font-size:25px;
            padding:5px 0 5px 10px;
            text-transform:uppercase;
        }
    }

    #article-body {
        width:635px;
        position:relative;

        #article-date {
            margin-top:15px;
            font-weight:bold;
        }
        #article-author {
            font-weight:bold;
            color:#173757;
            margin-top:5px;
        }

        #article-buttons {
            width:400px;
            position:absolute;
            height:40px;
            right:0px;

            .article-button {
                    background:#dbdbdb url("/images/layout/grey-bg.png") center;
                    .rounded(4px);
                    padding:4px;
                    float:right;
                    margin-left:10px;
                    border:1px #b5b5b5 solid;
                    cursor:pointer;

                    b {
                        display:block;
                        float:left;
                        margin-right:5px;
                        background-image:url("/images/article/article-button-sprite.png");

                        &.thumb { background-position:top left; width:13px; height:15px; }
                        &.print { background-position:-13px -3px; width:16px; height:12px; }
                        &.share { background-position:-29px -3px; width:10px; height:12px; }
                        &.email { background-position:-39px -3px; width:15px; height:13px; }

                    }

                    &:hover { border-color:#000; }
            }

        }

        #article-text {
            margin-top:25px;
            overflow:auto;
            color:#343434;
            padding-bottom:10px;
            border-bottom:1px #c2c2c2 solid;

            > p {
                font-weight:bold;
                color:#173757;
            }
            h2 {
                font-weight:bold;
                text-transform:uppercase;
                margin-top:20px;
            }
            .column {
                width:307px;
                float:left;
                overflow:auto;
                &.first { margin-right:20px; }

                p {
                    margin-top:15px;
                }
            }

            .photo {
                font-style:italic;
/*              width:286px;*/
            }
            .photo-quote {
                clear:both;
                overflow:auto;
                padding-top:50px;

                blockquote {
                    width:286px;
                    overflow:visible;
                    float:left;
                    border-top:2px solid #c2c2c2;
                    border-bottom:2px solid #c2c2c2;
                    padding:15px 0;
                    color:#32679c;
                    font-size:24px;
                    text-transform:uppercase;
                }

            }

            p.bold-caps {
                margin-top:0;
                text-transform:uppercase;
                font-weight:bold;
            }

            .photo-text {
                    clear:both;
                    overflow:auto;
                    padding-top:50px;
            }
        }

    }

}

#article-sidebar {
    width:305px;
    float:right;
    margin-right:10px;

    h2 {
        font-size:30px;
        color:#32679c;
        text-transform:uppercase;
    }

    hr {
        background-color:#c2c2c2;
        border:0;
        margin:5px 0 10px 0
    }

    ul {
        list-style-type:none;
    }

    li {
        display:block;
        height:88px;
        padding:10px 0px;
        border-bottom:1px solid #c2c2c2;
        overflow:auto;
        position:relative;
        cursor:pointer;

        &:hover {
            .button {
                background-position:top right;
            }
        }

        img {
            float:left;
            height:88px;
        }
        h4, p {
            margin-left:10px;
            width:110px;
            float:left;
        }
        h4 {
            text-transform:uppercase;
        }
        p {
            font-size:11px;
        }
        .button {
            display:block;
            position:absolute;
            right:0px;
            top:50%;
            margin-top:-14px;

            width:29px;
            height:28px;
            background-image:url(/images/layout/arrow-buttons-yellow.png);
        }

    }

    #newsletter {
        width:285px;
        height:203px;
        margin-top:40px;
        background-image:url(/images/article/newsletter-box.jpg);
        padding:10px;

        h3 {
            font-size:30px;
            color:#fff;
            text-transform:uppercase;
        }
        h4 {
            padding-top:2px;
            font-size:14px;
            text-transform:uppercase;
        }
        p {
            padding-top:5px;
            font-size:11px;
            font-weight:bold;
        }
        input {
            margin-top:67px;
            width:280px;
            border:1px #a36b32 solid;
            padding:2px;
            text-transform:uppercase;
        }
        .blue-button {
            width:275px;
            text-align:center;
            margin-top:5px;
        }
    }
}


/* End body id wrap */
}