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

#id {
    float: left;
    width: 660px;
    background: #97aac1;
    text-align: center;
    -moz-box-shadow:       inset 1px 2px 3px rgba(0, 0, 0, .0);
    -webkit-box-shadow: inset 1px 2px 3px rgba(0, 0, 0, .0);
    box-shadow:         inset 1px 2px 3px rgba(0, 0, 0, .0); 
    -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; }  
    
    .wide #id,
    #simple #id {
        float: none;
        width: 100%;
        max-width: 1000px;
        }    

#id a { 
    width: 660px; 
    padding: 14px 20px 14px 20px;   
    display: block;
    text-align: left; }
    
    .wide #id a,
    #simple #id a {  width: 100%; max-width: 960px;  }

#id h1 {
    margin: 0 auto; 
    font-family: nimbus-sans-condensed, 'arial narrow', helvetica, arial; 
    font-size: 32px;
    line-height: 1; 
    font-style: normal;
    font-weight: 700; 
    text-transform: uppercase; }
   
   #id a h1 { 
      color: rgba(255, 255, 255, 1);
      text-shadow: 1px 1px 1px rgba(0, 0, 0, .2) }
   #id:hover a h1 { text-shadow: 1px 1px 1px rgba(0, 0, 0, .3) }
   #id:active a h1 { text-shadow: 1px 1px 1px rgba(0, 0, 0, .25) }

   #id:hover h1:after { content: " »" }

 /* Content
------------------------------------ */

#body { 
   width: 1000px;
   margin: auto auto 20px auto; 
   background: white;
   }
   
#simple #body { 
   width: 100%;
   max-width: 1000px;
   }
   
   
#content, #options { float: left;} 
   
#content {
   width: 600px;
   padding: 20px 30px;
   text-align: left; } 

#options {
    margin-top: -60px;
    width: 340px;
    position: relative;
    background: #475566;
    } 
    
.wide #content {
   width: 950px;
   float: none;
   padding: 10px 0; } 
   
#simple #content {
   width: auto !important;
   max-width: 940px;
   float: none;
   }  
    
   
 /* Photo with INSET Shadow
----------------------------- */ 

#content figure.photo {
   width: auto;
   position: relative;
   float: right;
   display: block;
   margin: 0 0 15px 15px; }  
      
#content figure.photo:before {
   -moz-border-radius:       6px; 
      -webkit-border-radius: 6px;
      border-radius:         6px;    
   -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;      
      -moz-border-radius:       6px; 
         -webkit-border-radius: 6px;
         border-radius:         6px; }        
      
/* Expander 
--------------------------------------------------- */

.expander { margin: 0 0 5px; }
   
.expander-header { 
   cursor: pointer;
   padding: 10px 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: 18px;
      color: #eb6e1f;
      line-height: 1;
      text-transform: none;
	margin: 0;
   padding: 0 25px 0 0;
   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: #fdb825 !important; }   
.expander-header.selected:hover h2 { color: #00aec5 !important; }   

.expander-header h2:after {
   background: #00aec5 url(http://www.illinoisunites.org/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;
      right: 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:after { background-color: #eb6e1f; }
.expander-header:active h2:after { 
   background-color: #fdb825; 
   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:after { background-position: center -47px !important; }


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

.post { padding: 15px 0; }

.post:first-child { padding: 0 0 15px 0; } 

.post:last-child { 
   border-bottom: none;
   padding: 15px 0 0; }   
   
.meta { 
   border-bottom: 1px solid #f5f5f5; 
   padding: 0 0 10px;
   margin-bottom: 15px; }

   .post h2 { 
      font-size: 26px;
      text-transform: none;
      margin-bottom: 5px; }
      
   .meta small {
      font-size: 10px;
      line-height: 1;
      text-transform: uppercase; }  

.post .text { padding: 0 5px 0; }

.post .tags {
   padding: 8px 4px;
   border-top: 1px solid #f5f5f5;
   display: block;
   font-size: 10px;
   line-height: 1; }

.post .share {
   background: #f4f3f3;   
   padding: 9px 10px 4px 0px;
   -moz-border-radius:     6px;
   -webkit-border-radius:  6px;
   border-radius:          6px; 
   font-size: 10px;
   line-height: 1;  
   text-align: left;
   text-transform: uppercase;    
   position: relative; 
   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; }
.post .share { background-color: #e2e0e0; }

.share .twitter-share-button {
   margin-left: 10px;
   float: left; }

.share a.rss,
.share a.addthis { 
   float: right;
   display: block; 
   line-height: 16px;
   width: 40px;
   margin: 5px 7px; }
   
.share a.rss {  width: 37px;  } 
.share a.addthis { width: 52px; } 

.share a.rss .icon { background-image: url(http://www.illinoisunites.org/theme/img/rss.png); }
.share a.addthis .icon { background-image: url(http://www.illinoisunites.org/theme/img/share.png); } 

.share a .icon {
   background-color: #0099ad;   
   background-position: center center;
   background-repeat: no-repeat;
   width: 14px;
   height: 14px;
   float: right;
   -moz-border-radius:       9px;
   -webkit-border-radius: 9px;
   border-radius:         9px;    
   display: inline-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; }
.share a:hover .icon {
   background-color: #eb6e1f;
   -moz-box-shadow:       0 1px 1px rgba(0,0,0,.2);
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
   box-shadow:         0 1px 1px rgba(0,0,0,.2); }
.share a:active .icon {
   background-color: #00aec5;
   -moz-box-shadow:       inset 0 1px 1px rgba(0,0,0,.2);
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
   box-shadow:         inset 0 1px 1px rgba(0,0,0,.2); }        

 
 /* Three Column Layout
------------------------------------ */

.threecol { margin-top: 15px; }
   
.threecol .col1,
.threecol .col2,
.threecol .col3 { 
   width: 326px;
   float: left; }   
   
.threecol .col1 { 
    background: #475566;      
    width: 270px;
    padding: 25px;
    color: #e9eff4;
    }
    
.threecol .col1 h2 { 
    color: #e9eff4;
    }
  

.threecol .col2 { 
    width: 340px;
    padding: 0 25px; 
    }
   
.threecol .col3 { 
   width: 235px;
   text-align: center; 
   background: #ecf0f3;
   } 

 
 /* Forms
------------------------------------ */

#content form ol { 
   list-style: none; 
   margin: 0; }

#content form li.textarea { float: right; }

#content form li.submit { 
   padding-top: 15px;
   text-align: center;
   display: block; }

#content form li { 
   margin: 0 0 7px;
   display: block; }

#content input,
#content select,
#content textarea { 
    background: #dfe7ee;   
    border: none;
    margin: 0 0 6px 0;
    padding: 9px 7px 7px 7px; 
    border-radius:         4px;
    -moz-border-radius:    4px; 
    -webkit-border-radius: 4px;    
    cursor: pointer; 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    transition:         all .35s ease-in-out;    
    -webkit-transition: all .35s ease-in-out;  
    -moz-transition:    all .35s ease-in-out;  
    -o-transition:      all .35s ease-in-out;  
    -ms-transition:     all .35s ease-in-out; } 

#content input:hover,
#content select:hover,
#content textarea:hover { 
   background: #e6edf3;  
   box-shadow:         1px 1px 3px rgba(0, 0, 0, 0.2);       
   -moz-box-shadow:    1px 1px 3px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }

#content input:focus,
#content select:focus,
#content textarea:focus { 
   background: #e6edf3 ;
   cursor: text; 
   box-shadow:         inset 1px 1px 1px rgba(0, 0, 0, 0.35);       
   -moz-box-shadow:    inset 1px 1px 1px rgba(0, 0, 0, 0.35);
   -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.35); }    

.contact #content input { 
   width: 325px; 
   padding: 9px 7px 9px 7px; }
.contact #content textarea { 
   width: 330px;
   height: 140px; }


#content option { 
   border-radius:         4px;
   -moz-border-radius:    4px; 
   -webkit-border-radius: 4px; }    

#content button,
#content .button { 
    background: #af403c url('../img/arrow-white.png') no-repeat 70px center;  
    padding: 5px 20px 5px 7px;
    display: inline-block;
    border: 0;
    cursor: pointer;
    font-size: 24px;
      font-family: nimbus-sans-condensed, 'arial narrow', helvetica, arial; 
      font-style: normal;
      font-weight: 700; 
      color: #fff;
      text-transform: uppercase;
   -moz-border-radius:       6px;
      -webkit-border-radius: 6px;
      border-radius:         6px;   
   -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; 
}
#content button:hover,
#content .button:hover { 
    background-color: #c92d27; 
   -moz-box-shadow:    0 1px 1px rgba(0,0,0,.15);
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
   box-shadow:         0 1px 1px rgba(0,0,0,.15);
}   
#content button:active,
#content .button:active { 
   background-color: #8d2421;
   -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.35);
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
   box-shadow:         inset 0 1px 1px rgba(0,0,0,.35);
}  
     
.join-long p { line-height: 1; } 

.join-long input { width: 255px; } 
.join-long input.zip { width: 100px; } 



 /* Thank You
------------------------------------ */
.thank-you .share {
   background-color: #f6f6f6;
   padding: 10px;
   -moz-border-radius:       6px;
      -webkit-border-radius: 6px;
      border-radius:         6px; }

.thank-you .share section {
   background-color: #ececec; 
   width: 263px;
   padding: 20px;
   margin-right: 10px;
   float: left; 
   text-align: center;
   -moz-border-radius:       6px;
      -webkit-border-radius: 6px;
      border-radius:         6px;   
   -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; }
.thank-you .share section:last-child { margin-right: 0; }

.thank-you .share section:hover {
   background-color: #dedede; 
   -moz-box-shadow:       1px 1px 2px rgba(0,0,0,.15);
      -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.15);
      box-shadow:         1px 1px 2px rgba(0,0,0,.15); }   
      
.share h3 { 
   margin: 0 0 12px 0;
   font-size: 22px;
   line-height: 1;
   color: #00aec5;
   text-align: left;
   text-transform: uppercase; }
   
.share h3 .icon { 
   background-color: #00aec5;
   background-repeat: no-repeat;
   background-position: center center; 
   background-size:            16px auto;
      -webkit-background-size: 16px auto;
      -moz-background-size:    16px auto;
   	-o-background-size:      16px auto;      
   width: 22px;
   height: 22px;
   margin: 0 5px 0 0;
   float: left;
   display: inline-block;
   -moz-border-radius:       4px;
      -webkit-border-radius: 4px;
      border-radius:         4px; }   
.tweet h3 .icon { background-image: url(../img/twitter.png); }
.facebook h3 .icon { background-image: url(../img/facebook.png); }
.email h3 .icon { background-image: url(http://www.illinoisunites.org/theme/img/email.png); }

.share textarea { 
   width: 249px;
   height: 120px;
   line-height: 1.5;
   cursor: default !important; }  
.share textarea:focus { background: #eb6e1f !important; }

.share .button { margin: 10px 0 0; }
   
   
 
  
/* --------------- Act Section Connect --------------- */

.act #content .actions {
    background: #eee;   
    width: 200px;
    padding: 10px;
    margin: auto;
    -moz-border-radius:    6px;
    -webkit-border-radius: 6px;
    border-radius:         6px; 
    }  
       
       
.salsa.actions { 
   width: 94% !important;
   padding: 25px 3% !important; }  
    
.act #content .actions h2 {
   margin: 13px 0 8px;
   font-family: nimbus-sans-condensed, 'arial narrow', helvetica, arial; 
   line-height: 1;
   font-weight: 700;
   color: #fff; 
   font-size: 18px;
   } 

.act #content .actions section { 
   float: left;
   width: 200px;
   margin: 0 0 10px 0;
   -moz-border-radius:     6px;
   -webkit-border-radius:  6px;
   border-radius:          6px; 
   }
    
.act #content .actions section:first-child { margin-bottom: 0; }
      

.act #content .connect { background: #8c9ca3; }   
   
.act #content .like, 
.act #content .follow {
    width: 113px;      
    height: 28px;
    padding: 6px;
    display: inline-block;
    -moz-border-radius:    4px;
    -webkit-border-radius: 4px;
    border-radius:         4px;
    -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; 
    }
    
.act #content .like:hover,
.act #content .follow:hover {
    box-shadow:            1px 1px 2.5px rgba(0, 0, 0, 0.25);       
    -moz-box-shadow:    1px 1px 2.5px rgba(0, 0, 0, 0.25);    
    -webkit-box-shadow: 1px 1px 2.5px rgba(0, 0, 0, 0.25); 
    }
    
.act #content .like:active, 
.act #content .follow:active {
    box-shadow:            inset 1px 1px 2.5px rgba(0, 0, 0, 0.2);       
    -moz-box-shadow:    inset 1px 1px 2.5px rgba(0, 0, 0, 0.2);    
    -webkit-box-shadow: inset 1px 1px 2.5px rgba(0, 0, 0, 0.2); 
    }
      
.act #content .connect iframe { float: left; }
.act #content .like iframe { margin-top: 4px; }       

.act #content .like { background: #3b5998; }   
.act #content .like:hover { background: #243e6f; }      

.act #content .follow { background: #0493c9; }  
.act #content .follow:hover  { background: #037fae; }  

.act #content .connect a.icon { 
    background-position: center center;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    opacity: .8;   
    margin-right: 4px;
    display: inline-block; 
    float: left; 
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition:   opacity .3s ease-in-out;
    -ms-transition:  opacity .3s ease-in-out;
    transition:      opacity .3s ease-in-out; 
    }   
    
   .act #content .connect a.icon:hover { opacity: 1; }
   
.act #content .like a.icon { background-image: url(../img/facebook.png); }
.act #content .follow a.icon { background-image: url(../img/twitter.png); }


#salsa #submitDiv { text-align: center !important; }

#salsa input { border: 1px solid #bec9d5 !important; }


#submitSignPetition  { 
   margin: 15px !important;
   border: 0 !important;
   background: #af403c !important; 
   color: #fff !important; 
   font-size: 25px !important;
   font-family: nimbus-sans-condensed,'arial narrow',helvetica,arial !important; ;
   font-weight: 700 !important; 
   text-transform: uppercase; }
#submitSignPetition:hover  {  background-color: #1d3475 !important; }