/*** small-screen Global ***/

#header {min-width: 300px;}

#pageHeader img {display: none;}

#pageHeader h1 span {display: block; float: none; text-indent: none; height: 1em; padding: 1em; font-size: 1.1em; line-height: 1.3em; color: #fff; position: relative; border-bottom: 3px solid #ccc; }

#mainContent { min-width: 300px; border: none; margin: 0; padding: 0;}
.navigation .smalltext { margin-left: 0.5em;}

#mainContent p {padding-bottom: 1em;}


#mainContent h1 { background-image: none; background-color: #194B80; color: #fff; font-size: 1em; font-weight: bold; padding: 0.3em; border-bottom: 1px solid #ccc; width: 100%; line-height: 1.5em; margin: 0; z-index: 10;}
#contest-title { background-color: #fff; width: 100%; margin: 0; z-index: 10;}
#pageContent { margin: 0;}

#mainContent h2 {font-weight: bold; font-size: 1em; color: #444; line-height: 1.3em;  padding: 0.6em 0; margin: 0;}

#mainContent h3 { margin: 0; }



#mainContent table.responsive tr td.mail-in { border-width: 0;}
/*#mainContent table.responsive tr.odd td.mail-in .mailinbreakout { height: 3em; }*/


body {min-width: 320px;}

#topNav {display: none;}

.right, .left {float: none;}

.fifty, .fourty, .sixty, .thirty {width: 100%;}

.centerContent {padding: 0; width: 100%;}


/*
#pageContent #mainContent .progressNav {background: none; width: 90%; font-size: .8em; padding: .2em 0; margin: 0 2% 1.5em 2%; display: block; line-height: 1em; border-top: none; border-bottom: none;}

#mainContent .progressNav span.current {background: none; background: #eee; display: block; margin: 0; border-radius: .5em;} 

#mainContent .progressNav span {display: block; padding: .2em 2%; margin: 0;}
*/

#pageContent #mainContent .progressNav { background: none; width: 90%; font-size: .7em; padding: 0.3em 0; margin: 0 0 1.5em 0; display: block; line-height: 1.2em; border-width: 0; }

#mainContent .progressNav span.current {background: none; background: #eee; border-radius: .5em;} 

#mainContent .progressNav span { padding: 0.3em 0.4em; margin: 0 1em 0 0;}


/*
#mainContent .progressNav, #mainContent .progressNavCar, #mainContent .progressNavBoat { display: none; }
*/


#pageContent #mainContent .cssbuttons {padding: 0; margin: 1em 0;}
#pageContent #mainContent .cssbuttons a, #pageContent #mainContent .cssbuttons button { margin: 0.5em 0; }

#mainContent .cssbuttons a {display: block; padding: 1em 2%; text-align: center;}
#mainContent .cssbuttons a.positive, #mainContent .cssbuttons a.negative {display: block;}

#mainContent .cssbuttons a.negative {background: rgba(0,0,0,.2); width: 96%;}

#pageContent #mainContent .cssbuttons button {display: block; margin: 1em 0 ; width: 100%; padding: 1em 2em;}

#mainContent form fieldset.application, 
#pageContent #mainContent form fieldset,
#mainContent form fieldset.alternate {border: none; background: none; }

#mainContent form fieldset.application input, #mainContent form.application input,
#mainContent form fieldset.alternate input {border-radius: .3em; border: 1px solid #777; padding: .5em 2%; display: block; width: 90%;}
#mainContent form fieldset.alternate input.radio, #mainContent input.radio, #mainContent fieldset.alternate input.checkbox, #mainContent fieldset input.checkbox { display: inline; width: auto; }

#mainContent form fieldset.application select, #mainContent form.application select,
#mainContent form fieldset.alternate select {
  width: 90%;
  font-size: 1.3em;
}

#mainContent form fieldset.application input:focus, #mainContent form.application input:focus,
#mainContent form fieldset.alternate input:focus {background: #def; outline: none; border: 1px solid #194b80;}

#mainContent form fieldset.application label, #mainContent form.application label {font-weight: bold; color: #444; }
#mainContent form.application fieldset label {font-weight: bold; color: #444; width: 90%; margin-left: 0; text-align: left;}
#mainContent form.application fieldset label.collection_radio, #mainContent form.application fieldset li.radioblock label, #mainContent form.application fieldset ul.collection li label { width: auto; line-height: 1.3em; }

#mainContent form.application fieldset ul.collection li {
  padding: 0.7em 0;
}
#mainContent form fieldset.application legend, #pageContent #mainContent form fieldset legend {color: #194b80; padding: 0;}

#mainContent form fieldset.application ul li,
#mainContent form fieldset.application ol li,
#mainContent form fieldset.alternate ul li,
#mainContent form fieldset.alternate ol li,
#mainContent form fieldset.alternate div   {padding: .5em 0;}


#mainContent form fieldset.alternate input#cc_exp_m,
#mainContent form fieldset.alternate input#cc_exp_y, #mainContent form fieldset.alternate input.date {width: auto; display: inline; padding: .5em .5em;   margin: 0}

#mainContent form fieldset.alternate li.string.required {margin: 0; padding: .4em;}

#mainContent form.application {padding: 0; margin: 0; }
#mainContent form.application fieldset.alternate {padding: 0; margin: 0;}


#mainContent .notdoneYet, #mainContent .success, #mainContent .heresthething { width: 96%; margin: 0; padding: 0.5em; background-image: none; }

#mainContent .error {margin: 1em 0;}


.postit {width: 90%; margin: 0;}

#mainContent .cssbuttons.alternate a.big {font-size: 1em; padding: 1em; max-width: 94%; margin: 0; font-weight: normal;}




#mainContent ul.summary li em {
  display: inline-block;
  width: 100%;
  color: #444;
  font-weight: bold;
}

.postit {
  -webkit-transform: rotate(0deg);
}


/** Thanks to http://elvery.net/demo/responsive-tables/ **/

#mainContent table.responsive, 
#mainContent table.responsive thead, 
#mainContent table.responsive tbody, 
#mainContent table.responsive th, 
#mainContent table.responsive td, 
#mainContent table.responsive tr { 
  display: block; 
}


#mainContent table.responsive thead tr, #mainContent table.responsive th { 
  position: absolute;
  top: -9999px;
  left: -9999px;
}

#mainContent table.responsive tr { border: 1px solid #ccc; }

#mainContent table.responsive td { 
  border: none;
  border-bottom: 1px solid #eee; 
  position: relative;
  padding-left: 50%; 
  white-space: normal;
  text-align: left;
  line-height: 1.3em;
}

#mainContent table.responsive td:before { 
  /* Now like a table header */
  position: absolute;
  top: 1px;
  left: 1px;
  width: 45%; 
  padding-right: 1em; 
  white-space: nowrap;
  text-align:left;
  font-weight: bold;
  line-height: 1.2em;
}

/* Label the data */
#mainContent table.responsive td:before { 
  content: attr(data-title); 
}

#mainContent table.responsive td.block { 
  padding: 0.3em;
}


/*** small-screen - Election results ***/
#mainContent {
  background-image: none;
}

#mainContent div.results {
  float: none;
  width: 100%;
}

#doc.no-js #skip-link { display: block; text-align: right; }

#doc.js #control-panel { display: inline; float: right; width: 5em;}

#doc.js #control-panel .navigation {
  position: absolute;
  top: 10px; 
  right: 10px;
  background: #2B577C url(../images/header/menu-mobile-small.png) center no-repeat;
  background: rgba(6,39,68,.3) url(../images/header/menu-mobile-small.png) center no-repeat;
  margin: 0 10px;
  padding: .4em .2em; 
  opacity: .9;
  z-index: 1;
  display: block; 
  width: 28px; 
  height: 15px;
  text-indent: -100%;
  white-space: nowrap;
  border-radius: .2em;
  border-bottom: 1px solid rgba(255,255,255,.3);
  border-top: 1px solid rgba(0,0,0,.2);
  cursor: pointer;
}

#mainContent div.navigation {
  width: 100%;
  background: #fff;
}
#mainContent div.navigation div.content {
  font-size: 1.3em;
}

#doc.no-js #mainContent div.navigation {
  float: none;
}

#doc.js #mainContent.nav-visible div.navigation, #doc.js #mainContent div.navigation {
  -webkit-transition: .3s all ease;
  -moz-transition: .3s all ease;
  -o-transition: .3s all ease;    
  -ms-transition: .3s all ease;
  transition: .3s all ease; 
}

#doc.js #mainContent div.navigation {
  position: relative;
  float: left;
  margin: 0 0 0 -120%;
  padding: 0.8em;
  border-style: solid;
  border-width: 3px 3px 3px 0;
  border-color: #777;
  -webkit-box-shadow: 0 5px 5px rgba(0,0,0,.3);
  -webkit-border-radius: 0 .5em .5em 0;
  -moz-border-radius: 0 .5em .5em 0;
  border-radius: 0 .5em .5em 0;
}

#doc.js #mainContent.nav-visible div.navigation {
  position: relative;
  left: -22px;
  margin-left: 0;
  width: 80%;
  margin-bottom: 2em;
}