@charset "utf-8";

@viewport {
	zoom: 1.0;
	width: extend-to-zoom;
}

html {
	width: 100vw;
	height: 100vh;
     font-size: 1rem;
	overflow: hidden;
}

body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#pageWrapper {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

#pageLeft {
	position: fixed;
	top: 0;
	left: 0;
	width: 20%;
	max-width: 12.5rem;
	height: 100%;
	background: url(../images/main/bkgdJadeLeft.png) top left no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
}

#siteNavigation {
	position: relative;
	top: 1%;
	left: 0;
	width: 100%;
}

#siteNavigation span {
	display: block;
	width: 22%;			/*  Max-width of span ÷ max-width of parent section X 100   */
	max-width: 3rem;		/*  Max-width of tile  */
	min-width: 2rem;		/*  Min-width of tile  */
}

#DMCA {
	position: fixed;
	bottom: 1.5rem;
	left: 1%;
	width: 20%;
}

#DMCA:hover { opacity: 0.5; }

#pageRight {
	position: fixed;
	top: 0;
	left: 20%;
	width: 80%;
	height: 100%;
	text-align: center;
}

#back1page {
	position: absolute;
	top: 1%;
	left: -5%;
	max-width: 100%;
	z-index: 1000;
}

#back1page span {
	position: relative;
	display: block;
	max-width: 3.5rem;
}

#flagContainer {
	position: fixed;
	top: 1%;
	left: 20%;
	width: 78%;
	height: 10%;
}

#flagContainerPub {
	position: fixed;
	top: 1%;
	left: 20%;
	width: 78%;
	height: 10%;
}

#flagContainer:hover { opacity: 0.5; }

#contentContainer {
	position: absolute;
	top: 12%;
	bottom: 5rem;
	left: 0;
	width: 100%;
	margin: 1rem auto;
	text-align: center;
	overflow: auto;
}

#contentContainerPub {
	position: absolute;
	top: 12%;
	bottom: 5rem;
	left: 0;
	width: 100%;
	margin: 1rem auto;
	text-align: center;
	overflow: auto;
}

#contentHeader {
	position: relative;
	display: block;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

#contentHeader span { display: inline-block; max-width: 100%; margin: 0; }

#contentSubheader {
	position: relative;
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

#contentSubheader span { display: inline-block; max-width: 100%; margin: 0 auto; }

#content {
	position: relative;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

/* =============================================================================
   Promotion Block - Bottom of pages
   ========================================================================== */
#promotion {
	position: relative;
	display: block;
	width: 90%;
	margin: 0 auto 1rem auto;
	font-size: smaller;
}

#promotion span {
	position: relative;
	display: block;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

#promoLeft, #promoRight {
	position: relative;
	max-width: 12.5rem !important;
	padding: 0;
}

#promoRight {
     padding-top: 1rem;
	max-width: 10.375rem !important;
}

#promoLeft a, #promoMiddle, #promoRight a {
	display: block;
	margin: 0 auto;
}

span#promoMiddle { padding-top: 1rem; text-align: left !important;  }

#navTop footer {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 900;
}

#navTop span {
	display: block;
	max-width: 3.5rem;
	margin: 0.25rem auto;
}

#pageRightFooter {
	position: fixed;
	bottom: 1rem;
	left: 19%;
	width: 80%;
	max-height: 5rem;
	text-align: center;
}

#networkingContainer {
	position: relative;
	width: 100%;
}

#networkingContainer span {
	display: inline-block;
	top: 0;
	width: 16%;			/* width of parent section(80%) divided by the # of tiles(5) in the parent container  */
	max-width: 2rem;
}

#pageFooter {
	position: fixed;
	bottom: 0.125rem;
	left: 1%;
	width: 98%;
	height: 1rem;
}

#pageFooter span {
	display: inline-block;
	max-width: 49%;
	max-height: 1rem;
}

#pageFooter span:first-child { float: left; }

#pageFooter span:nth-child(2) { float: right; }