/* ==== Import Fonts/Style-sheets === */
/* avoid @import rules because they defer the loading of the
 * included resource until the file is fetched
 * @import url(https://fonts.googleapis.com/css?family=Emilys+Candy&text=STEAMpunks%202016);
*/

/* rgba opacity
 * first thee numbers representing the color in RGB values and the fourth
 * representing a transparency value between 0 and 1 (zero being fully
 * transparent and one being fully opaque)
 * To hide vertical scrollbar only: overflow-y:hidden;
 * To hide horizontal scrollbar only: overflow-x:hidden;
 */

/* ==== Globals ==================== */
html {
	background-color: #ffffff;
	font-size: 82%;
}

html,
body,
#page-wrap,
#page-wrap-inner {
	height: 100%;
	min-height: 1200px;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

body {
	color: #fff;
	text-align: center;
	/* text-shadow: 0 1px 3px rgba(0,0,0,.5); */
	/*	overflow: auto;
		overflow-y: hidden !important; */
}

/* Disable all mobile device scrollbars */
/* https://css-tricks.com/custom-scrollbars-in-webkit/ */
/*
body::-webkit-scrollbar {
	background-color: #000000;
    display: none;
	width: 0px;
}
*/

/* Links */
a,
a:focus,
a:hover {
	color: #ffffff;
}

.clearfix {
	clear:both;
}

/* ==== Base structure ================ */
/* Extra markup and styles for table-esque vertical & horizontal centering */
/* set min-width & max-width to suit mobile device screen width (viewport) */
#page-wrap, 
#footer {
	clear: both;
	/* border-left: 1px solid #000000; */
	/* display: table; */
	/*	border-top: 1px solid #ffffff;  */
	/* width: 100%; */
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	min-width: 320px;
	max-width: 564px;
	text-align: center;
	vertical-align: top;
}


/* The first value is the horizontal position and the second value is the vertical.
 * The top left corner is 0% 0%. The right bottom corner is 100% 100%.
 * If you only specify one value, the other value will be 50%.
 * Default value is: 0% 0% */

#page-wrap-inner {
	clear: both;
	background-color: #202020;
	background-image: url(../img/bg02-mary-564x1200.jpg);
	/* background-image: url(../img/view-01-564x700.jpg); */
	background-repeat: no-repeat;
	/* background-attachment: fixed; */
	/* background-position: top center; */
	background-position: center top;
	/* background: transparent url('../img/bg03-paris-metro-1000x1000.jpg') no-repeat top center; */
	/* display: table-cell; */
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

/* ==== Header ===================== */
#navbar {
	text-align: center;
	padding: 2px 2px 1px 0px;
}

ul.menu-top {
	height: 25px;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.menu-top > li {
	display: inline-block;
	padding-top: 2px;
	height: 20px;
  /* border-left: 1px dotted #cccccc; */
	border-top: 1px dotted #666666;
	border-bottom: 1px dotted #666666;
}

.menu-top > li + li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
}

.menu-top > li > a {
	background-color: rgba(64,64,64,0.4);
	border-bottom: 1px solid transparent;
	/* border-radius: 5px; */
	color: #aaaaff;	/* IE8 proofing */
	line-height: 20px;
	/* color: rgba(255,255,255,0.75); */
	font-weight: bold;
	font-size: 0.9em;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 2px;
	padding-left: 3px;
	text-decoration: none;
	text-transform: uppercase;
}

.menu-top > li > a:hover,
.menu-top > li > a:focus {
	background-color: #666666;
	border-bottom-color: #ffffff;
	color: #fff148;
	/*
	background-color: transparent;
	border-bottom-color: #a9a9a9;
	border-bottom-color: rgba(255,255,255,0.25);
	*/
}

.menu-top > .active > a,
.menu-top > .active > a:hover,
.menu-top > .active > a:focus {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ==== Content ============== */
.spacer {
	background: transparent;
	font-size: 1px;
	clear: both;
	margin-top: 10px;
	padding: 0px;
	width: 100%;
}

#content-wrap {
	clear: both;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	/* border-left: 5px solid transparent; */
	width: 100%;
}

/*
#content-wrap {
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
}
*/

#content {
	font-family: 'Emilys Candy', cursive;
	margin-right: auto;
	margin-left: auto;
	margin-top: 8px;
	margin-bottom: 1px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	max-width: 320px;
	overflow: hidden;
}

#content-title {
	clear: both;
	/* color: #feedb7; */
	/* color: #fed488; */
	/*	font-family: 'Emilys Candy', cursive;
		font-family: 'Lancelot', cursive;
		font-family: 'Ewert', cursive;
		font-family: 'Lancelot', cursive;
		font-family: 'Rye', cursive;
		font-family: 'Faster One', cursive; */
	font-family: 'Emilys Candy', cursive;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	/* text-transform: uppercase; */
}

#content h1 {
	font-size: 2.25em;
	padding: 0px;
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	text-align: center;
	vertical-align: bottom;
}

#content h1 .punks-text {
	/* font-size: 0.8em; */
	/* margin-right: 3px; */
	margin-left: 3px;
}

#sub-title,
#my-sub-title {
    background-color: rgba(0,64,64,0.2);
	/* border-top: 1px solid #666666; */
	border-right: 1px solid #666666;
	border-bottom: 1px solid #666666;
	border-left: 1px solid #666666;
	font-size: 1.35em;
	font-weight: bold;
	line-height: 110%;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
	padding-top: 8px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	/* text-transform: uppercase; */
	/* text-align: justify; */
	text-justify: inter-word;
	max-width: 300px;
	border-radius: 15px;
}

#sub-title p,
#my-sub-title p {
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}

#my-sub-title {
    background-color: transparent;
	border-style:none;
	font-size: 1.8em;
}

/* ==== Sub-title button ========== */
#sub-title #btn-wrap {
	margin-top: 1px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}

#sub-title a.btn {
  	background-color: rgba(255,255,255,0.3);
  	/* background-color: transparent; */
	border: 1px solid #ffffff;
	border-radius: 5px;
 	color: #000000;
	font-family: arial,sans-serif;
	font-weight: bold;
	font-size: 0.9em;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	text-shadow: none;
	text-decoration: none;
}

#sub-title a.btn:hover,
#sub-title a.btn:focus {
	/* background-color: #ffffff; */
}

#sub-title a.btn:hover {
	color: #fff148;
  	background-color: rgba(0,0,0,0.3);
	/* background-color: #000000; */
}


/* ==== Footer ========================= */
#footer a,
#footer {
	padding-top: 5px;
	color: #999999; /* IE8 proofing */
	/* color: rgba(192,192,192,0.5); */
	/* background-color: #101010; */
    /* background-color: rgba(0,64,64,0.8); */
	/* background-color: rgba(84,112,147,0.8); */
	font-size: 10px;
	text-shadow: none; /* Prevent inheritence from `body` */
}


/* ==== mobile-specific CSS styles go here == */
/*
@media (min-width: 768px) {
  .logotype {
    float: left;
  }
  .menu-top {
    float: right;
  }
}
*/

/*
 * The difference is subtle but very important: min-width is based on the size of
 * the browser window, whereas min-device-width is based on the size of the
 * screen
 * In terms of media queries, you will probably want to use max-width rather than
 * max-device-width, since max-width will target the viewport (current browser
 * window), whereas max-device-width will target the device's actual full screen
 * size/resolution.
 *
 * When page is viewed with a device (or web browser horizontally
 * re-sized) less than 480 pixels, these definitions will activate.
 *
 */

/*
@media only screen and (max-width: 560px) {
...or...

@media only screen and (max-device width: 480px) {
    table[class=email],
	table[class=email-content] { 
		clear: both;
	    width: 320px !important;
	}
}
*/

/*
	If you want scrollbars hidden by id element, use
	#element::-webkit-scrollbar { 
    	display: none; 
	}
	
	If you want all scrollbars hidden, use
	
	::-webkit-scrollbar { 
	    display: none; 
		}
*/

@media only screen and (max-width: 480px) {
	body {
		/* width:320px; */
		/* max-width:320px; */
	    font-size: 13px !important;
		/* overflow: hidden; */
	}

}

/* ==== SFX =========================== */
/* ClearFix solution */
.clear-fix:after {
	content:"";
    display:table;
	clear:both;
}


/* ==== Google fonts ================= */
/*
 See: https://developers.google.com/fonts/docs/getting_started#Subsets

 <link href='https://fonts.googleapis.com/css?family=Ewert|Faster+One'
 rel='stylesheet' type='text/css'>
 @import url(https://fonts.googleapis.com/css?family=Ewert|Faster+One);

 Integrate the fonts into your CSS:

 The Google Fonts API will generate the necessary browser-specific CSS to use
 the fonts. All you need to do is add the font name to your CSS styles. For
 example:

 font-family: 'Faster One', cursive;
 font-family: 'Ewert', cursive;

 h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }

 http://fonts.googleapis.com/css?family=Inconsolata&text=STEAM%20punks%2016

 Using @media for mobile layout:
 http://www.sitepoint.com/how-to-code-html-email-newsletters/
 */