/* main.css */
img {
	max-width: 100%;
}
#wrapper{
    width:100%;
}
#user{
	text-align:right;
	color:red;
}
h1 {
    margin-top:1em;
}
#myframe {
    width:100%;
}
/*
#logon{
	display:inline;
}
#logoff{
	display:inline;
}
#signup{
	display:inline;	
}
#watching{
	display:inline;
}
#preferences{
	display:inline;
}
*/	
header{

}
#logo {
    width:1em;
	clear:both;
    display: inline;
}
#flag {
	background-color:black;
    color:white;
    text-align:center;
}

nav{
    background-color:aqua;
}
ul.navbar li a {
	text-decoration :none;
	color :black;
}

article{
	background-color:white;
	width:70%;
	float:left;
}

ul.navbar {
	margin :0 auto;
	list-style-type :none;
	overflow:hidden;
    width:50%;
}
ul.navbar li{
    display:table-cell;
	font-weight:bold;
    vertical-align:middle;
    padding: 0 1em;}
ul.navbar li a:hover {
	color :royalblue;
}
ul.navbar li.active a {
	color :royalblue;
}

#footer{
	width:100%;
	background-color:black;
	color: white;
	text-decoration:none;
	clear:both;
}
#footer ul{
	margin: 0;
	text-align: center;
}
#footer a {
	text-decoration:underline;
	color: white;
}
#disclaimer{
	width:100%;
	text-align:center;
	margin:0;
	padding:0;
	font-weight: bold;
}

textarea {
	width:100%;
	height: 10em;
}
.formInput {
	width:50%
}
/* Smartphones (portrait and landscape) ----------- */
@media (max-width : 480px) {

/* Smartphone Display */
#wrapper{
	margin:0;
	width:100%;
}
#user{
	margin: 1px;
}
#logon{
	height:1px;
}
#logoff{
	height:1px;
}
#signup{
	height:1px;
}
#logo{
	width:1em;
}
#flag{
	width:100%;
	padding: 0 1px;
	text-align:center;
}

	.navbar {/* disappear desktop menu */
		display:none;
	}	
	.nav-button, .primary-nav, .nav-map {/* show mobile menu button */
		display:block;
	}
  /* Navigation Button
  -------------------------------------------------------- */

	.nav-button {
		display: block;
		position: absolute;
		top: 7px;
		left: 7px;
		width: 50px;
		height: 35px;
		background: url('../img/nav/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/nav/menu-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/nav/menu-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/nav/menu-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
		cursor: pointer;
		border: 0 none;
		border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
		border-radius: 5px;
		z-index: 999;
		text-indent: -9999px;
	}
	.nav-button:hover { 
		background-color: rgba(0,0,0,.1); 
	}
	.nav-button.open {
		background: url('../img/nav/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/nav/close-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/nav/close-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/nav/close-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
	}

  /* Navigation Bar
  -------------------------------------------------------- */

	body { padding-top: 50px; } 

	.nav-map {
		position:absolute;
		top:4px;
		left:114px;
		z-index: 999;
	}
	.nav-map img {
		height:38px;
	}


	.primary-nav {
		width: 100%;
		float: none;
		background-color: #238be3; /* change the menu color */
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		display: block;
		height: 50px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,.6);
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 998;
		clear: both;
	}
	.primary-nav li {
		display: none;
		width: 100%;
		font-family: Arial;
	}
	.primary-nav li a {
		display: block;
		width: 90%;
		padding: 10px 5%;
		font-size: 14px;
		font-weight: bold;
		text-shadow: -1px -1px 0 rgba(0,0,0,.15);
		color: white;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,.2);
		border-top: 1px solid rgba(255,255,255,.1); 
	}
	.primary-nav li a:hover {
		background-color: rgba(0,0,0,.5);
		border-top-color: transparent;
	}
	.primary-nav > li:first-child {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	/* Toggle the navigation bar open  */

	.primary-nav.open { 
		height: auto; 
		padding-top: 50px;
	}
	.primary-nav.open li { 
		display: block; 
	}

  /* Submenus – optional .parent class indicates dropdowns */

	.primary-nav > li:hover > a {
		background: rgba(0,0,0,.5);
		border-bottom-color: transparent;
	}
	.primary-nav li.parent > a:after {
		content: "▼";
		color: rgba(255,255,255,.5);
		float: right;
	}
	.primary-nav li.parent > a:hover {
		background: rgba(0,0,0,.75);
	}
	.primary-nav li ul {
		display: none;
		background: rgba(0,0,0,.5);
		border-top: 0 none;
		padding: 0;
	}
	.primary-nav li ul a {
		border: 0 none;
		font-size: 12px;
		padding: 10px 5%;
		font-weight: normal;
	}
	.primary-nav li:hover ul {
		display: block;
		border-top: 0 none;
	}

	.primary-nav img {
		height:2em;
	}

article{
	width:100%;
	padding: 1em;
	line-height:1.25em;
}
.formInput {
	width:75%
}
#footer{
	font-size: 1em;
	padding:1px;
}
#footer ul{
	padding: 1px 0;
}
#footer li {
	display:block;
	padding: 0;
}
textarea {
	width:90%;
	height: 10em;
}

}
@media (max-width : 800px)and (min-width:481px) {
	#wrapper{width:100%}

#flag{
	width:100%;
	font-size:2em;
	padding: .3em;
	overflow:hidden;
}
.nav-button, .primary-nav, .nav-map {display:none;}
nav{display:block;}
ul.navbar li a {font-size :12px;}
ul.navbar li {
	display:inline;
	padding:.5em 0;
}
article{
	width:70%;
	padding: 1em;
	line-height:1.5em;
	overflow:hidden;
	border-radius:10px;
	margin-bottom:1em;
}
textarea {
	width:90%;
	height: 10em;
}
}
@media (max-width : 1200px)and (min-width:801px) {


#flag{
	width:100%;
	font-size:2em;
	padding: .3em;
	overflow:hidden;
}
.nav-button, .primary-nav, .nav-map {display:none;}
nav{display:block;}
ul.navbar li a {font-size :12px;}
ul.navbar li {
	display:block;
	padding:.5em 0;
}
#main {
    width:50%;
    margin:0 auto;
    max-width:960px;
}
article{
	width:70%;
	padding: 1em;
	line-height:1.5em;
	overflow:hidden;
	border-radius:10px;
	margin-bottom:1em;
}
textarea {
	width:90%;
	height: 10em;
}
}
/* Desktops and laptops ----------- */
@media (min-width : 1201px) {
/* Desktop Display */
#wrapper{
	margin:0 auto;
	width:100%;
}
#logo{
    width:1em;
}
#main {
    width:50%;
    margin:0 auto;
    max-width:960px;
}
#user{
	margin: 1em;
}
#logon{
	height:3em;
}
#logoff{
	height:3em;
}
#signup{
	height:3em;
}

#flag{
	width:100%;
	font-size:3em;
	padding: .5em;
	overflow:hidden;
}
nav{display:block;}

ul.navbar li a {font-size :21px;}
/* disappear mobile menu */
.nav-button, .primary-nav, .nav-map {display:none;}
article{
	width:70%;
	padding: 1em;
	line-height:1.5em;
	overflow:hidden;
	border-radius:10px;
	margin-bottom:1em;
}
.formInput {
	width:50%
}
textarea {
	width:100%;
	height: 10em;
}
#footer{
	font-size: .75em;
	padding:1em 0;
}
#footer ul{
	padding: 0;
}
#footer li {
	display:inline;
	padding: 0 10px;
}
}

/* After Everything Else */
.visibleOn{
	display:initial;
}
.visibleOff{
	display:none;
}