/**
 * Primary styles - H5BP4J
 * Author: ......
 * version: .....
 */

/* ******** LAYOUT ******************* */
html {
	padding:0;
	margin:0;
}

body {
	font-family: Verdana, Tahoma, sans-serif;
	/* font-family: Comic Sans MS, Verdana, Geneva, sans-serif; */
	line-height: 1.1rem;
	font-size: 0.9rem;
	background-color: #f0f2c2;   /* banner and outside of frame background color */
	width: 100%;
	height: 100%;
	margin-top: 0px;
	padding-top: 0px;
	top: 0px;
	margin-left: 0px;
	padding-left: 0px;
	left: 0px;
	/*overflow: hidden;*/
}

#background {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-attachment: fixed;
	z-index: 1;
}

#header, #content, #bottom, #footer {
width:100%;
margin:0 auto;
max-width:960px;
}

#header {
background-color: rgb(0, 0, 0) transparent; /* Fallback for browsers not support RGBa */
background-color: rgba(0, 0, 0, 0);
position:relative;
height:125px;
}
/* header background image defined in hbg-1 class, at the end of this file */

#content {
background: #FFFFFF;  /* light olive green #E0ECC8; */
color: #435616;
width: 100%;
height: 100%;
min-height:300px;
overflow:hidden; /*auto stretch height */
}

#content img { 
   border:0 solid #000000;
}

#left{
float:left;
width: 19%;
margin-bottom:10px;
}

#right {
float:right;
width: 19%;
margin-bottom:10px;
}

#bottom {
background:#fff;
overflow:hidden;/*auto stretch height */
}

#footer {
min-height:20px;
clear:both;
font-size:0.8rem;
/*background:#97C908;
color:#FFFFFF;*/
padding:5px 0 5px 0;
}
#footer p {
display: block;
text-align:right;
}

#footer div {
margin:0 5px;
}

/* ******* Whitebox *******/
#whitebox {
	margin: 0;
	width: auto;
}

#whitebox div {
	text-align: left;
}

#whitebox_t {

}

#whitebox_tl {

}

#whitebox_tr {
	height: 20px;
	overflow: hidden;
}

#whitebox_m {
	margin:0 auto;
	max-width:960px;
	border-bottom: 0; /*solid 6px #fff;*/
	border-left: 0;   /*solid 6px #fff;*/
	border-right: 0;  /*solid 6px #fff;*/
}

#header_m {
	margin:0 auto;
	max-width:960px;
	border-top: 0;   /*solid 6px #fff;*/
	border-left: 0;  /*solid 6px #fff;*/
	border-right: 0; /*solid 6px #fff;*/
}

/* ********************************************************************************* */
/* blue */
#page_bg {
}

div#wrapper_l {
  display: block;
  position: relative;
  z-index: 5;
}

div#wrapper_r {

}

/* ++++++ in content */

.centerWide {
float: left;
width: 98%;
padding:1%;
}

.centerAndLeft {
float: right;
width: 78%;
padding:1%;
}

.centerAndRight {
float: left;
width: 78%;
padding:1%;
}

.centerNarrow {
float: right;
width: 77%;
padding:1%;
overflow:hidden;
}

#wrapper {
float: left;
width: 78%;
}

/* and make sure that imgs do not have height declared, e.g. by editor */
.centerAndLeft p img,
.centerAndRight p img,
.centerNarrow p img,
#left img, #right img {
max-width: 100%;
margin:0 5px;  
}

/* ++++++ in header */

#logo {
/*	margin-left:0;
	text-align: center;
	height:80px;
	background: url(../images/logo.png)  top left no-repeat;*/
}

#logo a, #logo a:link, #logo a:hover {
	font-family: AvantGarde Md BT, Arial, Verdana, sans-serif;
	font-size: 1.1em;
	padding:0;
	margin:0;
	line-height:1.5em;
	color:#000000;
	text-decoration:none;
}
#logo h1 {
        padding:2%;
        position: absolute;
        text-align: left;
        top: 10px;
	font-family: AvantGarde Md BT, Arial, Verdana, sans-serif;
	font-size: 2.5em;
	color:#006600;
}
#logo h2 {
        width:96%;
        padding:2%;
        position: absolute;
        text-align: right;
        top: 10px;
	font-family: FrankRuehl, serif;
	font-size: 2.8em;
	color:#006600;
}
#logo h3 {
        padding:2%;
        position: absolute;
        text-align: left;
        top: 40%;
	font-family: AvantGarde Md BT, Arial, Verdana, sans-serif;
	font-size: 1.1em;
	color:#000000;
}
#logo h4 {
        width:96%;
        padding:2%;
        position: absolute;
        text-align: right;
        top: 40%;
	font-family: AvantGarde Md BT, Arial, Verdana, sans-serif;
	font-size: 1.1em;
	color:#000000;
}
#logo h5 {
        width:90%;
        padding-left:10%;
        position: absolute;
        text-align: left;
        top: 15%;
	font-family: AvantGarde Md BT, Arial, Verdana, sans-serif;
	font-weight: 100;
	font-size: 2.1em;
	color:#ffffff;
}
#logo_text {
        width:100%;
}

img.center {
        vertical-align:bottom;
        display: block;
        margin-left: auto;
        margin-right: auto;
}

#tagline {
position:absolute;
top:80px;
left:10px;
width:80%;
height:80px;
overflow:none;
color:#222;
font:24px Times New Roman;
font-style:italic;
}

#mywrapper li {
    display: inline;
    float: right;
}

#mywrapper .nav a {
    display: block;
    margin: 7px;
    border: 1px solid black;
    margin-right: 0;
}

#topmenu {
    position: relative;
    left: 10%;
/*    transform: translateX(-50%);*/
    top: 20%;
/*    bottom:-40px;      /* raises menu above content */
    text-align:center;   /* ltr */
    z-index:10;
}

#search {
position:absolute;
right:2px;
bottom:2px;
}

#search input {

}

#banner {
position:absolute;
top:-20px;
right:30px;
width:60%;
height:80px;
overflow:none;
color:#fff;
text-align:right;
}

#banner img {
max-width:100%;
}

/* ******** TYPOGRAPHY ************** */

h1, #main h1 {
    font-size: 2.0rem;
    margin:0.6rem 0;
    padding:5px 0;
}

h2, #main h2 {
    color:#7BA428;
    font-family: 'Titillium Maps', Arial;
    font-size: 1.2rem;
    margin:0.6rem 0;
}

.item-separator
{
	width: 90%;
	border: 1px solid #ccc;
}

.items-row h2
{
	color:#7BA428;
	border-top:solid 1px #ddd;
	border-bottom:solid 1px #ddd;
}
.items-row h2 a:link,
.items-row h2 a:visited
{
	color:#7BA428 !important;
}

.items-row h2 a:hover,
.items-row h2 a:active,
.items-row h2 a:focus
{color:#fff !important;
text-decoration:none !important
}

#main h2 a
{
	font-family: 'Titillium Maps', Arial;
	color:#7BA428;
}

h3, #main h3 {
    font-size: 1.3rem;
    margin:0.6rem 0;
}
h4 {
    font-size: 1.2rem;
    margin:0.6rem 0;
}
h5 {
    font-size: 1.0rem;
    font-weight: bold;
    margin:0.6rem 0;
}
h6 {
    font-size: 0.9rem;
    font-weight: bold;
    margin:0.5rem 0;
    text-align:center;
}

#left h3, #right h3 {
    font-size: 1.1rem;
    margin:0.5rem 0 0.5rem 5px;
}

p {
    margin: 0 0 1em;
    margin-bottom: 0.14in;
    line-height: 150%;
    font-size: 0.9rem; /* was medium; */
}

p.last {
    margin-bottom: 0 !important;
}




/* ******** LINKS ************** */

a, a:active, a:focus {
color:blue;
text-decoration:underline;
font-weight:normal;
outline:0;
}

a:visited {
color:#333;
}

a:hover {
color:#555;
}

h1 a, h2 a, h3 a {
text-decoration:none;
outline:0;
}

#logo a {
color: #000;
padding: 0;
text-decoration:none;
}

#logo a img {
/*width:100%;
max-width:200px;*/
float:left;
}

#footer a {
color:#174986;
}



/* ******** MENU **********/

#left ul.menu li,
#right ul.menu li  {
border-bottom:1px solid #eee;
/* width:99%; */
}

ul.menu a:hover{
background:#c2e6a3;
}

ul.menu a {
text-decoration:none;
display:block;
line-height:1.4rem;
}

#left ul, #right ul  {
list-style:none;
padding:0 0 0 7px;
margin:0;
}

#left ul.menu  li.current a,
#right ul.menu  li.current a {
font-weight:bold;   
}

#left ul.menu li.current ul li a,
#right ul.menu li.current ul li a {
font-weight:normal;   
}


/* ******** TOP MENU **********/

#topmenu ul {
list-style:none;
padding:0;
}

#topmenu ul li 
{
display: block;
text-align:center;
text-decoration: none;
float:left;  /* ltr */
min-width:60px;
font-size:1.0rem;
font-weight:bold;
margin:12px 20px 0 0;
    background-color:#f0f2c2;
border:0px;
opacity:0.9;
}

#topmenu li:first-child {
margin-left:3px;
border-left:0;
}

#topmenu li a {
padding:4px 8px;
color:#000;
display:block;
}

#topmenu li a:hover,
#topmenu li.deeper ul li a:hover
{
color: #fff;
background:#CDDF69;
opacity:1.0;
}

#topmenu li ul {
background:#1e453a;
position:absolute;
border: 1px solid #265749;
min-width:50px;
padding:2px;
margin:0;
display:none;
z-index:100;
}

#topmenu li.deeper ul li {
padding:0;
margin:5px 0;
clear:both;
width:100%;
}

#topmenu li.deeper ul li a {
color:#000;
font-size:0.9rem;
line-height:14px;
padding:3px;
}

#topmenu li.deeper:hover > ul {
display:inline;
}

#topmenu .selected,
#topmenu .active {
color: #000;
background: #CDDF69;
opacity:1.0;
}

#topmenu li.selected  a,
#topmenu li.active a,
#topmenu li.deeper ul li.active a {
color: #000;
opacity:1.0;
}

#winToolContentLeft {
line-height:30px;
}
/* ******** PAGINATION **********/

.pagination
{
margin:1rem;
}

.pagination .counter {
width:90%;
margin:0 auto;
text-align:right;
}

.pagination ul
{
list-style-type:none;
text-align:center;
padding:0;
}

.pagination li
{
display:inline;
background: #eee;
padding: 4px;
margin:2px;
color:#999;
}

.pagination li a {
text-decoration: none;
}

#main ul.pagenav {
list-style-type: none;
overflow: hidden;
padding: 0;
width:90%;
margin:1rem;
}

#main ul.pagenav li {
line-height: 2em;
}
ul.pagenav li a {
background: #eee;
padding: 4px;
text-decoration: none;
}
ul.pagenav li.pagenav-prev {
float: left;
}
ul.pagenav li.pagenav-next {
float: right;
}



/* ******** TABLES ************** */

table{
/*    border-collapse: collapse;
    border: 1px solid #CCCCCC; */
    width:90%;
    line-height:0.7rem;
/*    margin:1rem auto; */
}

table caption {
    caption-side: top;
/*    color: #CCCCCC; */
    text-align: left;
}

table tr.odd td {
    background: none repeat scroll 0 0 #F9F9F9;
}

table tr.odd .column1 {
    background: none repeat scroll 0 0 #F0F0F0;
}

table .column1 {
    background: none repeat scroll 0 0 #F0F0F0;
}

table img {
    border: 0;
}
table td {
/*    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC; */
    padding: 0 0; /*0.5em 1.2em;*/
    text-align: left;
}

table th {
/*    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC; */
    font-weight: normal;
    padding: 0 0; /*.3em 1em;*/
    text-align: left;
}

table thead th {
    background: none repeat scroll 0 0 #F0F0F0;
    color: #555555;
    font: bold 1.2em/2.0em Verdana;
    text-align: center;
}

table tfoot th {
    background: none repeat scroll 0 0 #F0F0F0;
	font-style: italic;
    text-align: center;
}

table hr {
color:#445516;
width: 90%;
size:4;
}

/* ******** NOTICES ************** */

.success, .notice, .error {
    margin-bottom: 1.5rem;
    padding: 5px 10px 5px 40px;
}
.success {
    background: #E6EFC2;
    border: 1px solid #C6D880;
    color: #264409;
}
.notice {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    color: #514721;
}
.error {
    background: #FBE3E4;
    border: 1px solid #FBC2C4;
    color: #8A1F11;
}

legend {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E6E6E6;
    color: #777777;
    font-size: 1.0rem;
    padding: 0.2rem 1rem;
}


/* ******** COLUMNS **********/

.cols-1
{
        display: block;
        float: none !important;
        margin: 0 !important;
}

.cols-2 .column-1
{
        width:46%;
        float:left;
}

.cols-2 .column-2
{
        width:46%;
        float:right;
        margin:0
}

.cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3
{
        float:left;
        width:31%;
        padding:0px 5px;

}

.cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4
{
        width:23%;
        margin-left:1%;
        float:left;
}


/* ******** OTHER **********/

::-moz-selection { background: #edf57d; color: #222;  }
::selection { background: #edf57d; color: #222;  }

.breadcrumbs {
margin:10px;
}

.items-row
{
overflow:hidden;
margin-bottom:10px !important;
width:100%;
}

.edit-icon {
list-style: none;
display:inline;
float:left;

}
.hasTip img {
margin:0;
}

.tip {
background: #ffc;
border: 1px solid #ddd;
padding: 5px;
max-width: 200px;
}

#main ul.actions {
float:right;
width:70px;
padding:0 10px;
}

.actions li {
list-style:none;
margin-left:10px;
float:right;
}

.search legend {
border:0;
color:#222;
font-size:0.9rem;
float:left;
}
.search fieldset {
width:90%;
margin:1rem auto;
}
.search div {
float:left;
line-height:1.4rem;
margin-left:10px;
}

.search-results {
clear:both;
padding-top:1rem;
}

#bottom .box {
float:left;
margin:1%;
width:31%;
}

.login fieldset input {
margin:2px 0;
}

#login-form {
padding-left:3px;   
}

#login-form input {
width:95%;   
}

input#modlgn-remember {
width:20px;   
}

ins {
 float:right; 
}

.joomla_add_this {
width:99%;
float:right;
}

.addthis_default_style {
float:right;
margin:0 0 10px 0;
}

#errorboxheader {
font-size:24px;
line-height:36px;
margin-bottom:12px;
}

/* ++++++ edit */

#adminForm fieldset
{
border:solid 1px #eee;
padding:10px;
margin-top:10px;
}
#adminForm  legend
{
font-weight:bold;
font-size:0.8rem;
border:0;
color:#666;
margin-left:10px;
padding:0;
}

.formelm, .formelm-area {
margin-bottom:3px;
}

.formelm label,
.formelm-area label {
float:left;
width:10em;
}

.formelm-buttons {
text-align:right;
}

.button2-left {
float: left;
margin: 3px;
padding:3px;
background:#ccc;
}


/* debug for responsive design; enable in parameters for testing */
#rdebug {
position:fixed;
bottom:0;
right:0;
padding:3px;
background:#333;
color:#fff;
border:1px solid red;
}

#rmobile, #rnarrow, #rwide, #rmobilehd, #rie { display:none; }



/* ******** PRETTIER **********/
/* but remember that using prefixes is BAD: 
http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/ */

/*
body {
background: -moz-linear-gradient(top, #bee092 0%, #f6fac5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bee092), color-stop(100%,#f6fac5));
background: -webkit-linear-gradient(top, #bee092 0%,#f6fac5 100%);
background: -ms-linear-gradient(top, #bee092 0%,#f6fac5 100%);
background: linear-gradient(top, #bee092 0%,#f6fac5 100%);    
}
*/

/* this gives round menu tabs */

#topmenu ul li, #topmenu ul li a:hover  {
border-radius: 15px 15px 15px 15px; 
-moz-border-radius: 15px 15px 15px 15px; 
-webkit-border-radius: 15px 15px 15px 15px; 
}

#topmenu ul li.deeper ul  {
border-radius: 15px 15px 15px 15px; 
-moz-border-radius: 15px 15px 15px 15px; 
-webkit-border-radius: 15px 15px 15px 15px;
}

#topmenu ul li.deeper ul li,
#topmenu ul li.deeper ul li a:hover {
border-radius: 0px; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; 
}

#topmenu li a:hover {
-moz-transition: color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
-o-transition: color 0.4s ease 0s;
transition: color 0.4s ease 0s;
-moz-transition: background 0.4s ease 0s;
-webkit-transition: background 0.4s ease 0s;
-o-transition: background 0.4s ease 0s;
transition: background 0.4s ease 0s;
}

#topmenu li.deeper:hover > ul {
    -webkit-animation: s1 0.3s 1 ease;
    -moz-animation: s1 0.3s 1 ease;
}

@-webkit-keyframes s1 {
from { -webkit-transform:  scale(0.5)  }
to { -webkit-transform:  scale(1.0)  }
}
@-moz-keyframes s1 {
from { -moz-transform: scale(0.5) }
to { -moz-transform:  scale(1.0) }
}

/* frames around text boxes */

section {
  display: flex;
  align-items: center;
}
.middle {
  height: 2px;
  flex: 1;
  background: grey;
  margin: 0 10px;
}

#mycontainer {
    text-align: center
    width : 100%;
}

.holderl {
    display: block;
    margin: auto;
    width: 40%;
    display : inline-table;
    float : left;
}

.holderr {
    display: block;
    margin: auto;
    width: 40%;
    display : inline-table;
    float : right;
}

.clear {
    clear: both;
}

@media (max-width: 600px) 
{
 #mycontainer {
     width : 100%;
  }
 .holderl {
     width : 100%;
  }
 .holderr {
     width : 100%;
  }
}

.graderight {
	width:80%;
	margin:20px auto;
	padding: 20px 20px 20px 20px;
  background-image:
    linear-gradient(
      to right,
      #94be41,
      #94be41 1px,
      #FFFFFF 1px,
      #94be41
    );
}

.gradeleft {
	width:80%;
	margin:20px auto;
	padding: 20px 20px 20px 20px;
  background-image:
    linear-gradient(
      to left,
      #94be41,
      #94be41 1px,
      #FFFFFF 1px,
      #94be41
    );
}

.gradeup {
	width:      80%;
	min-height: 60px;
	margin:     20px auto;
	padding:    20px 20px 20px 20px;
  background-image:
    linear-gradient(
      to top, 
      #FFFFFF,
      #94be41
    );
}

.gradeup h1 {
	text-align: center;
}

.frame {
/*    background-color: #fff;
    padding: 4px; */
	width:90%;
	min-height:60px;
	background:#FFF;
	margin:0 auto;
	padding: 0px 0px 0px 45px;
}

/*.frame li.sigFreeThumb {
    background-color: #fff;
    padding: 4px;
}*/

.box h1 {
	text-align:center;
	position:relative;
	top:10px;
    line-height:1.7rem;
}
.box h2{
	text-align:center;
	position:relative;
	top:10px;
}
.box {
	width:80%;
	min-height:60px;
	background:#FFF;
	margin:20px auto;
	padding: 20px 20px 20px 20px;
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
    position:relative;
  -moz-box-shadow:    0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    box-shadow:       0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
}
/*.effect7:before, .effect7:after
{
    content:"";
    position:absolute; 
    z-index:-1;
  -moz-box-shadow:    0 0 20px rgba(0,0,0,0.8);
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow:       0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:100px / 10px;
} */
/*.effect7:after
{
    right:10px; 
    left:auto; 
    transform:skew(8deg) rotate(3deg);
}
*/

/* ******** MEDIA QUERIES ********************/

/* Smartphones small */
@media only screen and (max-width: 320px) 
{
    #header, #content, #bottom, #footer {
	width:100%;
    }
	
    #header {
	height:100px;
	/*background:#cee899;*/
    }
    .hbg-1 {
	/*background: url('../images/header-320.gif') 90% 0% no-repeat ;*/
        /*-webkit-box-shadow:inset 0px 0px 0px 3px #060;
        -moz-box-shadow:inset 0px 0px 0px 3px #060;
        box-shadow:inset 0px 0px 0px 3px #060; */
    }
    #logo {
	background:transparent;
	font-size: 0.35em;
    }
    #whitebox_tr {
	height: 0px;
	overflow: hidden;
    }

    #tagline {
	display:none;
    }
    #banner { 
	display:none; 
    }

    ul.menu a{
	line-height:1.8rem;
	font-size:1rem;
    }
	
    #topmenu {
	bottom:0;
	z-index:10;
    }

    #topmenu ul li {
	font-size:0.6rem;
	line-height:0.5rem;
	min-width:40px;
    }

    #topmenu li a {
	padding:1px 4px;
    }

    .cols-2 .column-1, .cols-2 .column-2,
    .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3, 
    .cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4,
    #bottom .box
    {
	width:99%;
    }
    
    .centerAndLeft, .centerAndRight, .centerNarrow, #wrapper, #left, #right {
	width:96%;
    }
	
    .formelm-buttons {
	text-align:left;
    }
    
    #rmobile {
	display:inline;
	color:green;
    }
}

/* other from 320 to 450px, or iPad/iPhone portrait (if viewport set to width=450)
   Shows left+center, right column flows below */
@media only screen and (min-width : 321px) and (max-width: 450px) 
,only screen and (min-width : 321px) and (max-width: 450px) and (orientation: portrait)
{
    #content, #bottom, #footer {
	width:100%;
    }
	
    #header {
	height:100px;
    }

    .hbg-1 {
	/*background: url('../images/header-450.gif') 90% 0% no-repeat ;*/
        /*-webkit-box-shadow:inset 0px 0px 0px 3px #060;
        -moz-box-shadow:inset 0px 0px 0px 3px #060;
        box-shadow:inset 0px 0px 0px 3px #060; */
    }
    #logo {
	background:transparent;
	font-size: 0.4em;
    }
    #whitebox_tr {
	height: 0px;
	overflow: hidden;
    }

    #tagline {
	top:30px;
    }
    
    #topmenu ul li {
	font-size:1rem;
	line-height:0.4rem;
	min-width:40px;
    }

    .cols-2 .column-1, .cols-2 .column-2,
    .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3, 
    .cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4,
    #bottom .box
    {
	width:99%;
    }

    #wrapper, #right {
	width:99%;
    }
	
    #left {
	overflow:hidden;
	width:50%;
    }

    .centerAndLeft {
	width: 90%;
	padding:1%;
    }
    
    #rnarrow {
	display:inline;
	color:cyan;
    }
}

/* other from 451 to 600px, or iPad/iPhone portrait (if viewport set to width=600)
   Shows left+center, right column flows below */
@media only screen and (min-width : 451px) and (max-width: 600px) 
,only screen and (min-width : 451px) and (max-width: 600px) and (orientation: portrait)
{
    #content, #bottom, #footer {
	width:100%;
    }
	
    #header {
	height:100px;
    }

    .hbg-1 {
	/*background: url('../images/header-600.gif') 90% 0% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.5em;
    }
    #whitebox_tr {
	height: 0px;
	overflow: hidden;
    }

    #tagline {
	top:30px;
    }
    
    #topmenu ul li {
	font-size:1rem;
	line-height:0.4rem;
	min-width:40px;
    }

    .cols-2 .column-1, .cols-2 .column-2,
    .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3, 
    .cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4,
    #bottom .box
    {
	width:99%;
    }

    #wrapper, #right {
	width:99%;
    }
	
    #left {
	overflow:hidden;
	width:50%;
    }

    .centerAndLeft {
	width: 90%;
	padding:1%;
    }
    
    #rnarrow {
	display:inline;
	color:cyan;
    }
}

/* other from 601 to 767px, or iPad/iPhone portrait (if viewport set to width=768)
   Shows left+center, right column flows below */
@media only screen and (min-width : 601px) and (max-width: 767px) 
,only screen and (min-width : 601px) and (max-width: 768px) and (orientation: portrait)
{
    #content, #bottom, #footer {
	width:100%;
    }
	
    #header {
	height:130px;
    }

    .hbg-1 {
	/*background: url('../images/header-768.gif') 90% 50% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.6em;
    }
    #tagline {
	top:30px;
    }
    
    #topmenu ul li {
	font-size:1rem;
	line-height:0.4rem;
	min-width:40px;
    }

    .cols-2 .column-1, .cols-2 .column-2,
    .cols-3 .column-1, .cols-3 .column-2, .cols-3 .column-3, 
    .cols-4 .column-1, .cols-4 .column-2, .cols-4 .column-3, .cols-4 .column-4,
    #bottom .box
    {
	width:99%;
    }

    #wrapper, #right {
	width:99%;
    }
	
    #left {
	overflow:hidden;
	width:50%;
    }

    .centerAndLeft {
	width: 90%;
	padding:1%;
    }
    
    #rnarrow {
	display:inline;
	color:cyan;
    }
}

@media only screen and (min-width : 768px) and (max-width: 959px) 
,only screen and (min-width : 768px) and (max-width: 960px) and (orientation: portrait)
{
    #header {
	height:140px;
    }

    .hbg-1 {
    /*background: url('../images/header-960.gif') 90% 50% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.75em;
    }
    #rwide {
    display:inline;
    color:yellow;
    }
}

/* other > 768px, or iPad/iPhone landscape (if viewport set to width=768) */
@media only screen and (min-width : 961px)
,only screen and (min-width : 961px) /* and (orientation:landscape)*/
{
    .hbg-1 {
    /*background: url('../images/header-1008.gif') 90% 30% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.9em;
    }
    #rwide {
    display:inline;
    color:yellow;
    }
}


/* iPhone 4, other high pixel density 
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio : 1.5) */
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
{
    .hbg-1 {
	/*background: url('../images/header-600.gif') 90% 0% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.5em;
    }
    #content {
    min-height:815px;
    }


    #topmenu ul li {
	font-size:1.4rem;
	line-height:0.4rem;
	min-width:40px;
    }
    
    #rmobilehd {
    display:inline;
    color:orange;
    }
}


/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
{
    .hbg-1 {
	/*background: url('../images/header-600.gif') 90% 0% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.6em;
    }
    #content {
    min-height:815px;
    }

    body {
        line-height:1.3rem;
        font-size:1.1rem;
    }

    #topmenu ul li {
	font-size:1.4rem;
	line-height:0.4rem;
	min-width:40px;
    }
    
    #rmobilehd {
    display:inline;
    color:orange;
    }
}


/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
{ 
    .hbg-1 {
	/*background: url('../images/header-768.gif') 90% 0% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.7em;
    }
    #content {
    min-height:815px;
    }

    body {
        line-height:1.4rem;
        font-size:1.2rem;
    }

    #topmenu ul li {
	font-size:1.4rem;
	line-height:0.4rem;
	min-width:40px;
    }
    
    #rmobilehd {
    display:inline;
    color:orange;
    }
}


/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
{ 
    .hbg-1 {
	/*background: url('../images/header-768.gif') 90% 0% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
    }
    #logo {
	font-size: 0.8em;
    }
    #content {
    min-height:815px;
    }

    body {
        line-height:1.4rem;
        font-size:1.2rem;
    }

    #topmenu ul li {
	font-size:1.4rem;
	line-height:0.4rem;
	min-width:40px;
    }
    
    #rmobilehd {
    display:inline;
    color:orange;
    }
}

/* for IE<9 */
.lt-ie9 .hbg-1 {
        /*background: url('../images/header-960.gif') 90% 50% no-repeat ;*/
    /*    -webkit-box-shadow:inset 0px 0px 0px 4px #060;
        -moz-box-shadow:inset 0px 0px 0px 4px #060;
        box-shadow:inset 0px 0px 0px 4px #060; */
}
.lt-ie9 #rdebug #rie {
display:inline;
}


/* ==|== print styles =======================================================
   Print styles.
   Copied here from the end of style.css, modified.
   ========================================================================== */
 
@media print {
  * { 
  /* background: transparent !important; */ /* to print background images from plugins */
  color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  /* a[href]:after { content: " (" attr(href) ")"; } */ /* don't print links */
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

  /* don't show ads */
  #banner { display:none; } 
  
}