/*<meta />*/



@import url("FontStyles.css");

/*==Topic General Styles==*/

/*
    cursive font: 'PrimaryCursive'
    serif font: 'PrimarySerif'
    sans-serif font: 'PrimarySansSerif'
    gray: #423732
    orange: #ffa200  ; formerly #ec511b
    orange-darker: #d58600
    blue: #01b3e3  ; formerly #5cd3ff
    blue-darker: #439bbb
    green: #00db7a
    green-darker: #00a65d
    yellow: #f8e96b ; formerly #efa30f
    yellow-darker: #a69c4c
    purple: #e47aff; formerly #a31466  
    purple-darker: #a458b8
*/

/* Global fonts and color outside of the main frame */

html,
body
{
	background-color: #ededed;
	font-family: 'PrimarySerif', serif;
	font-size: 1.1em;
}

/* Link Styles */

.title-bar .menu-icon span
{
		width: 60px;
}

a:link
{
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #01b3e3;
	font-size: inherit;
}

a:visited
{
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #01b3e3;
}

a:hover
{
	color: #01b3e3;
	text-decoration: none;
}

/*
a:link
{
	font-size: inherit;
	color: #d58600;
	text-decoration: underline;
	font-weight: 500;

}

a:visited
{
	color: #d58600;
}

a:hover
{
	color: #01b3e3;
	border-color: #01b3e3;
}
*/

h1,
h2,
h3,
h4
{
	font-family: PrimarySansSerif, sans-serif;
}

h1
{
	font-size: 1.6em;
	margin-bottom: 16px;
}

h2
{
	font-size: 1.4em;
	margin-bottom: 12px;
}

h3
{
	font-size: 1.2em;
	margin-bottom: 10px;
}

h4
{
	font-size: 1.0em;
}

blockquote
{
	font-family: PrimarySansSerif, sans-serif;
	font-size: 1.2em;
	margin-top: 10px;
	margin-left: 8px;
}

div.spacer
{
	height: 18px;
}

div.spacerSmall
{
	height: 6px;
}

p.larger
{
	font-size: 1.3em;
}

/* Headers inside skew containers, unskewed to look normal */

h1.headerLeft
{
	vertical-align: middle;
	line-height: 80px;
	position: relative;
	-moz-transform: skewX(40deg);
	-ms-transform: skewX(40deg);
	-webkit-transform: skewX(40deg);
	transform: skewX(40deg);
}

h1.headerRight
{
	vertical-align: middle;
	line-height: 80px;
	position: relative;
	text-align: right;
	-moz-transform: skewX(-40deg);
	-ms-transform: skewX(-40deg);
	-webkit-transform: skewX(-40deg);
	transform: skewX(-40deg);
}

/* Container for inside frame and off-white background color */

div.wrapper
{
	background: #f9f9f9;
	max-width: 900px;
	margin: auto;
}

/* Subcontainers for the left and right text below skew headers */

div.left
{
	margin-right: 25%;
	margin-left: 2%;
}

div.right
{
	margin-left: 25%;
	margin-right: 2%;
}

div.centerContent
{
	display: block;
	width: 100%;
	margin: auto;
	text-align: center;
	margin-bottom: 20px;
}

div.centerContent p
{
	width: 80%;
	margin: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 1px solid #6a6266;
}

/* Container for skewed headers */

div.skewContainer
{
	overflow: hidden;
	clear: both;
}

/* Skewed headers */

div.skewHeaderLeft
{
	height: 80px;
	margin-right: 20%;
	margin-left: -60px;
	-moz-transform: skewX(-40deg);
	-ms-transform: skewX(-40deg);
	-webkit-transform: skewX(-40deg);
	transform: skewX(-40deg);
}

div.skewHeaderRight
{
	height: 80px;
	margin-left: 20%;
	margin-right: -60px;
	-moz-transform: skewX(40deg);
	-ms-transform: skewX(40deg);
	-webkit-transform: skewX(40deg);
	transform: skewX(40deg);
}

/* Icons in skewed headers, unskewed to look normal*/

img.iconLeft
{
	float: left;
	margin-left: 70px;
	margin-right: 20px;
	height: 90px;
	length: auto;
	margin-top: -5px;
	-moz-transform: skewX(40deg);
	-ms-transform: skewX(40deg);
	-webkit-transform: skewX(40deg);
	transform: skewX(40deg);
}

img.iconRight
{
	float: right;
	margin-right: 70px;
	margin-left: 20px;
	height: 90px;
	length: auto;
	margin-top: -5px;
	-moz-transform: skewX(-40deg);
	-ms-transform: skewX(-40deg);
	-webkit-transform: skewX(-40deg);
	transform: skewX(-40deg);
}

/* FLOATS */

div.floatRight
{
	float: right;
	margin-left: 15px;
}

div.floatLeft
{
	float: left;
	margin-right: 30px;
}

div.bottomClear
{
	overflow: hidden;
	clear: both;
	height: 10px;
}

/* QUOTES */
/* Container for quotes; can float left or right */

div.quoteBox
{
	width: 250px;
	margin-top: 3px;
	margin-bottom: 3px;
}

/* Skewed borders for quote boxes */

.skewBorderLeft
{
	border-left: 3px solid;
	-moz-transform: skewX(3deg);
	-ms-transform: skewX(3deg);
	-webkit-transform: skewX(3deg);
	transform: skewX(3deg);
}

.skewBorderRight
{
	border-left: 3px solid;
	-moz-transform: skewX(-3deg);
	-ms-transform: skewX(-3deg);
	-webkit-transform: skewX(-3deg);
	transform: skewX(-3deg);
}

/* Non-skewed borders for slideshow boxes */

.slideshowBorderLeft
{
	border-left: 4px solid;
	border-right: 0px;
	padding-left: 16px;
	padding-right: 0px;
}

.slideshowBorderRight
{
	border-right: 4px solid;
	border-left: 0px;
	padding-right: 16px;
	padding-left: 0px;
}

p.quote
{
	font-family: 'PrimaryCursive', cursive;
	color: #423732;
	font-size: 1.4em;
	line-height: 1.0em;
	padding: 12px 8px 12px 8px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Cover Image */

div.coverImage
{
	width: 225px;
	height: 300px;
	margin-top: 5px;
	margin-bottom: 5px;
	overflow: hidden;
}

/* SLIDES */
/* Container for slideshows; can float left or right */

div.slideBox
{
	width: 272px;
	height: 250px;
	margin-top: 5px;
	margin-bottom: 5px;
	overflow: hidden;
}

.slideTop
{
	animation-name: xfade;
	-webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	animation-iteration-count: infinite;
	animation-duration: 15s;
	animation-direction: alternate;
	position: relative;
	top: -255px;
	margin-left: 0px;
}

.slideBottom
{
	margin-left: 0px;
}

.slideClear
{
	position: relative;
	top: -250px;
}

img.px250
{
	height: 250px;
	width: 250px;
}

img.px200
{
	height: auto;
	width: 200px;
}

.slideTop:hover
{
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.slideDelay
{
	-moz-animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
}

@keyframes xfade {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
} 

/* COLORS */

.colorBlue
{
	color: #01b3e3;
	border-color: #01b3e3;
}

.colorOrange
{
	color: #ffa200 ;
	border-color: #ffa200 ;
}

.colorGreen
{
	color: #00db7a;
	border-color: #00db7a;
}

.colorYellow
{
	color: #f8e96b;
	border-color: #f8e96b;
}

.colorPurple
{
	color: #e47aff;
	border-color: #e47aff;
}

/* BACKGROUND COLORS */

.colorBlueBackground
{
	background-color: #01b3e3;
}

.colorOrangeBackground
{
	background-color: #ffa200 ;
}

.colorGreenBackground
{
	background-color: #00db7a;
}

.colorYellowBackground
{
	background-color: #f8e96b;
}

.colorPurpleBackground
{
	background-color: #e373ff; /* #e47aff */
}

/* DARKER COLOR VERSIONS FOR TEXT */

.colorBlueDarker
{
	color: #439bbb;
}

.colorOrangeDarker
{
	color: #d58600;
}

.colorGreenDarker
{
	color: #00a65d;
}

.colorYellowDarker
{
	color: #a69c4c;
}

.colorPurpleDarker
{
	color: #a458b8;
}

/* SPANS AND GENERIC CLASSES */

span.italic
{
	font-style: italic;
}

span.center
{
	text-align: center;
}



/*==Master Page Topic Layout==*/

/*This style applies the grey background. This HTML element is not on a master page, it is used at compile time.*/

.main-section
{
	background: #6a6266; /* #583a49;*/
	/* dark gray: 666666; 635c51; 5c3219; 003900 */
}

nav.title-bar	/*The background-color applies transparency*/
{
	background-color: #6a6266; /* #437384; rgba(42, 96, 116, 1); */
}

div.content-container	/*Wraps the content on the masterpage and provides the background behind topics.*/
{
	margin-right: 0;
	background-color: #6a6266;
	padding-top: 0px; 
	padding-left: 0px; 
	padding-right: 0px;
	padding-bottom: 0px;
	min-height: 95vh;
}

div.side-content	/*Container for Menu proxy*/
{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 33.33%;
}

/*==Page Footer==*/

div.footer
{
	margin-top: 15px;
	padding-top: 0px;
	padding-bottom: 0px;
	height: 100px;
	background-size: auto;
	background-image: url('../Icons/BandedBackground.png');
	background-position: center;
	background-color: #6a6266;
	overflow: hidden;
}

div.footer a
{
	text-decoration: none;
	color: #DADADA;
}

div.footer p	/* Complex Selector: Any <p> that is contained within div.footer will have the following properties */
{
	font-size: 0.8em;
	color: #b1b1b1;
}

div.master-page-footer	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
	width: 62%;
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 0px;
	padding-top: 0px;
}

div.footer-logo
{
	height: 100px;
	background-color: #6a6266;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}

div.master-page-footer::before
{
	content: ' ';
	display: table;
}

div.master-page-footer::after
{
	content: ' ';
	display: table;
	clear: both;
}


div.master-page-footer > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


div.master-page-footer > div:nth-child(1)
{
	width: 20%;
	margin-left: 0%;
	overflow: hidden;
}

div.master-page-footer > div:nth-child(2)
{
	width: 60%;
	margin-left: 0%;
}

div.master-page-footer > div:nth-child(3)
{
	width: 20%;
	margin-left: 0%;
	overflow: hidden;
}


/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/

@media only screen and (max-width: 979px)
{
	/* Subcontainers for the left and right text below skew headers */

	div.left
	{
		margin-right: 12%;
		margin-left: 2%;
	}

	div.right
	{
		margin-left: 12%;
		margin-right: 2%;
	}

	h1.headerLeft
	{
		font-size: 1.2em;
		margin-bottom: 16px;
		vertical-align: middle;
		line-height: 80px;
		position: relative;
		-moz-transform: skewX(40deg);
		-ms-transform: skewX(40deg);
		-webkit-transform: skewX(40deg);
		transform: skewX(40deg);
	}

	h1.headerRight
	{
		font-size: 1.2em;
		margin-bottom: 16px;
		vertical-align: middle;
		line-height: 80px;
		position: relative;
		text-align: right;
		-moz-transform: skewX(-40deg);
		-ms-transform: skewX(-40deg);
		-webkit-transform: skewX(-40deg);
		transform: skewX(-40deg);
	}
	
	div.master-page-footer > div:nth-child(1)
	{
		width: 15%;
		margin-left: 0%;
	}

	div.master-page-footer > div:nth-child(2)
	{
		width: 70%;
	}

	div.master-page-footer > div:nth-child(3)
	{
		width: 15%;
		margin-left: 0%;
	}
}

@media only screen and (max-width: 667px)
{
	.main-section > .outer-row	/* Removes the padding around the topic container in mobile */
	{
		padding: 0;
	}

	/* Subcontainers for the left and right text below skew headers */

	div.left
	{
		margin-right: 2%;
		margin-left: 2%;
	}

	div.right
	{
		margin-left: 2%;
		margin-right: 2%;
	}

    div.quoteBox
    {
	    width: 160px;
    }

    div.skewHeaderLeft
    {
	    height: 40px;
    }

    div.skewHeaderRight
    {
	    height: 40px;
    }

    img.iconLeft
    {
        display: none;
    }

    img.iconRight
    {
        display: none;
    }

	
	h1.headerLeft
	{
		font-size: 1em;
		padding-top: 8px;
		padding-right: 15px;
		vertical-align: middle;
		line-height: 1.2em;
		position: relative;
        margin-left: 65px;
		-moz-transform: skewX(40deg);
		-ms-transform: skewX(40deg);
		-webkit-transform: skewX(40deg);
		transform: skewX(40deg);
	}

	h1.headerRight
	{
		font-size: 1em;
		padding-top: 8px;
		padding-left: 15px;
		vertical-align: middle;
		line-height: 1.2em;
		position: relative;
		text-align: right;
        margin-right: 65px;
		-moz-transform: skewX(-40deg);
		-ms-transform: skewX(-40deg);
		-webkit-transform: skewX(-40deg);
		transform: skewX(-40deg);
	}
	
	h3
	{
		font-size: 1em;
		margin-bottom: 10px;
	}
	
	p.quote
	{
		font-size: 1.2em;
		line-height: 0.9em;
		padding: 0px 7px 0px 7px;
	}
	
	div.master-page-footer > div:nth-child(1)
	{
		width: 5%;
	}

	div.master-page-footer > div:nth-child(2)
	{
		width: 90%;
	}

	div.master-page-footer > div:nth-child(3)
	{
		width: 5%;
	}
	
	div.footer
	{
		height: 65px;
		background-image: url('../Icons/BandedBackground_small.png');
	}
	
	div.footer-logo img
	{
		width: 200px;
		height: auto;
	}
}