/* Section ID
------------------------------------ */

#id {
    width: 960px;
    height: 52px;
    margin: auto;
    background: #215176; 
    -moz-box-shadow: 0 0 10px rgba(21,65,112,.2);
    -webkit-box-shadow: 0 0 10px rgba(21,65,112,.2); 
    box-shadow: 0 0 10px rgba(21,65,112,.2); 
    position: relative;
    }
    
    @media (min-width : 1200px) { #id { width: 1200px; } }   

#id .breadcrumb a {
    margin: 0 auto;
    display: inline-block;
    float: left;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1; 
    font-weight: 200; 
    color: #b7e6fb;
    padding: 17px;
    height: 18px;
    -webkit-transition: all .25s ease-in-out;  
    -moz-transition: all .25s ease-in-out;  
    -o-transition: all .25s ease-in-out;  
    -ms-transition: all .25s ease-in-out; 
    transition: all .25s ease-in-out;  
    }
       
    #id .breadcrumb a:hover { color: #d0f0ff; }
    
    #id .breadcrumb a:active { color: #98dbf9; }
         
#id .breadcrumb a:last-child { 
    padding-left: 0;
    }

#id .breadcrumb a:first-child { 
    color: white;
    font-weight: 300;
    padding-left: 17px
    }
    
    #id .breadcrumb a.chevron { padding-right: 5px; }
    #id .chevron:after { content: ' » '; }
    



/* --------------- Email Signup --------------- */    

#mailing-list {
    background: #457b9f;
    padding: 18px 20px 25px;
    text-align: left;
    z-index: 999;
    overflow: hidden;
    margin-bottom: 20px;
    }  

#mailing-list h2 {
    font: 14px/19px 'UniversLTW01-53Extended',Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #c9eaff;
    margin: 0;
    }
    
    @media (min-width : 1200px) { #mailing-list h2 { font-size: 17px; line-height: 21px; }}  





/* VIDEO
------------------------------------ */

#content iframe {
    width: 600px;
    height: 330px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }

    @media (min-width : 1200px) { #content iframe { width: 730px; height: 400px } }   
    
    




/* Addthis - Sharing
------------------------------------ */ 
  
#share,
.share {
    font-family: 'trilogyicons';
    content: attr(data-icon);
  	speak: none;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
    color: #1a3947; 
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;	
    position: absolute;
    top: 52px;
    left: 0;
    width: 36px;
    z-index: 9;
    }
    
    @media (min-width : 1020px) { #share,.share  { left: -36px; } }  
        
    #video .share { left: auto; top: auto; right: 0; bottom: -5px; }
    
#share h5,
.share h5 { display: none; }
      
#share a,
.share a {
    color: white; 
    background: #457b9f;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    padding: 10px 10px 10px 5px;
    margin: 0 0 5px 0;
    font-size: 16px;
    width: 16px;
    height: 16px;
    float: left;
    }  
    
    @media (min-width : 1020px) { #share a, .share a { float: right; padding: 10px 5px 10px 10px; } }
    
    #video .share a { padding: 10px 5px 10px 10px; float: right; }
    
#share a:hover,
#video .share a:hover { background: #215176; padding: 10px; }   

#share a:active,
#video .share a:active { background: #0e3654; padding: 10px; }
 
#share span,
.share span { display: none !important; }

#at15s { display: none; }






/* ---- CANDIDATES  ---- */   

.candidate-list { margin-bottom: 20px; }

.candidate-list h3.title { margin-bottom: 10px; }

.candidate-list article,
.candidate-list article  h4,
.candidate-list article img,
.candidate-list article p {
    -webkit-transition: all .3s ease-in-out;  
    -moz-transition: all .3s ease-in-out;  
    -o-transition: all .3s ease-in-out;  
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out;  
    }
    
.candidate-list article {
    background: #f9f9f9;
    padding: 10px 1%;
    width: 30.3%;
    min-height: 75px;
    margin: 0 .25% 10px .25%;
    display: inline-block;
    vertical-align: text-top;
    }    
    
    @media (min-width : 1200px) { .candidate-list article { min-height: 90px; }}  
    
    .ie7 .candidate-list article , .ie8 .candidate-list article { display: block; float: left; }
    
.candidate-list article:hover { background-color: #457b9f; }

.candidate-list article:active { background-color: #215176; }

.candidate-list article a {
    width: 100%;
    min-height: 75px;
    display: block;
    }       
    
    @media (min-width : 1200px) { .candidate-list article a { min-height: 90px; }}  

.candidate-list article img {
    width: 20%;
    float: left;
    margin: 0 2.5% 0 0;
    }
      
.candidate-list .item-text {
    float: left;
    width: 77.5%;
    }

.candidate-list article h4 {
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    margin: 0;
    }
    
    .candidate-list article:hover h4 { color: white; }
    
    @media (min-width : 1200px) { 
        .candidate-list article h4 { font-size: 22px; } 
        }

.candidate-list article p {
    color: #8c9ca3;
    font-size: 14px;
    line-height: 15px; margin: 3px 0 0 0;
    }
    
    .candidate-list article:hover p { color: #f3f0f8; }
 
    @media (min-width : 1200px) { .candidates  article p { font-size: 17px; line-height: 18px; } } 
    
.domain { 
      white-space: nowrap;
      }
 
 
h2.office {
    font-size: 18px;
    opacity: .6;
    background: #77a5c4;
    padding: 8px 10px;
    text-transform: uppercase;
    color: white;
    display: inline-block;
    }


.candidate-links { text-align: center; }

.donation-link,
.campaign-website,
.official-website {
    display: inline-block;
    padding: 8px 10px;
    background: #457b9f;
    color: white;
    margin: 5px auto;
    -webkit-transition: all .3s ease-in-out;  
    -moz-transition: all .3s ease-in-out;  
    -o-transition: all .3s ease-in-out;  
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out;  
    }
    
    .donation-link { background: #861f38; }

.donation-link:hover,
.campaign-website:hover,
.official-website:hover {
    padding: 13px 15px;
    background: #24577d;
    margin: 0 auto;
    color: white;
    }

    .donation-link:hover { background: #b51239; }
    
.donation-link:active,
.campaign-website:active,
.official-website:active {
    padding: 13px 15px;
    background: #25587c;
    margin: 0 auto;
    color: white;
    }

    .donation-link:active { background: #69051d; }





/* VIDEO
------------------------------------ */

#video {
    position: relative;
    overflow: hidden;
    height: 320px;
    background: black;
    }
    
    @media (min-width : 1200px) { #video { height: 410px }}  
       
#video iframe {
    width: 570px;
    height: 320px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }

    @media (min-width : 1020px) { #video iframe { width: 600px; height: 340px } }  
    @media (min-width : 1200px) { #video iframe { width: 730px; height: 410px } }   

#video .video-description {
    background: rgba(21,63,114,.8);
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px 20px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }

#video h2, 
#video p,
#video small { 
    color: white; 
    }
  
#video h2 { 
    margin: 0 0 4px 0;
    }
    
#video p { 
    line-height: 1.2;
    margin: 0; 
    }
    
#video small { 
    font-size: 14px;
    text-transform: uppercase; 
    }




/* --------------- Video --------------- */

.feed.video { 
    width: 570px; 
    position: relative;
    margin: 30px 0 10px;
    }

    @media (min-width : 1020px) { .feed.video { width: 600px; }}  
    @media (min-width : 1200px) { .feed.video { width: 730px; }}  


.feed h2 {
    font-size: 20px !important;
    line-height: 1;
    text-transform: uppercase;
    margin: 2px 0; 
    color: #8a8a8a;
    text-align: center;
    padding: 15px;
    }  
    
    @media (min-width : 1200px) { .feed h2 { font-size: 24px !important; margin: 0; }} 


/* ---- Feed Controls ---- */   

.feed.video ul { display: none; }


/* --- Back/Next Buttons --- */

.feed.video .control {
    background-color: white;   
    width: 32px;
    height: 32px;
    -moz-border-radius:    21px;
    -webkit-border-radius: 21px;
    border-radius:         21px;
    position: absolute;
    top: 7px; 
    margin: 4px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #808080; 
    display: block;    
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out; 
    z-index: 9;
    }

    .feed.video .control:hover { 
        background: #4a81a5;
        color: white;
        width: 40px;
        height: 40px;
        font-size: 28px;
        line-height: 40px;
        margin: 0;
        -moz-border-radius:    25px;
        -webkit-border-radius: 25px;
        border-radius:         25px;
        }
    
    .feed.video .control:active { 
        color: #a7a7a7; 
        background: #24577d;
        }

.control.back { left: 28%; }
    
.control.next { right: 28%; }  

    @media (min-width : 1200px) { 
        .control.back { left: 30%; }
        .control.next { right: 30%; }  
        }  
  

.feed.video .panel { min-height: 500px; } 

.feed.video article {
    width: 30.3%;
    min-height: 140px;
    padding: 15px 1.5%;
    float: left;
    }
    
    @media (min-width : 1200px) { .feed.video article { min-height: 160px;}} 

.video-feed.blocks article:last-child { margin-right: 0; }

.feed.video article:hover {
  background-color: #f6f6f6; 
  -moz-box-shadow:    0 1px 2px rgba(0,0,0,.15);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow:         0 1px 2px rgba(0,0,0,.15); 
  }

.feed.video article:active,
.feed.video article.active{
    background-color: #f6f6f6; 
    }

.feed.video article figure {
    width: 100%;
    height: 90px;
    margin-bottom: 10px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
    }
  
    @media (min-width : 1200px) { .feed.video article figure { height: 120px; }}   

.feed.video article h3 { 
    font-size: .85em; 
    margin-bottom: 0;
    }




/* Photo with INSET Shadow
----------------------------- */ 

#content figure.photo {
    width: auto;
    position: relative;
    float: right;
    display: block;
    margin: 0 0 15px 15px;
    z-index: 10;
    }  

#content figure.photo:before {    
    -moz-box-shadow:    inset 2px 2px 5px rgba(0,0,0,.3);
    -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,.3);
    box-shadow:         inset 2px 2px 5px rgba(0,0,0,.3); 
    content: "";
    position: absolute;   
    bottom: 0;
    left: 0;
    right: 0;
    top: 0; 
    }   

#content figure.photo img {
    float: left;      
    }        



/* Two Columns 
--------------------------------------------------- */

.two-columns .column { 
    width: 48%;
    }

.two-columns .column:first-child { 
    float: left;
    }

.two-columns .column:nth-child(2n) { 
    float: right;
    }



/* Expander 
--------------------------------------------------- */

.expander { margin: 0 0 5px; }
   
.expander-header { 
    cursor: pointer;
    padding: 10px 0 0 0;
    display: block;  
    -webkit-transition: background-color .35s ease-in-out, color .35s ease-in-out;
    -moz-transition: background-color .35s ease-in-out, color .35s ease-in-out;
    -o-transition:   background-color .35s ease-in-out, color .35s ease-in-out;
    -ms-transition:  background-color .35s ease-in-out, color .35s ease-in-out;
    transition:      background-color .35s ease-in-out, color .35s ease-in-out; 
    }

.expander-header h2 {
    font-size: 20px;
    color: #4a82a5;
    line-height: 1;
    text-transform: none;
    padding: 0 0 0 35px;
    position: relative;
    padding-bottom: 0 !important; 
    transition:            color .3s ease-in-out;    
    -webkit-transition: color .3s ease-in-out;  
    -moz-transition:    color .3s ease-in-out;  
    -o-transition:      color .3s ease-in-out;  
    -ms-transition:     color .3s ease-in-out; 
    } 
      
.expander-header:hover h2,
.expander-header.selected h2 { color: #24577d !important; }   
    
.expander-header.selected:hover h2 { color: #4a82a5 !important; }   

.expander-header h2:before {
    background: #4a82a5 url(/theme/img/expander.png) no-repeat center 5px; 
    width: 22px;
    height: 21px;
    display: block;
    content:" ";
    -moz-border-radius:       20px;
    -webkit-border-radius: 20px;
    border-radius:         20px;    
    color: #fff;
    font-size: 22px;
    line-height: 19px;
    font-weight: 300;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    transition:         background-color .3s ease-in-out;    
    -webkit-transition: background-color .3s ease-in-out;  
    -moz-transition:    background-color .3s ease-in-out;  
    -o-transition:      background-color .3s ease-in-out;  
    -ms-transition:     background-color .3s ease-in-out; 
    }
    
.expander-header:hover h2:before { background-color: #24577d; }

.expander-header:active h2:before { 
    background-color: #215176; 
    box-shadow:            inset 1px 1px 2px rgba(0, 0, 0, 0.3);       
    -moz-box-shadow:    inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);  
    }
    
.expander-header.selected h2:before { background-position: center -47px !important; }

.expander-header p { margin-bottom: 0; }
   
.expander-header:hover { background-position: 630px -68px; }
.expander-header:active {  }        
      
.expander-body { 
    padding: 5px 0 5px 35px;   
    }    
   
.expander-body p:last-child { 
    margin-bottom: 0; 
    }              



.navigation { 
    text-align: center; 
    margin-top: 20px;
    }
    
iframe#countable-social-video-widget {
    min-height: 500px;
}