﻿/* CSS LHI 9 OCT 2017 */ 

/*
 * Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* iPhone 5 Retina ------------*/
@media only screen 
and (max-device-width : 568px) 
and (min-device-width : 320px) 
and (-webkit-min-device-pixel-ratio: 2){
}

/* CSS LHI 9 OCT 17 */
/* css for dividers */
#body
{
	border: 0;
	margin:0 0 0 0;
	padding:0 0 0 0;
    background-image: url('../images/bg-loran-1950.png');
	overflow-y:scroll;
}
#container
{
	border: 0;
	margin:0px auto 0px auto;
	padding: 0 0 0 0;
    width: 960px;
	background-color:#FFFFFF;
	height:auto;
}
#container-roster
{
    width: 98%;
    margin: auto;
 	overflow: auto;   
	background-color: #A0A0A0;
}
#masthead {
	border: 0;
	margin:0 0 0 0;
	width: 960px;
	background-color: #A0A0A0;
    height: auto;
}
#sidebarL {
	float: left;
	width: 160px;
	position: relative;
	overflow: auto;
	background-color: #A0A0A0;
}
#content
{
	float:right;
	width: 800px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}
#content-spc
{
	border: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 960px; 
	background-color: #FFFFFF;
	height: auto;
}
#content-roster
{
	top: 0px;
	width: 100%;
    margin: 0px 0px 0px 0px;
	padding: 0;
	border: 0;
	background-color: #FFFFFF;
	height: auto;
}
#footer {
	float: right;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: medium;
	width:800px;
	background-color: #A0A0A0;
}
#footer-spc {
	width:940px;
	border: 0;
	margin: 0 0 0 0;
	padding: 10px 10px 10px 10px;
	font-size: medium;
	text-align:center;
	background-color: #A0A0A0;
}
#footer-roster 
{
	width:1024px;
	margin: 0 0 0 0;
	padding: 10px 10px 10px 10px;
	font-size: medium;
	background-color: #A0A0A0;
}
.float_right {
	float:right;
}

/* Styles for Navigation */
#sidebarL ul {
	list-style-type: none;
    font-size: smaller;
	width: 100%;
	display: block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#sidebarL li {
	display: block;
	border: 1px solid #cdf;
	
}
#sidebarL a {
	font-weight: bold;
	font-size: smaller;
	text-decoration: none;
	color: #04b;
	display: block;
	padding: 5px;
	border-bottom: 1px solid #f9f9f9;
}
#sidebarL a:hover
{
    font-weight: bold;
    font-size: smaller;
    text-decoration: none;
    color: #0044BB;
    border-bottom: 1px solid #f9f9f9;
    background-color: #DBDBDB;
}
/* Styles for hyperlinks */
a {
	color: #04b;
	text-decoration: underline;
}
a:hover {
	color: #333;
	text-decoration: underline;
}
/* Misc Styles */
.body {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	-o-user-select: none;
	user-select: none;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
	font-weight: bold;
}
.small {
	
}
.small-bold {
	
	font-weight: bold;
}
.text-red {
	color: #FF0000;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
/* Styles Tables */
.tbl {
	width:90%;
    border-collapse: collapse;
	margin-left:auto;
	margin-right:auto;
}
.tblcenter {
    border-collapse: collapse;
    padding: 2px
	margin-left: auto;
	margin-right: auto;
}
.tdtitle {
    vertical-align: top; 
    font-weight: bold; 
    width: 26%;
}

.tddata
{
    vertical-align: top;
	text-align: left;
	font-weight: bold;
}
.td50 {
    vertical-align: top; 
    font-weight: bold; 
    width: 50%;
}
.td20 {
    vertical-align: top; 
    font-weight: bold; 
    width: 20%;
}
.td30 {
    vertical-align: top; 
    font-weight: bold; 
    width: 30%;
}

.center-img
{
    margin-left: auto;
	border: 0px;
	width:400px;
    margin-right: auto;
}
.center-ribbon
{
	border: 0px;
    margin-left: auto;
    margin-right: auto;
	width:100px;
}
.img
{
	border: 0px;
    margin-left: auto;
    margin-right: auto;
}
.indent10
{
	margin-left: 10px;
	margin-right: 10px;
	font-weight: bold;
}
.indent25
{
	margin-left: 25px;
	margin-right: 25px;
	font-weight: bold;
}
.indent50
{
    margin-left: 50px;
    margin-right: 50px;
}
.indent75
{
    margin-left: 75px;
    margin-right: 75px;
}
.indent100
{
    margin-left: 100px;
    margin-right: 100px;
}
.indent125
{
    margin-left: 125px;
    margin-right: 125px;
}
.indent200
{
    margin-left: 200px;
    margin-right: 200px;
}
.indent250
{
    margin-left: 250px;
    margin-right: 250px;
}
.indent300
{
    margin-left: 300px;
    margin-right: 300px;
}
.loran-a
{
    background-color: #00FFFF;
}

.loran-ac
{
    background-color: #FF9933;
}

.loran-c
{
    background-color: #00FF00;
}
.markup
{
    background-color: Yellow;
}
.hr90 {
	width:90%;
}
