/* The below style sheet takes all the common elements from all of the
   DEEWR websites and sets them as defaults when building a new site. */

/* They can be over-ridden in the 320.css, 480.css, 768.css, or 992.css
   file if required. */

/* This file contains:
 *
 * - Adaptive Compatability tweaks
 * - Selections
 * - Basic typography
 * - Links
 * - Headings
 * - Lexicon / abbr
 * - Tables
 * - Horizontal Rules
 * - Images
 * - Image Gallery
 * - Columns
 * - Blockquotes
 * - Basic Forms
 * - Two Column Boxed Styles
 * - Default menu
 * - Last modified
 * - Helpers (accessibility and handy classes)
 * - Mobile specific
 */

/***********************************/
/* maximise adaptive compatability */
/***********************************/

img, embed, object, video, table {
  max-width: 100%;
}

.ie6 img, .ie6 img, .ie6 object, .ie6 video {
    width: 100%;
}

body {
  overflow: auto;
  padding: 0;
  width: auto;
  margin: .4em 0 0;
}

/* Using border-box box-sizing by default */
/* box sizing polyfill for <IE8 (https://github.com/Schepp/box-sizing-polyfill) */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url('../scripts/boxsizing.htc');
}

/*================*/
/* Selections     */
/*================*/

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/********************/
/* Basic typography */
/********************/

body {
  font-family: Trebuchet, Verdana, Segoe, sans-serif;
  color: #444;
  line-height: 1.5em;
}

/* Don't use the font-face in IE6 or IE7 due to poor rendering support. */
.ie6 body, .ie7 body {
  font-family: Trebuchet, Verdana, Segoe, sans-serif;
}

/* Languages other than english */
/* Special character support isn't great in webfonts, so revert to Trebuchet */
.lote {
    font-family: Trebuchet, Verdana, Segoe, sans-serif!important;
}

p {
  margin: 0 0 1em;
}

strong, b {
  font-weight: bold;
}

.xstrong {
	font-weight: 900; /* ultra bold */
}

em, i {
  font-style: italic;
}

.tiny {  font-size: .6em;}
.small { font-size: .8em;}
.normal { font-size: 1em;}
.large { font-size: 1.2em;}
.xlarge { font-size: 1.4em;}

.no-break {
  white-space: nowrap;
}
.clear {
  clear: both;
}

/* Additional Image styles (when images don't load) */

img{
    font-size: .8em;
    color: #565656;
}

img:after { content:" [image]"; top: -.7em; font-size: .8em; position: relative;}

li {
  margin: 0;
}

li.no-bullets, ul.no-bullets, ul.no-bullets li {
  list-style: none;
}

ul.no-bullets {
  margin-left: 0;
  padding-left: 0;
}

/*================*/
/* Links          */
/*================*/
/* nice colour transitions for those that understand it */

a, a:active {
  color: #165788;
  }
a:visited {
  color: #403766;
}
a:hover, a:focus {
  color: #853B59;
}
/* Specifically for accessibility on keyboard focus */

a:focus, input:focus {
  -moz-outline-radius: 5px;
  -webkit-outline-radius: 5px;
  border-radius: 3px;
  outline: -moz-mac-focusring solid 2px;
  outline: auto 5px -webkit-focus-ring-color;
  outline: #60ABDF solid 2px;
}

/*================*/
/* Headings       */
/*================*/

h1, h2, h3, h4, h5, h6 {
  font-family: Trebuchet, Verdana, Segoe, sans-serif;
  font-style: normal;
  font-weight: 300;
  color: #165788;
}

/* no font-face for ie6 or ie7 */
.ie6 h1, .ie6 h2, .ie6 h3, .ie6 h4, .ie6 h5, .ie6 h6,
.ie7 h1, .ie7 h2, .ie7 h3, .ie7 h4, .ie7 h5, .ie7 h6{
  font-family: Trebuchet, Verdana, Segoe, sans-serif;
}

h3,
h4,
h5,
h6 {
  font-weight: 500;
}

h2 { font-size: 2.2em; line-height: 1.05em;}
h3 { font-size: 1.8em; line-height: 1.05em;}
h4 { font-size: 1.6em; line-height: 1.05em;}
h5 { font-size: 1.4em; line-height: 1.1em;}
h6 { font-size: 1.1em; line-height: 1.1em;}

*+h1, *+h2, *+h3, *+h4, *+h5, *+h6 {
  margin-bottom: 0.5em;
}

/*remove unecessary white space when headings butt up against each other */
h1+h2, h2+h3, h3+h4, h4+h5, h5+h6 {
  margin-top: 0;
}

#page-title {
  margin: .2em 0 .3em;
}

/*================*/
/* Lexicon / abbr */
/*================*/

a.lexicon-term, abbr {
    border-bottom: 1px dotted #2D6049;
    color: #2D6049; /* aaa green on #fff */
    cursor: help;
}

/*================*/
/* Tables         */
/*================*/
table {
    border-bottom: 1px solid #000;
    font-size: .889em;
    line-height: 1.2em;
    margin-bottom: 1.2em;
}

table caption {
  caption-side: bottom;
  text-align: left;
  border-bottom: 1px dotted #ccc;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: .6em;
}

th {
  text-align: left;
  vertical-align: top;
}

thead th {
  border-bottom: 2px solid #000;
  vertical-align: bottom;
}

tbody tr > th {
  border-right: 2px solid #000;
  border-bottom-width: 1px;
}

td {
}

td *:first-child {
  margin-top: 0;
}

td *:last-child {
  margin-bottom: 0;
}

tr {
    border-bottom: 1px solid #ccc;
    color: inherit;
    -webkit-transition: all 0.3s ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5–12.00 */
          transition: all 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */
}

/* css-based zebra stiping if supported */
tr:nth-child(2n){
    background-color: #efefef;
}

/* focus striping - horizontal by default */
tr:focus, tr:hover {
  background-color: #f5eee1; /* yellow */
  color: #222;
   -webkit-transition: all 0.3s ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.5–12.00 */
          transition: all 0.3s ease-out;  /* Firefox 16+, Opera 12.50+ */
}

/* no focus striping on headers */
thead tr:focus th, thead tr:hover th {
  background-color: #fff;
  color: #444;
}

/* Do not apply zebra striping - useful for complex tables with rowspan and colspans */
.no-stripe tr:nth-child(2n){
  background-color: #fff;
}

/* Do not apply focus striping - useful for complex tables with rowspan and colspans */
.no-highlight tr,
.no-highlight tr:focus,
.no-hightight tr:hover {
  background-color: #fff!important;
  color: #444!important;
}

table caption {
  margin-top: .8em;
}

/*================*/
/* H Rules        */
/*================*/

hr {
  width: 80%;
  text-align: center;
  border: none;
  border-bottom: 1px dotted #ccc;
}

/*================*/
/* Images         */
/*================*/

.float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: .8em;
}
.float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: .8em;
}
.float-none {
  float: none;
  clear: both;
  margin-bottom: .8em;
  text-align: center;
}

img.float-left, img.float-right {
  max-width: 50%;
}

.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}

/*===============*/
/* Image/Gallery */
/*===============*/

body .gallery-holder{
  position: relative;
  width: 100%;
  font-size: .8em;
  margin-bottom: 1.2em;
}

body .gallery-holder figure {
  line-height: 0;
  background-color: #f4eee5;
  border: 1px solid #ccc;
}
body .gallery-holder figcaption {
  line-height: 1.2em;
}

body .gallery-holder ul, body .gallery-holder li, body .gallery-holder div {
  margin: 0;
  padding-left: 0;
  list-style: none;
  text-align: center;
}

body .gallery-holder li {
  border: 0 solid transparent;
}

body .gallery-holder .image-caption {
  border-bottom: 0 dotted transparent;
  padding: 0.8em 1.2em;
}

.js body #image-controls {
  top: 1em;
  right: 1em;
  bottom: auto;
  left: auto;
  padding: 0;
  font-size: .8em;
}

/*================*/
/* Columns        */
/*================*/

.two-columns {
  -webkit-column-count: 2;
  -webkit-column-gap: 30px;
  -webkit-column-rule: 1px dotted #ccc;
  -moz-column-count: 2;
  -moz-column-gap: 30px;
  -moz-column-rule: 1px dotted #ccc;
  column-count: 2;
  column-gap: 30px;
  column-rule: 1px dotted #ccc;
}

.three-columns {
  -webkit-column-count: 3;
  -webkit-column-gap: 30px;
  -webkit-column-rule: 1px dotted #ccc;
  -moz-column-count: 3;
  -moz-column-gap: 30px;
  -moz-column-rule: 1px dotted #ccc;
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px dotted #ccc;
}

.two-columns > *, .three-columns > * {
  margin-top: 0;
}

.two-columns div, .three-columns div {
  display: inline-block;
}

/*================*/
/* Blockquote     */
/*================*/

/* expecting the following syntax for blockquote with source:
 * <figure class="blockquote">
      <blockquote>Finding out the strengths and weaknesses of the program will enable greater understanding of where things need fixing.</blockquote>
      <figcaption><span class="source">Source:</span> <a href="mailto:james@gmail2.com">Sen. James O'Stanus</a></figcaption>
    </figure>
 * Or, simple blockquote without source:
    <blockquote>
      <p>These should be grouped. This should appear on the same line.</p>
      <p>This should be a new paragraph.</p>
    </blockquote>
*/


/* Blockquote inside a figcaption or similar container or a straight up blockquote */
.blockquote, blockquote {
  border-left: 6px solid #ce8e00; /* yellow version */
  background-color: #f5eee1;
  margin-left: 2em;
  margin-right: 2em;
  padding: .6em 1em .6em;
}

/* Remove unwanted duplicate styles */
.blockquote blockquote {
  margin: 0;
  border-left: 0px solid transparent;
  margin-left: 0em;
  padding: 0;
}

blockquote p {
  margin-top: 0;
}

/* whatever is the last item in the blockquote - don't add to the bottom margin */
blockquote *:last-child {
  margin-bottom: 0;
}

figure {
  margin-bottom: 1.5em;
}

figcaption {
  font-size: .833em;
}

table caption, .source {
    font-size: .833em;
}

table caption .source, figcaption .source {
  font-size: 1em;
}

/*==================*/
/* Definition Lists */
/*==================*/

dt {
  font-weight: bold;
}
dd {margin-left: 0;}

dd+dt {
  margin-top: .8em;
}

/*================*/
/* Boxed Style    */
/*================*/

/* expecting the following syntax for boxed elements:
 * <div class="focus">
      <p>Whatever</p>
   </div>
*/

/* Similar styling to a blockquote with a different colour and none of the semantic meaning. */
.boxed, .boxed.green {
  border-color: #478a58; /* in case other selectors need to change the position of the border */
  border-left: 6px solid #478a58; /* green by default */
  background-color: #eef6f0;
  margin-left: 2em;
  margin-right: 2em;
  padding: .6em 1em .8em;
  color: #222; /* darker text */
}

.boxed.no-margin {
  margin-left: 0;
  margin-right: 0;
}

.boxed.no-border {
  border: 0 solid transparent!important;
}

.boxed.menu-size-text {
  font-size: .722em;
}

.boxed *:first-child {
  margin-top: 0;
}

.boxed *:last-child {
  margin-bottom: 0;
}

.boxed.purple {
  border-color: #593574;
  background-color: #ece4f2;
}
.boxed.yellow {
  border-color: #d09b3f;
  background-color: #f5eee1;
}
.boxed.olive {
  border-color: #827c34;
  background-color: #e5e4dd;
}
.boxed.blue {
  border-color: #046293;
  background-color: #e9eef2;
}
.boxed.red {
  border-color: #a75533;
  background-color: #f0e6e2;
}

/*=============*/
/* Basic Forms */
/*=============*/

#content form {
  border: 1px solid #f3f3f3;
  background-color: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 1em;
}

#content .form-item {
  margin: 0 0 .5em;
}

/* style the currently active form item */
#content .form-item.focus {
  color: #000;
}

input, select, textarea, input[type="search"] {
  max-width: 100%;
  background-color: #f3f3f3;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: .9em;
}

form .form-item .description {
  margin-top: 0em;
  padding: .5em .8em .5em 2em;
  position: relative;
  color: #565656;
  font-size: .833em;
}

form .description:before {
  position: absolute;
  content:" ";
  height: 0;
  width: 0;
  top: .8em;
  left: .6em;
  border: 5px solid #fff;
  border-bottom-color: #045d8b;
  }

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

legend small {
  font-size: .8em;
  color: #999999;
}

label,
input,
button,
select,
textarea {
  font-weight: normal;
}


/* simplify the font for forms */
input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
}

select {
  font-size: .9em; /* slightly smaller because it looks awkward at full size */
}


label {
  display: block;
  margin-bottom: 5px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.form-managed-file {
  display: inline-block;
  padding: .2em;
  margin-bottom: 0px;
  color: #555555;
  background-color: #f3f3f3;
  vertical-align: middle;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

textarea {
  height: auto;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.form-managed-file {
  background-color: #f3f3f3;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus
  {
  border-color: #333; /* fallback for non rgba browsers */
  color: #222;
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;  /* IE6-9 */


  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

input[type="radio"],
input[type="checkbox"] {
  margin: -4px 0 0;
  margin-top: 1px \9;
  *margin-top: 0;
  line-height: normal;
  cursor: pointer;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

select,
input[type="file"] {
  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */
}

select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}

select[multiple],
select[size] {
  height: auto;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}

.radio,
.checkbox {
  min-height: 20px;
  padding-left: 20px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -20px;
}

/* Workbench specific styles */
form.workbench-moderation-moderate-form,
form.workbench-moderation-moderate-form div,
form.workbench-moderation-moderate-form label {
  display: block;
}

/*==================*/
/* Two-column Boxed */
/*==================*/

/* expecting the following syntax for boxed elements on eZines:
   This is a variation which could be used on modern browsers combining
   .boxed and .two-columns with the different being the two columns don't merge
   and are kept separate (split).

 * <div class="boxed two-column-split">
      <div>
        <p>Whatever (column 1)</p>
      </div>
      <div>
        <p>Whatever (column 2)</p>
      </div>
   </div>
*/

.boxed.two-column-split {
  border-width: 0;
  border-top-width: 3px;
  border-top-style: solid;
  padding: 0;
  margin: auto 1em;
}

.two-column-split div {
  font-size: .833em; /* 15pt @18 */
  width: 50%;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em;
  float: left;
}

.two-column-split div ul,
.two-column-split div ol {
  padding-left: 1em;
}

.ie6 .two-column-split div,
.ie7 .two-column-split div {
  width: 45%;
}

.two-column-split div:first-child {
  border-right: 1px solid #fff;
  /* tint column 1 where supported */
  background-color: rgba(255, 255, 255, .3);
}

.ie6 .two-column-split div,
.ie7 .two-column-split div {
  width: 45%;
}

/*=================*/
/* Default UL Menu */
/*=================*/

/* horizontal */

ul.menu {
  padding-left: 0;
  overflow: hidden; /* clears the floated li's */
}

ul.menu li {
  list-style: none;
  padding: 0;
  float: left;
}

ul.menu a {
  display: block;
  padding: .3em .5em;
}

/* stacked */

ul.menu.stacked li {
  float: none;
}


/*================*/
/* Last Modified  */
/*================*/

.last-modified {
  font-size: .8em;
}

/*================*/
/* Helpers        */
/*================*/
/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/* Hide for both screenreaders and browsers: h5bp.com/u */
.hidden {
    display: none !important;
    visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
   nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

/*=================*/
/* Mobile specific */
/*=================*/

/* Hide content that's only needed on mobile and small screens - include support for non media-query
   capable machines first */

.mobile-only {
  display: none;
}
.no-mobile {
  display: block;
}

@media all and (max-width: 768px) {
  .mobile-only {
    display: block;
  }
  .no-mobile {
    display: none;
  }
}