/*updated 7.11.13 - Responsive CSS for Mobile - AEL*/
/*theme overrides here will be included in base CSS */
div.fnc {
 width:70%; 
}
h3.category {
 font-size:1em;
}
.button_panel input[type="submit"] {
  /* min-width: 30%; */
}
#tabs {
  border-bottom: 2px solid #c6c6c6;
  overflow:visible;
}
#tabs li {
  margin-right:3px;
}
#tabs li:last-of-type {
  margin-right:0;
}

#quick_subscribe_confirmation div.button_panel {
  margin-top: 15px;
}
button.treeExpand {
  margin-left:0px;
}

@media only screen and (min-width: 768px) {
  div.featured_network input {
    transform: scale(1,1);
    -ms-transform: scale(1,1);
    -webkit-transform: scale(1,1);
  } 
}
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/


/* CSSIW custom styling - deployed on ... */

/* Font overrides */
html,
body#sub,
h1, h2, h3, h4, h5
 {
  font-family: Arial, Helvetica, sans-serif!important;
}

#page_margins {
  margin-top: -35px!important;
}

body#sub {
      box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  background: #f3f3f3!important;  
  border-top: 35px solid #008ca8;
}

hr {
  width: 100%;
}

/* Main content background */
#page, 
div.qs_banner {
  background:#fff!important;
}

#page {
  padding-bottom: 30px!important;
}

a {
  color: #008ca8;
  cursor: pointer!important;
}

/* Specific colour overrides */

#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page p {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif!important;
}

#col3 a {
    color: #93e3f3;
  }

div.fnc span.partner_subscriptions {
    color: #fff!important;
  }

  div.fnc span.title, 
  div.fnc span.subtitle,
  div#quick_subscribe_email_instructions, 
  div#quick_subscribe_password_instructions, 
  div#quick_subscribe_topic_unsubscribe_instructions, 
  div#digest_instructions {
  color: #fff!important;
}

  /*  background colour overrides */
form, 
.panel, 
.data-table tr {
   background: none!important;
   border:none!important;
 }

#col3 > .errorExplanation {
  background:#C33720!important;
  border-left:10px solid #C33720;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
} 

#col3 > .errorExplanation h2 {
  padding: 3px 0 4px 70px;
  margin-left: 0px;
  
}

#col3 > .errorExplanation ul {
  color:#fff!important;
  padding-left:70px;
} 


.promo-bar .button-panel a {
    color: #fff!important;
  }
.promo-bar h2 {
  color: #008ca8!important;
}

.promo-bar .title-panel h2 {
  color:#000!important;
}

#col3 {
  margin:0;
  padding: 15px 0 30px 0;
  width:700px;
}
 div.qs_banner {
  padding-bottom:0;
 }

 p.name {
  padding: 10px 0 0;
  text-align: left;
 }

h1, 
h2 {
  color: #403e3e;
  font-weight: normal;
  margin:0 0 15px;
}

h1 {
  font-size: 1.750em;
  line-height: 1.2em;
}

 #page h1,
 #page h2 {
  color:#fff;
  font-size: 1.5em;
  margin-bottom: 15px;
 }

 #col3 {
  background:#008ca8!important;
  color: #fff!important;
  width:auto!important;
 }

 legend {
  color: #fff!important;
  margin-left: 0!important;
  font-weight: normal!important;
  font-size: 1.5em!important;

 }

 /* left right margins */
#col3 > form {
    margin-left:22px;
    margin-right:22px;
  }

#quick_subscribe_new,
form,
fieldset {
    width: auto;
    margin:0;
    padding: 0;
}

  #col3 > h1, 
  #col3 > h2, 
  #col3 > p,
  #col3 > p.name, 
  #col3 > #quick_subscribe_account_salutation,
  #subscription_success,
  #quick_subscribe_preferences_instructions, 
  #quick_subscribe_preferences_instructions,
  #quick_subscribe_name,
  #quick_subscribe_confirmation, 
  #quick_subscribe_panel,  
  #col3 > .button_panel, 
  #col3 > #tabs, 
  #col3 > .tab-content {
  margin-left: 22px;
  margin-right: 22px;
 }
#col3 {
  margin: 20px 10px;
}

ol.form li {
    border-top: none!important;
  }

  /* Preferences tabs and tables */
#tabs {
  border-bottom: none;
  padding-top: 20px;
} 

 .nav-tabs a {
  background: #1bbad9;
  border-radius: 0;
  border: none;
  color: #fff!important;
  text-shadow:0;
  font-weight: normal;
  padding:15px;
 }

 .nav-tabs a:hover {
  background: #004c5b;
 }

 .nav-tabs li.active a {
  background: #004c5b;
  border:none;
  text-shadow:none;
 }

 .tab-content {
    padding: 20px 0!important;
}

 .tab-content .panel {
  margin-left: 0!important;
  margin-right: 0!important;
  padding:0!important;
  border: none!important;
 }



 .data-table {
  border-bottom: none;
 }

.data-table tr td {
  padding: 20px;
  color:#004c5b!important;
  border-bottom: 1px solid #1bbad9;
  background: #5fbccf;
}

.data-table tr th {
  border-color: #fff;
  border-width: 1px;
  background: #0097b5;
  padding: 15px 20px;
}
 .data-table tr th:last-of-type {
  border-right: none!important;
 }

 .data-table tr th:first-of-type {
  border-left: 0!important;
 }

/* Button styles */

/* Button styles */
#col3 > .button_panel {
  margin:20px 0 20px 22px!important;
}

.form_button, 
.sr-form-button, 
.first-button {
  padding: 10px 30px!important;
  margin:10px 10px 0 0!important;
  background:#1bbad9!important;
  color: #fff!important;
  font-weight: normal!important;
  font-size: 0.875em!important;
  border: none!important;
  border-radius:0!important;
  cursor: pointer;
  -webkit-box-shadow: 3px 3px 0px rgba(0, 76, 91, .7)!important;
  box-shadow: 3px 3px 0px rgba(0, 76, 91, .7)!important;
  text-shadow:none!important;
  -webkit-transition: background 0.1s ease-in;
  -moz-transition: background 0.1s ease-in;
  -o-transition: background 0.1s ease-in;
  transition: background 0.1s ease-in;
}

.form_button:hover, 
.sr-form-button:hover, 
.first-button:hover {
  background: #004c5b!important;
}

.cancel_button {
  background: #bbb!important;
}

div#quick_subscribe_email_instructions, 
div#quick_subscribe_password_instructions, 
div#quick_subscribe_topic_unsubscribe_instructions, 
div#digest_instructions {
  padding: 0;
}

.bar-bottom,
.title-bar {
  background: #008ca8!important;
  border-radius: 0px!important;
  border:none!important;
}

input {
    font-size: 0.813em!important;
    outline: none!important;
    border-top: 2px solid #004c5b!important;
    border-bottom: 1px solid #fff!important;
    border-left: 2px solid #004c5b!important;
    border-right: 1px solid #fff!important;
    text-align: left!important;
}

form label {
  font-weight: normal!important;
  font-size: 1em!important;
  line-height: 1.2em!important;
  letter-spacing: 0.01em!important;
}

form p {
  font-size: 1.125em!important;
  line-height: 1.4em!important;
  font-weight:normal!important;
  }

  .button_panel {
    margin-bottom: 15px;
  }

  .button_panel > form {
    background:none!important;
  }

/* 
==========================================================================
Media queries
==========================================================================
*/


@media all and (max-width: 960px) {

  /* Width overrides */
  
  #col3
  {
    width: auto!important;
  }
    
  fieldset ol.form input[type="text"].long, fieldset ol.form input[type="password"].long, 
  fieldset ol.form input[type="text"], fieldset ol.form input[type="password"] {
    width: 380px!important;
  }

  /* Left and right margins */

#col3 > h1, 
#col3 > h2, 
#col3 > p, 
#col3 > form,
#col3 > #topic_unsubscribe_text,
#col3 > #quick_subscribe_account_salutation,
#col3 > #quick_subscribe_preferences_instructions,
#col3 > #quick_subscribe_panel,
#col3 > .button_panel, 
#col3 > .tab-content,
#col3 > #tabs,
#col3 > p.name,
#col3 > .flash,
#col3 > .errorExplanation,
#col3 > .errorExplanation h2,
#col3 > .errorExplanation ul,
#col3 > #quick_subscribe_confirmation,
#col3 > #subscription_success
  {
    width: auto!important;
    margin-left: 3%!important;
    margin-right: 3%!important;
    padding-left: 0!important;
    padding-right: 0!important;
  }
  #message
     {
    margin-left: 6%!important;
    margin-right: 6%!important;
  }
#col3 > .errorExplanation h2,
#col3 > .errorExplanation ul {
  background: none!important;
}

.flash .flash-icon.icon-message {
  margin-left: 6%;
}
  
  fieldset ol.form {
    margin-top:20px!important; 
    margin-bottom:20px!important;
  }

  #col3 {
  padding-left: 0!important;
  padding-right: 0!important;
  }
} 

@media only screen and (max-width: 767px) {

body#sub {
  border-top: none;
}

#page_margins {
  margin-top: -5%!important;
}

#quick_subscribe_new, form, fieldset {
  width: auto!important;
}

  #page_margins {
    width:90%!important;
  }

  #col3 {
  padding-top: 10px!important;
  padding-bottom: 20px!important;
  }
  #col3 h1 {
    padding-bottom: 10px!important;
    margin-bottom: 10px!important;
  }
  #col3 p {
    margin-top: 0!important;
    margin-bottom: 10px!important;
  }
  div.qs_banner {
    padding-bottom: 1%!important;
  }
  table#topics {
    width: 95%!important;
  }  
}

@media only screen and (max-width: 480px) {
  /* Left and right margins */

   #col3 h1 {
    padding-bottom: 10px!important;
    margin-bottom: 10px!important;
    line-height: 1.2em!important;
  }
  h1, 
  h2,
  fieldset#quick_subscribe_topic_unsubscribe legend {
    font-size:1em!important;
  }
  #col3 p {
    font-size:.875em!important;      
    line-height: 1.5em;
  }
  fieldset ol.form,
  fieldset ol.form input[type="text"].long, fieldset ol.form input[type="password"].long, 
  fieldset ol.form input[type="text"], fieldset ol.form input[type="password"],
  fieldset ol.form label {
    width: 98%!important;
  }
    table#topics {
    width: 90%!important;
    padding-left: 0!important;
    padding-right: 0!important;
  }  
  .nav-tabs li {
    display: block!important;
  }
  .nav-tabs li a {
    display: block!important;
    margin-bottom: 5px;
    width: 85%!important;
    float:left;
    clear: both;
  }
  .nav-tabs li:last-of-type a {
    border:none;
  }
.data-table tr td,
.data-table tr th {
  font-size: 0.875em;
  line-height: 1.1em;
  white-space: normal;
}

.flash .flash_text_content .message-copy {
  font-size: .75em!important;
  line-height: 1.2em;
}
}