/************************************************************
 * otters.css - Cascading Style Sheet for otters.otter.frl	*
 ************************************************************/

/* https://fonts.google.com */
@import url(https://fonts.googleapis.com/css?family=Roboto);

/************
 * General	*
 ************/

body
{
	background-color: #dddddd;
	background-image: url("Otter700x908.jpg");
/*	background-attachment: scroll;		/* default	*/
/*	background-size: cover;	*/
	background-attachment: scroll;
/*	background-position: top center;	/* X (hor) ,y (vert)	*/
	background-size: 100%;
	font-size: 16px;
/*	font-size: 100%;	/* Default font-size: 100% * 16px = 16px	*/
/*	CSS requires that 1px must be exactly 1/96th inch:				*/
/*	So, a 100% font is 16 x 25.4 mm / 96 = 4.232 mm					*/
	line-height: 1;
}

h1
{
	font-size: 250%;	/**/
	text-shadow: 2px 1px 1px #658BDA;	/* Light frl blue */
	padding: 5px;
	margin: 0px;
	font-weight: 700;	/* 400=normal, 700=bold	*/
	line-height: 0.75;
}

h2
{
	font-size: 150%;
	color: #244994;						/* Otter.frl blue	*/
	text-shadow: 2px 1px 1px #658BDA;	/* Light frl blue	*/
	line-height: 1.1em;	/**/
	padding: 0;
	margin: 0 0 0.225em 0;	/* top, right, bottom, left	*/
}

h3
{
	font-size: 125%;
	font-weight: 100;	/* 400=normal, 700=bold*/
	line-height: 1.1em;
	letter-spacing: 2px;
	padding: 0px;
	margin: 0 0 0.375em 0;	/* top, right, bottom, left	*/
}

h4
{	/* For navigation from Mid & Right col	*/
	font-size: 64px;	/* Fixed for easy navigation	*/
	color: #000000;		/* Not Otter.frl blue: #244994;	*/
	text-align: right;
	line-height: 0;
	padding: 0;
	margin: 0 0 0 0;	/* top, right, bottom, left		*/
}

h5 /* Snow	*/ 
{
	font-size: 150%;
	color: #FFFFFF;						/* Otter.frl blue	*/
	text-shadow: 2px 1px 1px #658BDA;	/* Light frl blue	*/
	line-height: 1.1em;	/**/
	padding: 0;
	margin: 0 0 0.225em 0;	/* top, right, bottom, left	*/
}


*
{
	box-sizing: border-box;
}

.row:after
{
	content: "";
	clear: both;
	display: block;
}
[class*="col-"] {
	float: left;
	padding: 15px 10px 0px 10px;	/* top, right, bottom, left */
}

html
{
	font-family: 'Roboto', sans-serif;
}


/************\
 * Header	* 
\************/

.header
{
	background-image: url(DSC01394e.jpg);
	color: #244994;		/* Otter.frl blue	*/
	padding: 0;
	margin: 0 0 0 0;
	text-align: center;
	border-style: solid;
	border-top-style: none;
	border-left-style: none;
	border-bottom: 1px solid #C73326;	/* Otter.frl red	*/
	border-right-style: none;
}



/********************************\
 * Left col: Content/Navigation	* 
\********************************/

.menu
{
	background-color: #D0D0D0;
	padding: 5px 15px 7px 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	margin: 0 0 0 0;
}

.menu ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.menu li
{
	padding: 8px;
	margin-bottom: 8px;
	line-height: 1;
	background-color :#B0B0B0;
	color: #0000FF;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu a
{
	text-decoration: none;
}

.menu a:hover
{
	color:#0000FF;
	text-decoration: none;
}

.menu a:visited
{
	color:#0000FF;
	background-color: #BF00FF;
	text-decoration: none;
}

li.main
{
	padding: 8px;
	margin-bottom: 8px;
	line-height: 1;
	background-color :#B0B0B0;
	color: #000000;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

li.link
{
	padding: 8px;
	margin-bottom: 8px;
	line-height: 1;
	background-color :#B0B0B0;
	color: #0000FF;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


li.link:hover
{
	background-color: #D966FF;
}

li.sub
{
	padding: 8px;
	margin-bottom: 8px;
	margin-left:1.5em;
	line-height: 1;
	background-color :#B0B0B0;
	color: #000000;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

li.linksub
{
	padding: 8px;
	margin-bottom: 8px;
	margin-left:1.5em;
	line-height: 1;
	background-color :#B0B0B0;
	color: #0000FF;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

li.linksub:hover
{
	background-color: #D966FF;
}


/********************************\
 * Right col. Birthdays & Login	*
\********************************/

.asidetop
{
	padding: 0px 6px 0px 0px;	/* top, right, bottom, left	*/ 
	color: #658BDA;
	text-align: right;
	font-size: 16px;
	line-height: 1em;	/**/
	width: 100%;
}

.asidetop a:hover
{
	color: #BF00FF;
/*	text-decoration: none;	*/
}

.asidetop a
{
	color: #0000FF;
	text-decoration: none;
}

.aside
{
	background-color: #d0d0d0;
	padding: 5px 5px 5px 5px;
	text-align: center;
	font-size: 16px;	/**/
	line-height: 1.125em;	/**/
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	width: 100%;
}

.aside p
{
	margin: 0 0 0.375em 0;	/* top, left, bottom, right	*/
	padding: 0;
	border: 0;
	font-size: 100%;
}


#asidetxt a
{
	color: #0000FF;
	text-decoration: none;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}


#asidetxt a:hover
{
	color: #BF00FF;
}



/************\
 * Footer	*
\************/

.footer
{
	background-image: url(DSC01394e.jpg);
	color: #244994;		/* Otter.frl blue	*/
	padding: 0 0 12px 0;
	margin: 0;
	text-align: left;
	border-style: solid;
	border-top: 1px solid #C73326;	/* Otter.frl red	*/
	border-left-style: none;
	border-bottom-style: none;
	border-right-style: none;
}


/************************\
 * Page set-up for RWD	*  Responsive Web Design
\************************/

@media only screen and (max-width: 1200px)
{
	.aside
	{
		text-align: left;
	}
}

@media only screen and (max-width: 1200px)
{	/* For tablets: */
	.aside
	{
		width: 75%;
		margin: 0 0 0 25%;
		padding: 5px 10px 5px 10px;
	}
}

@media only screen and (max-width: 800px)
{	/* For desktop: */
	.aside
	{
		width: 100%;
		margin: 0 0 0 0;
		padding: 5px 10px 5px 10px;
	}
}

/* For mobile phones: */
[class*="col-"]
{
	width: 100%;
}

/* The left colomn width will be at least 200px	*/
@media only screen and (min-width: 800px)
{	/* For tablets: */
	.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%;}
}
@media only screen and (min-width: 1200px)
{	/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10	{width:	83.33%;}
	.col-11	{width:	91.66%;}
	.col-12	{width:	100%;}
}

#text
{
	font-size: 125%;
	line-height: 1.375em;
}


@media only screen and (max-width: 1200px)
{
	#text
	{
		font-size: 115%;
		line-height: 1.25em;
	}
}

@media only screen and (max-width: 600px)
{
	#text
	{
		font-size: 100%;
		line-height: 1.125em;
	}
}

#text a
{
	color: #0000FF;
	text-decoration: none;
	transition: color .1s ease;
	-webkit-transition: color .1s ease;
	-moz-transition: color .1s ease;
	-o-transition: color .1s ease;
}

#text a:hover
{
	color: #BF00FF;
}


#text p
{
	margin: 0 0 0.375em 0;	/* top, left, bottom, right	*/
	padding: 0;
	border: 0;
	font-size: 100%;
}


.button
{
    background-color: #FFFFFF	/* #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 1px 12px 3px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: 0px 0px;
    cursor: pointer;
}

.button2
{
	border-radius: 5px;
	border: 2px solid #0000FF;
	box-shadow: 2px 2px 2px 2px rgba(0,0,255,0.15)
}

.button2:hover
{
    border: 2px solid #BF00FF;
	box-shadow: 2px 2px 2px 2px rgba(191,0,255,0.2)
}



/* General table definitions	*/
table.gen
{
	border-style:none;		/* No border	*/
/*	width: 700px;			/* Table width	*/
	width: 100%;			/* Table width	*/
	margin-left: auto;
	margin-right: auto;
}

/* For OtterChg.php*/
td.chg2col_left
{
	width:125px;
	vertical-align:top;
	text-align:right;
}

td.chg2col_rght
{
/*	width:85%;	*/
	vertical-align:top;
	text-align:left;
}

/* For OtterGez.php*/
td.gez2col_left
{
	width:220px;	/*was 210*/
	vertical-align:top;
	text-align:right;
}

td.gez2col_rght
{
/*	width:85%;	*/
	vertical-align:top;
	text-align:left;
}

/* Button Styling */

.menubut
{
	background-color: #D0D0D0;
	padding: 5px 15px 7px 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	margin: 0 0 0 0;
}


.menubutton
{
	background-color: #B0B0B0; /* Grey */
	border: none;
	color: #0000FF;			/* Navigation blue	*/
	padding: 8px 12px;		/* Hight, width*/
	text-align: left;	/* center */
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 5px;
	box-shadow: 2px 2px 2px 2px  rgba(0,0,0,0.15), 2px 2px 2px 2px rgba(0,0,0,0.15);	*/
	width: 100%;
	margin-bottom: -2px;
}


.menubutton:hover
{
	background-color: #BF00FF;
	color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px  rgba(191,0,255,0.15), 2px 2px 2px 2px rgba(191,0,255,0.15);	*/
/*	box-shadow: 2px 2px 2px 2px rgba(191,0,255,0.2)	*/
}

.buttonm1 {width: 100%;}
.buttonm2 {width: 94%;}

.disabutton
{
	background-color: #B0B0B0; /* Grey */
	border: none;
	color: #000000;			/* Black	*/
	padding: 8px 12px;		/* Hight, width*/
	text-align: left;	/* center */
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 5px;
	box-shadow: 2px 2px 2px 2px  rgba(0,0,0,0.15), 2px 2px 2px 2px rgba(0,0,0,0.15);	*/
	width: 100%;
	margin-bottom: -2px;
}


.disabled
{
	cursor: not-allowed;
}

/* EOF */