/* ==========================================================================
GENERAL
========================================================================== */

* {
margin: 0;
padding: 0;
}

body {
background-image: url("../../pics/bg_a.jpg");
background-repeat: repeat;
background-attachment: fixed;
text-align: center;
}

a {text-decoration: none;}


/* ==========================================================================
HEADER
========================================================================== */



header {
margin:0 0 30px 0;
height: 150px;
padding: 20px 0 0 0;
width: 100%;
background-color: #000;
}

header .container {
max-width:1200px;
margin:0 auto;
}

header h1 {
font-size: 3.3em;
color: #ffffcc;
text-align: center;
margin:0 auto;
padding-top:40px ;
}


nav select {
display: none;
}


@media (max-width: 960px) {
nav table     { display: none; }
nav select { display: inline-block; }

nav select {
font-size: 1.2em;
margin-top: 20px;
margin-bottom: 20px;
height: 50px;
width: 90%;
/* color: #000;
background-color: #FFFFCC; */
/* color: #FFFFCC;
background-color: #000; */
color: #000000;
background-color: #FF9900;
border:none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
text-align: center;
cursor: pointer;
}
}


.floatLeft { float: left; }

.floatRight { float: right; }


@media (max-width: 1220px) {
    .floatLeft { padding-left: 20px; }

    .floatRight { padding-right: 20px; }
}


@media only screen and (max-width: 55em) {

header h1 {
font-size: 2.3em;
color: #ffffcc;
text-align: center;
margin:0 auto;
padding-top:45px ;
}
.floatLeft { display: none; }

.floatRight { display: none; }
}

.auto-style1 {
text-decoration: none;
}



/* ==========================================================================
Search Box
========================================================================== */

#searchit {
width: 570px;
height: 40px;
background-color: none;
}

#containment {
/*width: 100%;*/
display: table;
margin: 0 auto;
}

#searchit input[type="text"] {
text-align: left;
display: inline-block;
float: left;
height: 52px;
margin-bottom: 10px;
font-size: 1em;
line-height: 20px;
color: #969696;
vertical-align: middle;
border-radius: 0;
padding: 5px;
width: 70%;
}

#searchit input[type="text"] {
background-color: #ffffff;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 0;
border-bottom: 1px solid #000000;
-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;
}

#searchit input[type="text"]:focus {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-right: 0;
border-bottom: 1px solid #000000;
-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;
}

p.submit {
padding: 0px 0 20px 0;
margin: 0;
text-align: left;
}

button {
font-size: 1em;
width: 23%;
height: 52px;
line-height: 22px;
border: 1px solid #000000;
color: #0000FF;
background-color: none;
cursor: pointer;
text-align: center;
-webkit-border-radius: 0;
background-color: #FFFFCC;
}

button:hover {
width: 23%;
height: 52px;
line-height: 22px;
border: 1px solid #000000;
color: #0000FF;
background-color: #ffff88;
cursor: pointer;
text-align: center;
-webkit-border-radius: 0;
}

@media only screen and (max-width: 35em) {
#searchit {
width: 100%;
height: 40px;
background-color: none;
}

#containment {
width: 90%;
display: table;
margin: 0 auto;
}

#searchit input[type="text"] {
text-align: left;
display: inline-block;
float: left;
height: 52px;
margin-bottom: 10px;
font-size: 1em;
line-height: 20px;
color: #969696;
vertical-align: middle;
border-radius: 0;
padding: 5px;
width: 75%;
}

button {
font-size: 1em;
width: 24%;
height: 52px;
line-height: 22px;
border: 1px solid #000000;
color: #0000FF;
background-color: none;
cursor: pointer;
text-align: center;
-webkit-border-radius: 0;
background-color: #FFFFCC;
}

button:hover {
width: 24%;
height: 52px;
line-height: 22px;
border: 1px solid #000000;
color: #0000FF;
background-color: #ffff88;
cursor: pointer;
text-align: center;
-webkit-border-radius: 0;
}
}





/* ==========================================================================
Body Styles
==========================================================================*/
.bodycontainer {
padding: 20px 40px 20px 40px;
}





/* ==========================================================================
General Responsive Data Table
==========================================================================*/
table#datatable {
font-size: 1.2em;
border: 1px solid #ccc;
width: 95%;
margin:0 auto;
padding:0;
border-collapse: collapse;
border-spacing: 0;
margin-top: 10px;
margin-bottom: 40px;
}

/* remove bottom margin for notes */
table#datatable.nobottommar {
margin-bottom: 10px;
}

table#datatable tr {
/* border: 1px solid #ddd; */
padding: 5px;
}

table#datatable th, table#datatable td {
padding: 15px;
text-align: center;
}

table#datatable td {
width: 20%;
border: 1px solid #ccc;
background-color: #FFFFCC;
}

table#datatable tr td:last-child {
border-bottom: 1px solid #ccc;
}

/* to control the columns - add first and second class to td's in page */
/* table#datatable td.first {
width: 35%;
}

table#datatable td.second {
width: 35%;
} */

/* zibra stripe table */
table#datatable td:nth-child(even) {
background-color: #ffffe3;
}

@media screen and (max-width: 850px) {
table#datatable td {
width: auto;
}

table#datatable td.first {
width: auto;
}
table#datatable td.second {
width: auto;
}
}/* END to control the columns */

/* table#datatable th {
font-family: "latoblack", sans-serif;
} */

/* table#datatable th.mainheaderbackground {
background-color: #000;
color: #fff;
} */


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

table#datatable {
border: 0;
}

/* table#datatable thead {
display: none;
} */

table#datatable th.mainheaderbackground, table#datatable  tr.revoveme {
display: none;
}

table#datatable tr {
margin-bottom: 10px;
display: block;
/* border-bottom: 1px solid #ddd; */
}

/* add background to mobile header with letters in it */
table#datatable tr.mobonly {
background-color: #e7f4ff;
}

table#datatable td {
display: block;
text-align: center;
/* border-bottom: 1px dotted #ccc; */
}

table#datatable td:last-child {
border-bottom: 0;
}

/* table#datatable tr:nth-child(even) td:before {
color: #666;
} */

table#datatable td.background {
background-color: #fff;
}

}
/* END Responsive Data Table */

table#datatable a:link, table#datatable a:active, table#datatable a:visited {color: #0000FF;font-weight: regular;text-decoration: none;}
table#datatable a:hover {color: #69a2ce;text-decoration: none;}


table#datatable a.active {
color: #000;
font-weight: bold;
}





/* ==========================================================================
Pagination
========================================================================== */
#pagination {
list-style: none;
font-size: 22px;
margin: 0;
padding: 0;
margin-top: 25px;
margin-bottom: 25px;
}

#pagination ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#pagination ul li { display: inline-block; }

#pagination ul li a {
text-decoration: none;
padding: .2em .5em;
}

#pagination a:link, #pagination a:visited {
font-weight: regular;
}

.psel, a.psel {
background-color: #ffcc00;
border-radius: 5px;
font-weight: bolder;
} 

.BShighlight {
background-color: #ffcc00;
padding: 0px 5px 0px 5px;
}







/* ==========================================================================
Containment Panel
========================================================================== */
#containmentPanel {
padding: 10px 0 0 0;
width: 100%;
}

#containmentPanel .container {
max-width:1200px;
margin:0 auto;
}

@media only screen and (max-width: 55em) {
#containmentPanel {
width: 90%;
margin:0 auto;
}
}




/* ==========================================================================
General
========================================================================== */

h1 {
font-size: 3.3em;
color: #0000FF;
font-family: serif;
text-align: center;
margin:0 auto;
padding-top:40px;
padding-bottom:40px;
}


h3.home {
font-size: 1.5em;
color: #000;
font-family: serif;
text-align: center;
margin:0 auto;
padding-top:20px;
padding-bottom:5px;
}

h2.homeFooter {
font-size: 1.8em;
color: #000;
font-family: serif;
text-align: center;
margin:0 auto;
padding-top:20px;
padding-bottom:5px;
}

h2.homeFooter a:link, h2.homeFooter a:active, h2.homeFooter a:visited {color: #000;font-weight: regular;text-decoration: none;}
h2.homeFooter a:hover {color: #000;text-decoration: none;}

h3.homeFooter {
font-size: 1.5em;
color: #000;
font-family: serif;
text-align: center;
margin:0 auto;
padding-top:20px;
padding-bottom:5px;
}

h3.homeFooter a:link, h3.homeFooter a:active, h3.homeFooter a:visited {color: #000;font-weight: regular;text-decoration: none;}
h3.homeFooter a:hover {color: #000;text-decoration: none;}

@media only screen and (max-width: 55em) {
h1 {
font-size: 2.3em;
}
}