body {
  background: #fff url(/theme/img/top.png) repeat-x center -22px;  
  margin: 0 auto; 	}
.wrap {
  width: 960px; 
  position: relative; }


/* Header styles */

header {
  width: 980px;
  height: 150px;
  position: relative; }

.logo {
    width: 250px;
    display: block;
    margin: 3px;
    position: absolute;    
    top: 0;
    left: 17px;
    z-index: 10; }
    
    #logo:hover { opacity: .8; }

.logo img { width: 100%; }

.logo {
    position: absolute;
    margin: 3px;
    top: 5px;
    left: 5px;
    z-index: 10; }

.tagline { 
  position: absolute;
  left: 320px;
  top: 50px; 
  font-family: "proxima-nova-1","proxima-nova-2",helvetica,arial,sans-serif;
  font-style: normal; 
  font-weight: 300;  
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 25px; 
  text-shadow: 0 1px 2px rgba(0,0,0,.36); }
  
.tagline.espanol { font-size: 22px; }
  
.tagline sup { 
  margin-top: 3px;
  font-size: 10px; }

.convention-date {
    position: absolute;
    top: 30px;
    right: 4px;
    width: 790px;
    text-align: center; }
    
.convention-date h2 {
    color: white;
    text-shadow: 1px 1px 1px rgba(3,59,91,1); 
    font-family: "proxima-nova-1","proxima-nova-2",helvetica,arial,sans-serif; 
    font-weight: 400; 
    font-size: 28px;
    line-height: 1;
    margin: 0; }

.convention-date p {
    color: #82f4b8;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(3,59,91,1); 
    font-family: "proxima-nova-1","proxima-nova-2",helvetica,arial,sans-serif; 
    font-weight: 700; 
    font-size: 16px; }


/* Content */

.main {
  background: #fff;  
  width: 960px;
 
  position: relative;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px;  
  -moz-box-shadow:    0 0 5px rgba(0,0,0,.3);
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
  box-shadow:         0 0 5px rgba(0,0,0,.3); }
#home .main { margin: 10px auto 0; }
  
  
.main .content,
.main .sidebar { 
  vertical-align: top;
  display: table-cell; }
  
.content { 
  width: 75%;
  padding: 15px;
  text-align: left; }
#interior .content { 
  padding: 25px;
  font-size: 15px;
  line-height: 1.3; }
.wide .content { width: 100%; }
  
.content p:last-child { margin-bottom: 0; } 
  
.sidebar { 
  background: #eeeeee;
  width: 25%;
  padding: 15px;
  -moz-border-radius:    0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius:         0 5px 5px 0;   
	text-align: center; }
  

/* Top Story Controls */

.topstory .controls {
  display: inline-block;
  position: absolute;
  margin: 0;
  bottom: 10px;
  left: 10px; 
  z-index: 9999; }


.box .controls {
  display: inline-block;
  position: absolute;
  margin: 0;
  top: 19px;
  right: 18px; }
  
.controls li { 
  display: inline-block;
  margin: 0 3px; }
.box .controls li { margin: 0 1px; }

.controls a { 
  background: #00bfe9;  
  width: 10px;
  height: 10px;
  display: block;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
  border-radius:         5px; }

.controls a:hover { 
  background: #49d7f7;
  -moz-box-shadow:    0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         0 1px 3px rgba(0,0,0,.25); }
.controls a:active { 
  -moz-box-shadow:    inset 0 1px 2px rgba(0,0,0,.25);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  box-shadow:         inset 0 1px 2px rgba(0,0,0,.25); }

.controls .ui-tabs-active a,
.controls .ui-tabs-active a:hover {
  background: #00bf64;
  cursor: pointer;
  -moz-box-shadow:    0 1px 3px rgba(0,0,0,.25);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
  box-shadow:         0 1px 3px rgba(0,0,0,.25); }


/* Columns */
.twocol {}

.twocol > div { 
  width: 48.6%;
  float: left; }
.twocol .one { margin-right: 1.2%; }
.twocol .two { margin-left: 1.2%; }

  

.box {
  background-color: #fff;
  background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#ffffff)); 
  background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 100%);
  background: -o-linear-gradient(top, #f3f3f3 0%,#ffffff 100%); 
  background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 100%);
  background: linear-gradient(to bottom, #f3f3f3 0%,#ffffff 100%); 
  background-size: 100% 125px;
  background-repeat: no-repeat;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px; 
  padding: 15px; }

.sidebar .box {
  background-color: #fff;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZjdmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
  background-image: -moz-linear-gradient(bottom, #ebf7f1 0%, #fff 100%);
  background-image: -o-linear-gradient(bottom, #ebf7f1 0%, #fff 100%);
  background-image: -webkit-linear-gradient(bottom, #ebf7f1 0%, #fff 100%);
  background-image: linear-gradient(bottom, #ebf7f1 0%, #fff 100%); 
  background-size: 100% 35px;
  background-repeat: no-repeat;  
  -moz-box-shadow:    inset 0 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 0 1px #fff;
  box-shadow:         inset 0 0 0 1px #fff;
  border: 1px solid #d9d9d9;
  text-align: left; 
  padding: 8px; }
.sidebar .box.snav { margin-bottom: 15px; }

.box.list ul {
  list-style: none;
  margin: 10px 5px 0 5px; }
.box.list li { 
  padding: 5px 5px 5px 15px; 
  position: relative; }
.box.list li a { display: block; }  
.box.list li:before { 
  background: #7fc0ea; 
  width: 4px;
  height: 4px;
  content: " ";
  display: block;
  position: absolute;
  top: 9px;
  left: 5px; }
.box.list li:hover:before { background: #008c42; }













/* Columns */

#primary, #secondary {
   float: left;
   overflow: hidden; 
   text-align: left;
   }

#primary {
   width: 610px;
   text-align: left;
   padding: 29px 25px 0 25px;
   }
   
#home #primary.during {
   width: 640px;
   text-align: left;
   padding: 0 24px 0 0;
   }

#wide #wrapper #primary {
   width: 960px;
   float: none;
   margin: auto;
   }

#secondary {
   width: 280px;
   padding: 14px 10px 0 10px;
   }
   

.pad { padding: 21px 25px 25px 25px; }



/* Columns */

.column300 {
   padding: 20px 0 0 20px;
   width: 300px; 
   float: left;
   }

#interior .column300 {
   padding: 20px 0 0 10px;
   }

#interior .column300.columnleft {
   padding: 20px 0 0 0;
   }

#interior .pad .column300, 
#interior .pad .column300.columnleft {
   padding-top: 10px;
   }




/* floating images. */

.imgright {
  float: right;
  margin: 0 0 15px 15px; 
  }

.imgleft {
  float: left;
  margin: 0 15px 15px 0; 
  }

.thumbright {
  border: 1px solid #dfdfdf;
  float: right;
  padding: 1px;
  margin: 2px 0 15px 15px; 
  }

.thumbleft {
  border: 1px solid #dfdfdf;
  float: left;
  margin: 2px 15px 15px 0; 
  padding: 1px;
  }








/* snippets */

/* Main Column Box Styles */

#primary .box {
    width: 280px;
    background: url('/theme/img/box-primary-300.png') no-repeat left top;
    padding: 8px 10px;
    margin-bottom: 10px;
    }

#primary .box.wide {
    width: 590px;
    background: url('/theme/img/box-primary-610.png') no-repeat left top;
    padding: 8px 10px;
    margin-bottom: 10px;
    }
    
    
    #home #primary .box.wide { margin-top: 25px; }


#primary .box img { max-width: 280px; }

#primary .box object,
#primary .box embed { width: 280px; height: 230px; margin: 2px 0 10px 0;}


#primary .box-320 {
    width: 320px;
    background: url('/theme/theme/img/divider-320.png') no-repeat left top;
    padding: 13px 0 0 0;
    }


/* Right Column Box Styles */

#secondary .box {
    width: 260px;
    padding: 10px;
    background: white;
    margin-bottom: 10px;
    -moz-border-radius:     3px 3px 0 0;
    -webkit-border-radius:  3px 3px 0 0;
    border-radius:          3px 3px 0 0;
    -moz-box-shadow:        0 0 5px rgba(21,65,112,.4);
    -webkit-box-shadow:     0 0 5px rgba(21,65,112,.4); 
    box-shadow:             0 0 5px rgba(21,65,112,.4); 
    }

/* Box Titles */
                         
.box h3 {
    line-height: 1;
    font-family: "proxima-nova",Arial, Helvetica, sans-serif;
    font-style: normal; 
    font-weight: 300;
    font-size: 18px;
    margin: 0 0 10px 0;
    }
    
.box h3 a,
.box a h3 { color: #0082d5; }

.box h3 a span.green,
.box a h3 span.green{ 
    color: #008c42; 
    display: inline; 
    }

.box h3 a:hover,
.box a:hover h3 { color: #005689; }
.box h3 a:hover span.green,
.box a:hover h3 span.green { color: #005329; }




/*--- Box Lists 

.box ul,
.box-320 ul {
    list-style: none; 
    padding: 0; margin: 0;
    }
    
.box li,
.box-320 li {
    margin: 0; padding: 0;
    display: block;
    }

.box li a,
.box-320 li a,
.box.section-body li,
.box .nolinks li{
    display: block;
    margin: 0 auto !important;
    padding: 3px 0 3px 10px;
    background: url('/theme/img/bullet.png') no-repeat 1px 9px;
    font-size: 12px;
    line-height: 14px;
    }

    .box li a:hover, .box-320 li a:hover, .box.section-body li:hover { background-position: 1px -196px; }

.box .archive li a,
.box-320 .archive li a {
    background: transparent;
    }

#primary .box ul.archive li a { 
    width: 220px; 
    display: block; 
    padding: 5px 0px 5px 50px;
    _padding: 5px 0 0 0; _width: 220px;
    text-decoration: none;
    }

.box ul.archive li a:hover { background-color: transparent; }

.box ul.archive li a span.headline { font-size: 14px; line-height: 1.15em; padding: 0; margin: 0;}

.box ul.archive li a span.date { 
    font-size: 10px; 
    line-height: 1.15em; 
    color: #919191; 
    text-transform: uppercase; 
    display: block;
    float: left;
    margin: 2px 0 0 -50px;
    _margin: 2px 0 0 5px;
    .padding-top: 3px;
    _padding-top: 0;
    _width: 50px;
    }

.box ul.archive li a:hover span.date { color: #787878; }

.box ul.archive li a span.description span.source { display: inline-block;}

----*/



/*--- Box Typography ----*/

.box p {
    font-size: .8em; line-height: 1.3em;
    margin: 0 0 6px ;
    }
    
.box.wide p {
    font-size: 1em; line-height: 1.3em;
    margin: 0 0 1.5em;
    }

.box table {
    margin: 0 0 1em 0;
    }

.box td {
    font-size: .8em; line-height: 1.2em;
    margin: 0;
    padding: 6px 6px 0 0;
    }

.box .more {
    display: block;
    margin: 10px 0 0 0;
    font-size: 10px;
    text-transform: uppercase;
    }


.box a.more-button {
    background: url('/theme/img/more.png') no-repeat 0 0;
    display: block;
    width: 45px;
    height: 13px;
    margin: 6px 0 0 0;
    text-indent: -100000px;
    }

.box a.more-button:hover {
    background-position: 0 -13px;
    }

.box a.rss {
    background: url('/theme/img/box-rss.png') no-repeat 0 0;
    display: block;
    width: 14px;
    height: 14px;
    text-indent: -100000px;
    float: right;
    }

.box a.rss:hover {
    background-position: 0 -14px;
    }


.box a .thumbnail { border: 1px solid #f4f4f4; }
.box a:hover .thumbnail { border: 1px solid #00a34d; }

.box .divider {
    margin-top: 10px; padding-top: 10px;
    }


/* Left Column */

#primary .box ul,
#primary .box li { width: 280px; }

#primary .box li a { width: 270px; }


/* Right Column */

#secondary .box ul,
#secondary .box li { width: 258px; }

#secondary .box li a { width: 248px; }

#secondary .box .archive li a { width: 198px; padding: 5px 0 5px 50px;}


/* Two-column box*/

#secondary .box .split ul {
    width: 120px;
    float: left;
    padding-left: 18px;
    }

#secondary .box .split ul.first { padding-left: 0px; }

#secondary .box .split li { width: 120px; }

#secondary .box .split li a { 
    width: 110px; 
    padding: 4px 0 4px 10px;
    background: url('/img/bullet.png') no-repeat 1px 10px;
    }

    #secondary .box  .split li a:hover { background-position: 1px -195px; }




/* Directory Map Styles */

#secondary .box.map-secondary embed {
    margin-bottom: 10px;
    }

   #secondary .box.map-secondary select {
      width: 65px; height: 17px;
      float: left;
      background-color: #004c80;
      border: 0;
      margin: 0 10px 4px 0; padding: 2px;
      width: 138px; height: 23px;
      color: #f3f9fd; font-size: 11px; line-height: 19px;
      }

   #secondary .box.map-secondary .enlarge-btn {
      width: 110px; height: 23px;
      display: block;
      float: left;
      background: url('/theme/img/directory-enlarge-btn.png') no-repeat left top;
      }

      #secondary .box.map-secondary .enlarge-btn:hover { background-position: left -23px; }
      #secondary .box.map-secondary .enlarge-btn span { display: none; }

   #secondary .box.map-secondary #map-secondary a { 
      width: 250px; height: 133px;
      display: block;
      background: url('/theme/img/secondary-map-backup.png') no-repeat left top;
      }












/* FOOTER STYLES */

footer {
   background: #0082d5 url(/theme/img/footer.png) repeat-x center top;
   width: 100%;
   padding: 0;
   margin-top: -15px;
   text-align: left;
   min-height: 300px; }

footer .top {
   border-bottom: 1px solid #0096dc;
   margin: auto; 
   padding: 40px 15px 10px 15px;
   overflow: hidden; }

/* General Form Properties */

footer input {
  background: #005388; 
  display: block;
  float: left;
  padding: 8px;
  color: #c2dcea;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1;
  border: 0; 
  cursor: pointer;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px; }
footer input:hover { background: #002a40; }
footer input:focus { 
  background: #fff;
  color: #002a40; }
  
footer input.error {
  background: #a51400; 
  }

footer button {
  background: #003856;
  padding: 4px;
  border: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  font-family: "proxima-nova-1","proxima-nova-2",helvetica,arial,sans-serif; 
  font-weight: 400;   
  color: #fff;
  font-size: 14px;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px; }
footer button:hover { background: #00190a}

footer h3 {
  display: inline-block;
  margin-right: 8px;
  padding-top: 5px;
  float: left;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  font-size: 17px; 
  font-family: "proxima-nova-1","proxima-nova-2",helvetica,arial,sans-serif; 
  font-weight: 400; }


/* Signup Form */

.join-us {
    display: inline-block;
    float: left; 
    }
    
#signup {
    display: inline-block;
    }
    
#signup ol { list-style: none; margin: 0; display: inline-block;}

#signup ol li { display: table-cell; vertical-align: top;}

#signup .email-field,
#signup .zip-field {
  margin: 0 3px 0 0; }
#signup .email-field { width: 115px; }
#signup .zip-field { width: 59px; }




/* Mobile Form */

#mobile {
  display: inline-block;
  float: left;
  margin-left: 40px; }


#mobile .phone-field {
  width: 115px;
  margin: 0 3px 0 0; }



/* Follow AFSCME */

.connect {
    display: inline-block;
    float: right;
    list-style: none; 
    }

.connect a {
  background: #003856;
  display: inline-block;
  text-align: center;
  width: 27px;
  height: 27px;
  line-height: 27px;
  font-size: 1.2em;
  margin-right: 4px; 
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px; }
.connect a:hover { background: #00a74f; }

 
/* Copyright and Credits */

footer .links {
  margin: auto;
  padding: 20px 0 30px 0;
  font-size: 10px;
  line-height: 15px;
  color: #ddeffa;
  text-align: left; }

footer a { color: #ddeffa; }
footer a:hover { color: white; }


footer .copyright {
  float: left;
  width: 740px;
  text-align: left; }

footer .copyright a { text-transform: uppercase; }

footer .credit { padding-top: 15px; }

footer .paidfor {
  display: inline-block;
  padding: 4px 6px; 
  margin: 10px 0; 
  border: 1px solid #f2f2f2; }
  
  


/* Misc classes and elements
-------------------------------------------------------------- */

#header a span, 
.title a span, 
.title span {display: none;}

.divider { 
    border-top: 1px solid #d2e9f8;
    margin-top: 20px;
    padding-top: 20px;
    }

.banner { margin: 0 0 10px 0; display: block; }

div.photo-with-caption img {
max-width: 600px;
}
 
div.post iframe {
max-width:600px;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}

hr.space {
  background: #fff;
  color: #fff;
}



/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

.hidden { display: none; }

/* Special Table CSS */

.light-gray-tr {background-color: #f2f2f2;}
.time-td {vertical-align:middle;text-align:center;}
.td-border {border: 1px #ddd solid;}
.table-header {background-color: #00a950; color: white;text-align:center;vertical-align:middle;}