/********* Defaults **********
 ****  ***** *****  ***  *   * *     *****
 *   * *     *     *   * *   * *       *
 *   * ***   ***   ***** *   * *       *
 *   * *     *     *   * *   * *       *
 ****  ***** *     *   *  ***  *****   *
*/

/* resets */
* {
  margin:0;
  padding:0;
  outline:0;
}

*, *::before, *::after {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.clearfix::after,.clearfix::before {
  content:"";
  display:table
}

.clearfix::after { 
  clear:both
}

.hidden {
    display:none;
}

.clear {
  clear:both;
}

html {
  min-height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased!important  
}

html, body, img {
  border:0;
}

body {
  font-size:16px;
  line-height:24px;
  font-weight:normal;
  background-color:#fff;
  color:#333;
  overflow-x:hidden;  
  font-family: 'Droid Serif', serif;
}

h1, h2, h3, h4 {
  margin:10px 0 10px;
}

ol, ul {
  list-style:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

a {
  color:#1d5796;
  text-decoration:none;
}

a:hover {
  color:#f30;
  text-decoration:none
}

a:focus, a:active {
  color:#f30;

}

/* main structure */
#wrapper {
  text-align:left;
  position: relative;
  background-color:#fff;
}

.container {
  margin-left:auto;
  margin-right:auto;
}

#header {
}

#logo {
  text-align:center;
  font-weight:bold;
}

/* nav bar */
#nav {
  width:100%;
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;  
  margin:10px 0 10px 0;
  padding:5px;
  float:left;
  text-align:center;
}

#nav ul li {
  display:inline;
}

#main {
  clear:both;
  padding:0 10px 0 10px;
}

/* breadcrumb */
#breadcrumb {
  margin:0 0 10px 0;
}

/* footer */
#footer {
  border-top:1px solid #ccc;
  border-bottom:1px solid #ccc;
  float:left;
  width:100%;
  margin-top:10px;
  padding:5px;
  text-align:center;
}

#footer ul li {
  display:inline;
}

/* flexible columns */
.row {
  margin: 0 -5px;
  margin-bottom: 0px;
}

.row:last-child {
  margin-bottom: 0;
}

[class*="col-"] {
  padding: 5px;
  float:left;
}

/* std text page */
.std p, .std table, .std hr {
  margin-bottom:1em;
}

.std ul {
  list-style: disc outside;
  margin-bottom:1em;
}

.std li {
  display: list-item;
  text-align: -webkit-match-parent;
  margin-left: 2em;
  margin-bottom:0.4em;
}

.std table {
  margin-bottom:1em;
  border:1px solid #ccc;
}

.std table th, .std table td {
  padding:5px;
  border:1px solid #ccc;
}

.std img {
	max-width:100%;
}

/********* Desktop *********
 ***   *****  ***  *   * *****  ***  ****
 *  *  *     *     *  *    *   *   * *   *
 *   * ***    ***  **      *   *   * ****
 *  *  *         * *  *    *   *   * *
 ***   *****  ***  *   *   *    ***  *
*/
@media only screen and (min-width: 1000px) {

body {
  min-width:1020px;
}

.container {
  max-width:1020px;
}

.container.main {
  padding:10px;
}

}

/********* Anything over portrait tablet *********
 *****  ***  ****  *     ***** *****
   *   *   * *   * *     *       *  
   *   ***** ****  *     ***     *  
   *   *   * *   * *     *       *  
   *   *   * ****  ***** *****   *  
*/
/*@media only screen and (min-width: 660px) {*/
@media only screen and (min-width: 737px) {

body {
  text-align:center;
}

/* main structure */
#wrapper {
  margin-bottom:10px;
}

#logo {
  font-size:36px;
  line-height:40px;
  margin-top:10px;
}

#nav ul li {
  margin:0 20px 0 0;  
}

/* breadcrumb */
#breadcrumb {
  font-size:12px;
}

/* footer */
#footer {
  font-size:12px;
}

#footer ul li {
  margin:0 20px 0 0 ;
}

/* flexible columns */
.col-1-1 {
  width:100%;
}

.col-1-2 {
  width:50%;
}

.col-1-2:nth-child(2n+1) {
  clear: both;
}

.col-1-3 {
  width:33.33%;
}

.col-1-3:nth-child(3n+1) {
  clear: none;
}

.col-2-3 {
  width:66.66%;
}

.col-1-4, .col-1-4.full {
  width:25%;
}

.col-1-4:nth-child(2n+1) {
  clear: none;
}

.col-1-8 {
  width:12.5%;
}

.col-1-8:nth-child(4n+1) {
  clear: none;
}

.col-3-4 {
  width:75%;
}

}

/********* Tablet Portrait / Large Mobile Landscape **********
 *****  ***  ****  *     ***** *****      ****   ***  ****  *****
   *   *   * *   * *     *       *        *   * *   * *   *   *
   *   ***** ****  *     ***     *        ****  *   * ****    *
   *   *   * *   * *     *       *        *     *   * *   *   *
   *   *   * ****  ***** *****   *        *      ***  *   *   *
*/
/*@media only screen and (min-width: 660px) and (max-width: 999px) {*/
@media only screen and (min-width: 737px) and (max-width: 999px) {

body {
  min-width:100%;
}

/* main structure */
.container {
  max-width:999px;
}

.container.main {
  padding:5px;
}

/* flexible columns */
.col-1-4, .col-1-4.full {
  width:50%;
}

}

/*************** Mobile ****************
 *     *  ****  ****  ***** *     *****
 **   ** *    * *   *   *   *     *
 * *** * *    * ****    *   *     ***
 *     * *    * *   *   *   *     *
 *     *  ****  ****  ***** ***** *****
*/
/*@media only screen and (min-width: 0px) and (max-width: 659px) {*/
@media only screen and (min-width: 0px) and (max-width: 736px) {

body {
  max-width:736px; /*was 660*/
  width:100%;
}

/* hide stuff we don't want on small screen */
.mobile_hide  {
  display:none;
}

h1 {
  font-size:1.6em;
}

h2 {
  font-size:1.3em;
}

h3 {
  font-size:1.1em;
}

/* main structure */
#wrapper {
  max-width:736px; /*was 660*/
  width:100%;
  overflow:hidden;
}

.container {
  width:100%;
}

#logo {
  font-size:24px;
  line-height:30px;
  margin-top:5px;
}

#nav ul li {
  margin:0 10px 0 0;  
}

/* breadcrumb */
#breadcrumb {
  font-size:10px;
}

/* footer */
#footer {
  font-size:10px;
}

#footer ul li {
  margin:0 10px 0 0 ;
}

/* flexible columns */
.col-1-1 {
  width:100%;
}

.col-1-2 {
  width:100%;
}

.col-1-3 {
  width:50%;
}

.col-1-3:nth-child(2n+1) {
  clear: both;
}

.col-1-3.full {
  width:100%;
}

.col-1-4 {
  width:50%;
}

.col-1-4.full {
  width:100%;
}

.col-1-4:nth-child(2n+1) {
  clear: both;
}

.col-1-8 {
  width:25%;
}

.col-1-8:nth-child(4n+1) {
  clear: both;
}

.col-1-4 img, .col-1-8 img {
  /*width:100%;*/
}

.col-3-4 {
  width:100%;
}

}


















