/* Smart Phone Responsive Web Design below 360px */
@media only screen and (min-width:360px)
{
body {background-color:rgba(20,0,20, 0.8);width:100%;margin:auto;text-align:center;height: 100%;}

header a#phone {display:block;	text-align:center; text-decoration:none;
	font:bold 1.4em Georgia, sans-serif; color:#444}
nav {clear:both;text-align:center; background-color:#888;}
nav a {
	text-decoration:none; display:block;
	color:#111; font-weight:bold;
	border-bottom: 1px #111 solid;
     } /* line-height will verticaly align center */
nav a#pullMenu {border-bottom:none; background: cyan; text-align:left; }
nav .pullText {font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:.6em}
nav ul {display:none; margin:0; padding: 0; white-space:nowrap;}
nav li {list-style-type:none}
aside {float:right; width:100%; padding-top:4%;background-color:rgba(20,0,20, 0.8);}
section {padding:2%; width:96%; background-color:#111; color:white; float:left}
body {width:95%; margin:auto}
footer {color:white;width:100%; margin:auto;font-size:20px; background-color:#333;transition: margin-left .5s;}
#masthead {display:none}
#background {display:none}

#nav{
	height: 10%;
	width: 100%;
	margin: auto;
	top:0;
	left: 0;
	z-index: 1;
	color:white;
	position:sticky;
	text-align: center;
	background-color: rgb(178,1,278); /* Black fallback color */
	background-color: rgba(178,1,278, 0.5); /* Black w/opacity */
}

#content
{
	color:white;
	width:100%;
	transition: margin-top .5s; padding: 0px;
	background-color:rgba(20,0,20, 0.8);
}


}
@media only screen and (min-width:763px) /* Tablet RWD */
{
body {background-color:rgba(20,0,20, 0.8);width:100%;margin:auto;text-align:center;height: 100%;}

nav {display:block;}
nav a {display:inline; border-top: 1px #111 solid;}
nav a#pullMenu {display:none}
nav ul {display:block;}
nav li {display:inline;}
section {float:left; width:60%}
aside {float:right; width:34%; padding-top:4%; padding-right:2%;}
nav {color:black;width:100%; margin:auto;font-size:20px}
	nav li {float:left;border-right: 1px solid #bbb}
	nav ul :last-child{border-right: none;}
	nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333}
	nav li a {display: block;color: white;text-align:center; padding:14px 17px;text-decoration: none;border-bottom : none; border-top: none;}
	nav li a:hover {background-color:#555; color:cyan}
	nav .active {background-color:#4CAF50; color:white}
footer {color:white;width:100%; margin:auto;font-size:20px; background-color:#333;transition: margin-left .5s;}
#masthead {display: block ;height: 152px; width: 600px; margin:auto; text-align: center; background-image:url(media/images/Masthead/Creation_refuge_mast.jpg)}
#background {display: block;
	background-image:url("Site_Resources/Backgrounds/Creation_background.png");
	height: 134px; background-position: center;
	background-repeat: no-repeat;background-size: cover;
transition: margin-left .5s;}
#nav{
	height: 10%;
	width: 100%;
	margin: auto;
	left: 0;
	top:0;
	color:white;
	position:sticky;
	text-align: center;
	background-color: rgb(178,1,278); /* Black fallback color */
	background-color: rgba(178,1,278, 0.5); /* Black w/opacity */
}
#content
{
	color:white;
	width:100%;
	transition: margin-top .5s; padding: 0px;
	background-color:rgba(20,0,20, 0.8);
}
}

@media only screen and (min-width:1000px) /* Desktop RWD */
{
body {background-color:rgba(20,0,20, 0.8);width:80%;height: 100%; margin:auto;text-align:center;}

nav {color:black;width:100%; margin:auto;font-size:20px}
	nav li {float:left;border-right: 1px solid #bbb}
	nav ul :last-child{border-right: none;}
	nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333}
	nav li a {display: block;color: white;text-align:center; padding:14px 17px;text-decoration: none;border-bottom : none; border-top: none;}
	nav li a:hover {background-color:#555; color:cyan}
	nav .active {background-color:#4CAF50; color:white}

	nav ul li:hover ul{display:block; border:none}
	nav ul ul{display:none ;background-color:#555; position:absolute}
	nav ul ul:last-child{border-right:none}
	nav ul ul li {display:block;}
	nav ul ul li a{display:block;color: white;text-align:center; padding:17px 9px;text-decoration: none}
	nav ul ul li a:hover{color:cyan}

footer {color:white;width:100%; margin:auto;font-size:20px; background-color:#333;transition: margin-left .5s;}

section {float:left; width:64%}
aside {float:right; width:30%; padding-top:4%;background-color:rgba(20,0,20, 0.8)}
#background {
	display: block;
	background-image:url(Site_Resources/Backgrounds/Creation_background.png);
	height: 134px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: margin-left .5s;
	margin-bottom: 1%;
	}
#nav{
	height: 15%;
	width: 5%;
	position: fixed;
	/*writing-mode: vertical-rl;*/
	writing-mode: vertical-rl;
	z-index: 1; /* Sit on top */
	color:white;
	left: 0;
	top: 15%;
	text-align: center;
	background-color: rgb(178,1,278); /* Black fallback color */
	background-color: rgba(178,1,278, 0.5); /* Black w/opacity */

}
#content {float:left; color:white; width: 100%; transition: margin-left .5s;background-color:rgba(20,0,20, 0.8)}

}