/*
    Document   : southhampton
    Created on : Oct 2, 2013, 11:25:19 AM
    Author     : rgriffo
    Description: Southhampton Project
*/
/* Page 1 */
body {
    margin : 0;
    padding: 0;
}

time {
    font-style : italic;
    color      : #666;
    display    : block;
    line-height: 1.4em;
}

.intro {
    padding                : 0;
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
    width                  : 100%;
    z-index                : 3000;
    position               : relative;
    overflow               : hidden;
}

.introCont {
    position: relative;
    width   : 100%;
}

.intro img {
    width  : 100%;
    z-index: 2;
}

#intro {
    width      : 940px;
    height     : 500px;
    position   : relative;
    margin     : 0 auto;
    padding-top: 240px;
}

#intro img {
    width : auto;
    float : left;
    margin: 12px 20px 0 0;
}

#header strong,
.intro h1,
.intro p {
    z-index: 10;
}

#article h1,
#gallery h1,
#header strong,
.bio strong,
.bioRow .intName,
.cmtHeader h1,
.intro h1,
.intro p,
.phoneTitle,
.sh h3 {
    color      : #FFFFFF;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow: 0 0 0.1em #000000;
}

.intro h1,
.sh h3 {
    float         : left;
    font-size     : 120px;
    letter-spacing: -0.03em;
    line-height   : 0.9;
    margin        : 25px 0 0;
    width         : 550px;
}

.intro p {
    color      : #FFFF82;
    float      : left;
    font-family: 'Pontano Sans', sans-serif;
    font-size  : 39px;
    font-weight: 300;
    line-height: 1.1em;
    margin     : 8px 0 0;
    width      : 635px;
}

.intro em {
    color      : #FFFFFF;
    display    : block;
    float      : left;
    font-family: helvetica, sans-serif;
    font-size  : 12px;
    font-style : normal;
    margin     : 3px 0 0 5px;
    text-shadow: 0 0 0.1em #000000;
}

.intro .logo {
    left    : 92px;
    position: absolute;
    top     : 37px;
}

.autoPlay {
    bottom     : 230px;
    color      : #FFFFFF;
    font-style : normal;
    left       : 21px;
    position   : absolute;
    text-shadow: 0 0 0.1em #000000;
    width      : 326px;
}

.intro a {
    color      : #8FCFFF;
    text-shadow: 0 0 0.1em #000000;
}

.intro a:focus,
.intro a:hover {
    text-decoration: none;
    color          : #8FCFFF;
}

.intro a:active {
    color          : #8FCFFF;
    text-decoration: none;
}

.nicescroll-rails {
    z-index: 900000 !important;
}

.n12 a {
    color: #95ADC3;
}

.fancybox-lock .fancybox-overlay {
    z-index: 9000;
}

.autoPlay img {
    height: 40px;
    width : 40px;
}

.autoPlay i {
    display   : block;
    font-style: normal;
    margin    : -42px 0 0 55px;
}

.story .creditCont {
    margin-top: 0;
}
/* Header */
#header {
    opacity: 0;
}
/* Right Rail Items */
.adCont {
    float       : right;
    margin-right: -135%;
    margin-top  : 5.2%;
    padding     : 0 0 10px 40px;
    width       : 158.8%;
}

.story .content .n12In img {
    border: 0 none;
}

.content a {
    color : #95ADC3;
    cursor: pointer;
}
/* Article */
.story {
    background: #FFFFFF;
    overflow  : hidden;
    padding   : 4px 0 0;
    z-index   : 7;
}

.story .content {
    float      : left;
    font-size  : 16px;
    line-height: 1.9em;
    margin     : 16px 0 0 21%;
    width      : 54%;
}

.story .content li,
.story .content p {
    margin     : 0 0 20px;
    line-height: 1.9em;
}

.story .content img {
    border: 1px solid #95ADC3;
}

.photoContainer {
    float       : right;
    margin-right: -88%;
    padding     : 0 0 3px 40px;
    width       : 137%;
}

.photoContainer.vert {
    width       : 100%;
    margin-right: -67%;
}

.photoContainer.vert em {
    width: 360px;
}

.photoContainer em {
    display    : block;
    font-size  : 12px;
    font-style : normal;
    line-height: 1.8em;
    width      : 570px;
    padding    : 3px 0 0;
}

.divider {
    display   : block;
    margin    : 10px 0 30px;
    text-align: center;
}

.story .divider img {
    border: 0 none;
}

.grad {
    background: url("img/bg-gradient.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom    : 0;
    height    : 746px;
    position  : absolute;
    right     : 0;
    width     : 100%;
}

.adCont.two {
    margin-top: -17%;
}

.adCont p {
    font-size: 12px;
}
/* Comments */
#comments {
    width  : 58%;
    margin : 0 auto;
    padding: 0 0 20px;
}

.cmtHeader {
    border-bottom: 1px solid #95ADC3;
    margin       : 0 0 30px;
    padding      : 0 0 20px;
}

.cmtHeader span {
    background: url("img/sh-sprite.png") no-repeat scroll 0 -70px rgba(0, 0, 0, 0);
    display   : block;
    float     : right;
    height    : 50px;
    width     : 36px;
}

.credits {
    width : 41%;
    margin: 20px 0 0;
}
/* Doc Cloud */
.radical-annotation {
    width   : 700px;
    position: absolute;
}

.annotation-more-txt {
    margin-top: -8px;
    font-style: italic;
    color     : #aaa;
}

.annotation-link,
a.annotation-link,
a.annotation-link:hover {
    background     : none repeat scroll 0 0 #F6F7F9;
    border-radius  : 4px 4px 4px 4px;
    color          : #333333;
    cursor         : pointer;
    padding        : 0 9px 1px 4px;
    text-decoration: none !important;
    display        : inline-block;
    line-height    : 1.4em;
}

.annotation-link-visible,
a.annotation-link-visible {
    text-decoration: none;
}

.annotation-link-visible:hover,
a.annotation-link-visible:hover {
    border-color   : #065F87;
    text-decoration: none;
    cursor         : pointer;
}

.annotation-up-arrow {
    position        : absolute;
    top             : 0;
    left            : 350px;
    width           : 2px;
    /* Width of the arrow. */
    height          : 6px;
    /* Height of the arrow (also requires tweak below!) */
    background-color: #0088cc;
    /* Color of the arrow. */
}

.annotation-close {
    /* Close box controls */
    position       : absolute;
    background     : url("img/close.png");
    height         : 46px;
    width          : 46px;
    top            : -8px;
    right          : -13px;
    color          : #555;
    font-family    : arial;
    font-weight    : bold;
    font-size      : 15px;
    text-decoration: none;
    cursor         : pointer;
}

.radical-annotation .DC-note {
    margin-top      : 6px !important;
    /* If you change the height of the arrow, change this to match. */
    border          : 2px solid #95ADC3 !important;
    /* This controls the border around the annotation itself. */
    background-color: white;
}

.radical-annotation {
    z-index : 3200;
    position: absolute;
}

.annotation-close a {
    position       : absolute;
    top            : 16px;
    right          : 13px;
    color          : #555;
    font-family    : arial;
    font-weight    : bold;
    font-size      : 15px;
    text-decoration: none;
}

section .annotation-link span {
    background: url("img/sh-sprite.png") no-repeat scroll 0 -147px;
    border    : 0 none;
    margin    : 0 0 0 -6px;
    padding   : 0 0 0 28px;
}
/* Section Jump */
.story .fullInt img {
    border: 0 none;
    margin: -3px 0 0;
}

.content .jumpBtn {
    background   : none repeat scroll 0 0 #95ADC3;
    border-radius: 4px;
    color        : #FFFFFF;
    display      : block;
    font-family  : 'Roboto Condensed', sans-serif;
    font-size    : 20px;
    height       : 56px;
    line-height  : 1em;
    margin       : 0 0 10px;
    padding      : 20px 40px 0 89px;
    position     : relative;
    width        : 160px;
}

.content .jumpBtn:hover {
    text-decoration: none;
    background     : #b3cce4;
}

.content .jumpBtn span {
    background   : none repeat scroll 0 0 #8196A9;
    border-radius: 4px 0 0 4px;
    float        : left;
    height       : 76px;
    left         : 0;
    position     : absolute;
    top          : 0;
    width        : 72px;
}

.content .jumpBtn img {
    border: 0 none;
    margin: 22px 0 0 17px;
}

.content .jumpBtn em {
    background: url("img/arrow.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display   : block;
    height    : 27px;
    left      : 70px;
    position  : absolute;
    top       : 26px;
    width     : 13px;
}

.content .btnCont {
    float       : right;
    margin-right: -88%;
    padding     : 0 0 10px 100px;
    width       : 111%;
}

.content strong {
    color         : #000;
    font-family   : 'Roboto Condensed', sans-serif;
    font-size     : 28px;
    margin        : 60px 0 20px;
    display       : block;
    letter-spacing: -0.02em;
}

.bullets {
    margin    : 17px 0 0;
    list-style: none;
}

.bullets li {
    padding-left       : 35px;
    padding-top        : 3px;
    background-image   : url("img/bullet.png");
    background-repeat  : no-repeat;
    background-position: 0 0.5em;
}

.sectionJump {
    width        : 240px;
    height       : 240px;
    font-family  : 'Roboto Condensed', sans-serif;
    position     : relative;
    background   : #EEE;
    display      : block;
    float        : left;
    margin-right : 10px;
    margin-bottom: 10px;
}

.sectionJump:hover {
    box-shadow        : inset 0 0 85px rgba(0, 0, 0, .5);
    -webkit-box-shadow: inset 0 0 85px rgba(0, 0, 0, .5);
    -moz-box-shadow   : inset 0 0 85px rgba(0, 0, 0, .5);
}

.sectionJump span {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.48);
    bottom    : 0;
    color     : #FFFFFF;
    display   : block;
    font-size : 20px;
    height    : 41px;
    padding   : 10px 0 0;
    position  : absolute;
    width     : 100%;
}

.sectionJump.beaten {
    background: url("img/beatenbg.png");
}

.sectionJump.always {
    background: url("img/alwaysrightbg.png");
}

.sectionJump.unjustified {
    background: url("img/justifiedbg.png");
}

.sectionJump.south {
    background: url("img/southamptonbg.png");
}

.sectionJump em {
    background: url("img/thinarrow.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height    : 24px;
    position  : absolute;
    right     : 12px;
    top       : 14px;
    width     : 14px;
}

.sectionJump i {
    display   : block;
    font-style: normal;
    padding   : 4px 0 0 13px;
}

.other {
    float : left;
    margin: 0 0 20px;
}

.sections {
    clear  : both;
    display: block;
    margin : 0 0 0 21%;
}

.creditBox {
    background : none repeat scroll 0 0 #F9F9F9;
    color      : #000000;
    font-size  : 12px;
    height     : 264px;
    line-height: 1.5em;
    padding    : 15px 0 0;
    width      : 300px;
}

.creditBox p {
    width  : 70%;
    padding: 0 0 0 19px;
}

.creditBox strong {
    padding: 15px 0 0 19px;
    margin : 0;
    display: inline;
}

.story .creditCont {
    margin-top: 0;
}

.creditCont {
    float         : right;
    margin-right  : -104%;
    padding-bottom: 20px;
    padding-left  : 30px;
    width         : 127%;
}

.creditCont strong {
    color      : #000000;
    font-size  : 12px;
    font-family: helvetica, serif;
}

.content .jumpBtn.doc {
    height : 48px;
    padding: 28px 40px 0 89px;
}

.published {
    color    : #666666;
    font-size: 12px;
}