@charset "utf-8";
/* Smartphone CSS Document */
/* GHOULIE MANOR CSS Version 1.01 */

/* ######################################## */

/* Smartphones (portrait and landscape) ---------- */

/* ~~ LAYOUT ~~ */

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	min-width: 240px;
	margin: 0 auto;
}

.content { padding: 5px 0; }

.content ul, .content ol { padding: 0 5px 5px 20px; }

header {
	width: 100%;
	/* [disabled]height: 350px; */
	position: relative;
}
	
#logo {
	/* [disabled]position: absolute; */
	/* [disabled]top: 40px; */
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]margin-top: 40px; */
}

#logoPrint {display: none;}

#flashHeader {display: none;}

nav { }

section {
	width: 100%;
	margin-top: 215px; /* This is to give spacing in layout. */
}

#topNav.opened + section {margin-top: 15px;} /* This rule applies to the section tag only when the responsive nav menu is toggled open. The margin setting should correspond with the section margin setting above but removing any extra space for layout, such as 200px. */

article {
	width: 100%;
	min-height: 300px;
}

.sidebar1, .sidebar2, .sidebarSocial {
	width: 100%;
	padding: 8px;
}

.sidebar1 {}

.sidebar2 {}

.sidebarSocial {}

.sidebarBlock {}

footer {}

#ftrWeb {display: none;}

/* ######################################## */

/* ~~ TYPOGRAPHY ~~ */

body {
	font-size: 1em;
}

h1, h2, h3, h4, h5, h6 { color: #779C7A; }

p {}

.center {
	text-align: center;
}

article {
	text-align: left;
}

article h1 {
	font-size: 1.75em;
}

article h2 {
	font-size: 1.5em;
}

article h3, article h4, article h5, article h6 {
	font-size: 1.25em;
}

aside h1 {
	font-size: 1.25em;
}

aside h2 {
	font-size: 1.15em;
}

aside h3, aside h4, aside h5, aside h6 {
	font-size: 1em;
}

.story h1+p:first-letter, p.dropcap:first-letter { /* Drop Cap Styling */
	font-size: 4em;
	line-height: 1em;
	vertical-align: text-top;
	float: left;
	margin-right: 3px;
	margin-top: -5px;
	color: #509156;
	text-shadow: 2px 2px 0px #000, 4px 4px 0px #33495b;
}

.story h1+p:first-line, p.dropcap:first-line { /* First Line Styling */
	font-variant: small-caps;
}

footer {font: .8em/normal Arial, Helvetica, sans-serif;}


/* ######################################## */

/* ~~ LINKS ~~ */
a:link {text-decoration: underline;}

a:visited {	text-decoration: underline;}

a:hover, a:active, a:focus { text-decoration: none; }

.sidebarBlock h1 a, .sidebarBlock h2 a, .sidebarBlock h3 a, .sidebarBlock h4 a, .sidebarBlock h5 a, .sidebarBlock h6 a { 
	color: #FFF;
	text-decoration: none;
}

#footerNav ul a, #footerNav ul a:link, #footerNav ul a:visited, #footerNav ul a:hover, #footerNav ul a:active, #footerNav ul a:focus {
	color: #6BAD72;
	text-shadow: none;
}

/* ######################################## */

/* ~~ NAVIGATION MENUS ~~ */
nav { }

nav ul, nav li {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.35em;
}

nav ul { }

nav ul li {	white-space: nowrap;}

nav ul a, nav ul a:link, nav ul a:visited, nav ul a:hover, nav ul a:active, nav ul a:focus {
	color: #000;
	padding: 5px 15px;
	display: block;
	width: auto;
	text-decoration:none;
	white-space: nowrap;
	cursor: pointer;
}

nav ul a, nav ul a:visited { 
	text-shadow: 0 0 2px #0F0, 0 0 4px #0F0, 0 0 5px #0F0;
}

nav ul a:hover, nav ul a:active, nav ul a:focus { 
	text-shadow: 0 0 6px #0F0, 0 0 10px #0F0, 0 0 15px #0F0;
}


nav ul li:hover > a {}

/* Drop-Down Navigation General*/
nav ul li:hover > ul {
	top: 100%;
	left: 0;
	opacity: 1;
}

nav ul ul {
	display: none; /* Disables submenus on small screen devices */
	position: absolute;
	top: -99999px; /* Hide submenus from viewport */
	left: 0;
	opacity: 0; /* Hide submenu, need this for transition */
	z-index: 99999;
}

nav ul ul ul {
	position: absolute;
	top: -99999px;
	left: 100%;
}

/* Specific Menus */
#topNav, #footerNav {
	margin-right: auto;
	margin-left: auto;
}

#topNav {
	/* [disabled]padding:15px; */
	/* [disabled]position: absolute; */
	top: 5px;
	right: 0px;
	width: 60%;
}

#topNav ul {
	/* [disabled]text-align: left; */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-color: rgba(0,0,0,.75);
	-moz-box-shadow: 0px 0px 20px #0F0;
	-webkit-box-shadow: 0px 0px 20px #0F0;
	box-shadow: 0px 0px 20px #0F0;
	position: inherit;
	top: 40px;
	right: 0px;
}

#footerNav {
	display: none;
	font-size: .8em;
	margin-top: 5px;
	margin-bottom: 15px;
}

#footerNav ul li {border-right: none;}

#footerNav ul li:last-child {border-right: none;}

#footerNav ul li {}

#footerNav ul li:first-child {}

footer .gotoTop { /* Controls display of Return to Top link in footer */
	display: block;
	margin: 10px;
}

/* ~~ Horizontal Menu Settings ~~ */

.horizMenu {
	list-style: none;
	text-align: center;
}

.horizMenu li {
	display: block; /* disables side-by-side and makes it a stacked menu for mobile */
}

.horizMenu ul li, .horizMenu ul ul li {
	position: relative;
}

.horizMenu ul ul li ul {
	position: absolute;
	top: 0;
	left: 100%;
}

.horizMenu ul ul li {
	display: block;
}

/* ~~ Vertical Menu Settings ~~ */

.vertMenu {
	width: 200px;
}

.vertMenu ul {
	width: auto;
	text-align: left;
}

.vertMenu ul li, .vertMenu ul ul li {
	position: relative;
}

.vertMenu ul li ul, .vertMenu ul ul ul {
	visibility: hidden;
}

.vertMenu ul li:hover ul, .vertMenu ul ul li:hover ul {
	visibility: visible;
}

nav.vertMenu ul li ul, nav.vertMenu ul ul li ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* ~~ Mobile Navigation Menu Icon ~~ */
#menu-icon, #nav-toggle {
	display: inline-block;
	width: 36px;
	height: 36px;
	text-indent: -1000em;
	background: url(../_images/sprites_web.png) no-repeat;
	background-position: 0px 0px;
	/* [disabled]margin: 10px 10px 10px 75px; */
	margin-left: auto;
	margin-right: auto;
}

a#menu-icon + ul {visibility: hidden;}

a#menu-icon:hover + ul, a#menu-icon + ul:hover {visibility: visible;} /* This controls the visibility of the Menu */

#topNav.opened {
  max-height: 9999px;
}

#topNav.closed {
	visibility: hidden;
}

#nav-toggle {display: block;} /* Controls the display of the Menu Toggle */


/* ######################################## */

/* ~~ SOCIAL MEDIA ICONS ~~ */
.social {
	margin-bottom: 10px;
}

.social li {
	display: inline-block;
}

.social a {
	background: url(../_images/sprites_social.png) no-repeat;
	/* [disabled]-webkit-transition: -webkit-transform 0.2s ease-in-out; */ /* Animation FX */
	/* [disabled]-moz-transition: -moz-transform 0.2s ease-in-out; */ /* Animation FX */
	/* [disabled]-o-transition: -o-transform 0.2s ease-in-out; */ /* Animation FX */
	/* [disabled]transition: transform 0.2s ease-in-out; */ /* Animation FX */
}

.social a {
	height: 36px;
	width: 36px;
	display: block;
	text-indent: -1000em;
	padding: 0;
	margin: 0px 5px 0px 0px;
}

.social a:hover {
	/* [disabled]-webkit-transform: translateY(-2px); */
	/* [disabled]-moz-transform: translateY(-2px); */
	/* [disabled]-o-transform: translateY(-2px); */
	/* [disabled]-ms-transform: translateY(-2px); */
	/* [disabled]transform: translateY(-2px); */
}

.social .facebook {
	background-position: 0px 0px;
}

.social .facebook:hover {
	background-position: 0px -50px;
}

.social .twitter {
	background-position: -50px 0px;
}

.social .twitter:hover {
	background-position: -50px -50px;
}

.social .twitter2 {
	background-position: -100px 0px;
}

.social .twitter2:hover {
	background-position: -100px -50px;
}

.social .youtube {
	background-position: -150px 0px;
}

.social .youtube:hover {
	background-position: -150px -50px;
}

.social .rss {
	background-position: -200px 0px;
}

.social .rss:hover {
	background-position: -200px -50px;
}

.social .google {
	background-position: -250px 0px;
}

.social .google:hover {
	background-position: -250px -50px;
}

.social .myspace {
	background-position: -300px 0px;
}

.social .myspace:hover {
	background-position: -300px -50px;
}

.social .linkedin {
	background-position: -350px 0px;
}

.social .linkedin:hover {
	background-position: -350px -50px;
}

.social .pinterest {
	background-position: -400px 0px;
}

.social .pinterest:hover {
	background-position: -400px -50px;
}

.social .email {
	background-position: -450px 0px;
}

.social .email:hover {
	background-position: -450px -50px;
}

.social .amazon {
	background-position: -500px 0px;
}

.social .amazon:hover {
	background-position: -500px -50px;
}

.social .appstore {
	background-position: -550px 0px;
}

.social .appstore:hover {
	background-position: -550px -50px;
}
	
/* END .social Classes CSS */

/* ######################################## */

/* ~~ THEME GRAPHICS ~~ */
/* DISABLED
body { 
	background-color: #000;
	background-image: url(../_images/lantern-mobile.png), url(../_images/bg-mobile.jpg);
	background-position: -50px 225px, top center;
	background-repeat: no-repeat, no-repeat;
	background-attachment: scroll, scroll;
}
END DISABLED */

body { 
	background-color: #000;
	background-image: url(../_images/bg-mobile.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

.sidebarBlock, section {
	background: rgba(0,0,0,.75);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	-ms-border-radius: 15px;
	border-radius: 15px;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.75);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.75);
	-o-box-shadow: 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.75);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.75);
	box-shadow: 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.75);
}

.container {}

article h1 {
	/* [disabled]background: url(../_images/line.gif) repeat-x left 1.19em; */
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 0;
	padding-right: 0;
}

aside h1, aside h2 {
	/* [disabled]background: url(../_images/line.gif) repeat-x left 1.19em; */
	margin-top: 15px;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 5px;
	color: #FFF;
	font-size: 1.35em;
	letter-spacing: 2px;
}

/* ######################################## */

/* ~~ SOCIAL MEDIA WIDGETS ~~ */

.social-toolbar {
	margin-left: auto;
	margin-right: auto;
}

.social-toolbar > div {
	display: inline-block;
}

/* Facebook Widgets */
.sb-fb {display:none} /* Hide Facebook Sidebar Box */

/* ~~ Twitter Widgets ~~ */
.sb-twitter {display:none} /* Hide Twitter Sidebar Box */

/* ######################################## */

/* ~~ MISC CLASSES ~~ */


}

/* ######################################## */

/* Smartphones (portrait) ---------- */
@media only screen
and (max-width: 320px) {
	
body {}

#flashHeader {display: none;}

#logoPrint {display: none;}

}