/*focsp common.css*/
/*a basic reset */
/*Reset */
html, body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;	
    padding: 0;	
    border: 0;
}
#masthead {	width: auto;	margin: 0;	padding: 0;	overflow: auto;}
/* #navigation {width: auto;	margin: 0;	padding: 0;	border: 0;	clear: both;} */

/* end basic reset */

/* needed to ensure border and padding are in % size */
* {box-sizing: border-box;
}

/*Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12 */
/*Each column except mobile phones is 1/12 th of the page */

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
    font-size: 18px;
    float: left;
    padding: 8px;
    border: 1px solid black;

}
@media only screen and (min-width: 768px) {
    /* For desktop: */
body { margin: auto;
/*   		font-size: 16px;} */
    }
    .col-1 {width: 8.33%;border:0;}
    .col-2 {width: 16.66%;border:0;}
    .col-3 {width: 25%;	border:0;}
    .col-4 {width: 33.33%;border:0;}
    .col-5 {width: 41.66%;border:0;}
    .col-6 {width: 50%;	border:0;}
    .col-7 {width: 58.33%;border:0;}
    .col-8 {width: 66.66%;border:0;}
    .col-9 {width: 75%;border:0;}
    .col-10 {width: 83.33%;border:0;}
    .col-11 {width: 91.66%;border:0;}
    .col-12 {width: 100%;border:0;}
}
/* never used	*/
@media only screen and (min-width: 600px) {
    /* For tablets: */    
    body { margin:0 auto;
/*   		font-size: 18px;}  */
}
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

/* The columns inside a row are all floating left, and are therefore out of the flow of the page, and other elements will be placed as if the columns do not exist. 
To prevent this, we will add a style that clears the flow: */
.row::after {
    content: "";
    clear: both;
    display: table;
}
/* to auto adjust the image size */
img {
    max-width: 100%;
    height: auto;
}
.auto-adj-img {
	max-width:100%;
	height:auto;
}    
/*  Basic body set up */
body {
	color: black;
/*	font-size: 20px; */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color:#e6ccb3; /*#d3d9d6;*/
}

/* Styles for Masthead */
/*masthead is a single banner image - so styles are not used*/
#masthead {
	margin-bottom:10px;
	margin-top:10px;
	width:auto;
	padding:5px;
	overflow:auto;
}
/* ------end Masthead--------------------- */

/* Styles for Footer */
#footer {
	width: 100%;/* 620px *//*convert all widths to % */
	text-align: center;
	background-color: #113962;
	padding-top: 5px;
	padding-bottom: 5px;
	width: auto;
	clear: both;
	overflow: auto;
}

#footer p {
	font-size: 14px;
	line-height: 18px;
	color: #fff;
	margin: 1px;
	padding: 1px;
}
#footer a {
	color: yellow;	/*#fffff;*/
	text-decoration: underline;
}
#footer a:hover {
	color: #00cc00;/*#00cc00=green*/
	text-decoration: none;
}
/* -- end of footer styles -- */


/* Styles for Links */
a {
	color: #003366;
	text-decoration: underline; 
}
a:hover {
	color: #ff3333; /*red*/
	text-decoration: none;
	font-style:italic;
}

/* -- end generic link styles -- */

/* general styles*/
.noborder {
	border:0;
}
.style_bold {font-weight: bold;}
.style_italic {font-style: italic;}
.style_underline{text-decoration:underline;}
.button{border:0;}
.float_right {float:right;}
.float_left {float:left;}
.pad5{
	padding:5px;}
.center{
	text-align:center;
	margin:0 auto;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto }
    
    
/*list styles*/
.bullet-sq{
	list-style-type:square;
}
.bullet-circle{
	list-style-type:circle;
}
/* two column table */
table{
	border-collapse:collapse;
	table-layout:fixed;
}
/* not used */
.twocol{
	margin:10px auto 10px auto;
	border:3px #663300 solid;
	border-collapse:collapse;
	background-color:#fcba7a;
}
td, th{
	border:3px #663300 solid;
	border-collapse:collapse;
	padding:10px;
}


/* color background divs for page chunks */
.block_bg{
	padding: 10px 20px 10px 20px;
}
.block_sm{
	padding:5px;
}
.block_blue{
	background-color:blue;
	border:3px white solid;
	color:white;
	padding-left:5px;
	
}
.block_blue a{	
	color:aqua;
	text-decoration: underline;
}
.block_blue a:hover{
	color:red;
	text-decoration: underline;
}

.block_lt-gr{
	background-color:#ccff00;
	border:3px black solid;
	color:black;
	padding:5px;
}
.block_green{	
	background-color:green;
	border:3px black solid;
	color:white;
}
.block_aqua{
	background-color:aqua;
	border:3px black solid;
	color:black;
}
.block_orange{
	background-color:orange;
	border:3px black solid;
	color:black;
}
.block_yellow{
	background-color:yellow;
	border:3px #554433 solid;
	color:black;
}
.block_red{
	background-color:red;
	border:3px black solid;
	color:white
}
.block_white{
	background-color:white;
	border:3px black solid;
	color:blue
}

/* font colors and styles*/
.red{color:red;}
.blue{color:blue;}
.yellow{color:#ffff00;}
.bg-yellow{background-color:yellow}

/*photo styles*/
/* photos in text area leaves 2 line of space for a caption. 
<div class="photoleft"><a href="photos/ski-track.jpg" target="_blank"><img src="photos/track.jpg" ></a>
<div class="photocaption">Track near ski hut</div>
</div>
see also code snippet in root for 4 photo block

*/
.photoleft{
	background-color:white;
	float:left;
	border:2px black solid;
	position:relative;
	margin:5px;
/*	width:300px;/*convert all widths to % */
/*	height:300px;*/
}
.photoleft img{
	width:300px;
	height:250px;
}
.photoright{
	background-color:white;
	float:right;
	border:2px black solid;
	position:relative;
	margin:5px;
/*	width:300px;/*convert all widths to % */
/*	height:300px;*/
}
.photoright img{
	width:300px;/*convert all widths to % */
	height:250px;
}
.photocaption{
	padding:0 5px 5px 5px;
}
.photosidebar-tall img{	
	width:30%;/*convert all widths to % */
	height:600px;
	border:medium black solid;
}
.photo-tall img{	
	width:30%;/*convert all widths to % */
	height:600px;
	border:medium black solid;
}
.photosidebar img{
	width:40%;/*convert all widths to % */
	height:450px;
	border:medium black solid;
}
	
.photosright-small{
	float:right;
	width:120px;/*convert all widths to % */

	height:150px;
	position:relative;
}