/*------ CLEARFIX -------------------------------------------------------------*/
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/*------ GLOBAL -------------------------------------------------------------*/

html{
	color:						#555;
	font-family:				"-apple-system", "arial", "sans-serif";
	font-size:					14px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,bed798+100 */
	background: 				#ffffff; /* Old browsers */
	background: 				-moz-linear-gradient(top, #ffffff 0%, #bed798 100%); /* FF3.6-15 */
	background: 				-webkit-linear-gradient(top, #ffffff 0%,#bed798 100%); /* Chrome10-25,Safari5.1-6 */
	background: 				linear-gradient(to bottom, #ffffff 0%,#bed798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: 					progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#bed798",GradientType=0 ); /* IE6-9 */
}

body{
	background: 				url("../site_images/leaf_pattern.png") repeat;
}

/* for fire fox */
textarea{
	font-family:				'-apple-system', 'arial', 'sans-serif';
}

h2, h3, h4{
	/* font-family: 				'Merriweather', 'serif'; */
	color:						#5e9773;
}

h3{
	font-size:					20px;
	margin:						0 16px 10px 16px;
	padding:					0;
}

#pageContainer{
	background-color:			#fff;
	box-shadow: 				0px 0px 5px 0px rgba(85,85,85,1);
	margin:						0 auto;
}

#footerContentContainer{
	width:						90%;
	margin:						0 auto;
}

a{
	text-decoration:			none;
	color:						#62c1c7;
}

a:hover{
	color:						#2f7b61;
}

p, ul, ol, form{
	line-height: 				20px;
}

ul, ol, form{
	margin:						0 0 10px 30px;
}

button{
	cursor:						pointer;
}


/*------ GLOBAL - GROUPS -------------------------------------------------------------*/

.group{
	width:						90%;
	background-color:			#cbf7f3;
	border-radius:				10px;
	margin:						30px auto;
	position:					relative;
	padding:					47px 0 40px 0;
}

.group h3,
#carousel h3,
#userWidget h3{
	background-color:			#9f8eea;
	color:						#fff;
	border-radius:				10px 0;
	margin: 					0;
	position:					absolute;
	top:						0;
	left:						0;
	z-index:					1;
}

.group form{
	margin:						0;
}

.group .resource{
	background-color:			#fff;
	border:						1px solid #d7d7d7;
	padding:					4px 5px 10px 5px;
}

.group .resource .iconContainer_sprite,
.group .resource .iconContainer_background,
.group .resource .iconContainer_effect,
.group .resource .iconContainer_dialogue_box{
	position:					relative;
	border:						1px solid #d7d7d7;
	overflow:					hidden;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,bed798+100 */
	background: 				#ffffff; /* Old browsers */
	background: 				-moz-linear-gradient(top, #ffffff 0%, #bed798 100%); /* FF3.6-15 */
	background: 				-webkit-linear-gradient(top, #ffffff 0%,#bed798 100%); /* Chrome10-25,Safari5.1-6 */
	background: 				linear-gradient(to bottom, #ffffff 0%,#bed798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: 					progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#bed798",GradientType=0 ); /* IE6-9 */
}

.group .resource .iconContainer_sprite img{
	width:						auto;
	height:						90%;
	display:					block;
	border:						none;
	position:					absolute;
	bottom:						0;
	left:						0;
	right:						0;
	margin:						0 auto;
}

.group .resource .iconContainer_background img,
.group .resource .iconContainer_effect img{
	width:						auto;
	height:						100%;
	border:						none;
}

.group .resource .iconContainer_dialogue_box img{
	width:						95%;
	height:						auto;
	border:						none;
	position:					absolute;
	top:						0;
	bottom:						0;
	left:						0;
	right:						0;
	margin:						auto;
}

.group .metadata{
	color:						#fff;
	font-size:					12px;
	float:						left;
	padding:					2px 10px !important;
	margin:						5px 6px 0 0;
	border-radius:				5px;
	background-color:			#888;
	cursor:						pointer;
}

.group .noGenre{
	cursor:						auto !important;
}

.group form.metadataForm{
	padding:					0;
}

.group input.metadata{
	color:						#fff;
	font-size:					14px;
	float:						left;
	padding:					2px 10px;
	margin:						5px 6px 0 0;
	border-radius:				5px;
	background-color:			#888;
	cursor:						pointer;
}

.group .noneAvailable,
.group ul{
	padding:					10px 0 0 20px;
}

.group form{
	padding: 					0 0 0 20px;
}

.group .browseAll,
.group .back{
	position:					absolute;
	bottom:						5px;
	right:						25px;
}

.group .back{
	bottom:						10px;
}

.group p{
	padding:					0 0 0 20px;
}

/*------ GLOBAL - INPUTS -------------------------------------------------------------*/

label{
	width:						100%;
}

input[type="text"], input[type="password"], textarea{
    width: 						100%;
    padding: 					8px;
    margin: 					3px 0;
    display: 					inline-block;
    border:						1px solid #ccc;
    border-radius:				4px;
    box-sizing:					border-box;
    font-size: 					12px;
}

input[type="radio"]{
	cursor:						pointer;
}

/*------ HEADER -------------------------------------------------------------*/
#logo{
	float:						left;
	font-family: 				'Advent Pro', sans-serif;
	font-size:					28px;
	padding:					7px 0 7px 30px;
	width:						200px;
	background-size: 			40px auto;
	color:						#5e9773;
}

header{
	background-color:			#f7faf2;
	width:						100%;
}

#headerBackground{
	display:					none;
}

/*------ MAIN NAV -------------------------------------------------------------*/

header nav{
	float:						right;
	font-size:					14px;
	padding:					25px 30px 10px 0;
}

header nav ul{
	list-style-type:			none;
}

header nav ul li{
	cursor:						pointer;
	float:						left;
	display:					block;
    text-align:					center;
    padding:					0 16px;
    text-decoration:			none;
}

/*------ 2 COL LAYOUT -------------------------------------------------------------*/

aside, section{
	background-color:			#fff;
	border-radius:				10px;
	border:						1px solid #ccc;
}

aside{
	width: 						24%;
	float:						left;
	margin: 					10px 0 10px 10px;
	padding:					20px 0 10px 0;
}

section{
	width:						73%;
	float:						right;
	margin: 					10px 10px 10px 0;
	padding: 					10px 0;
}

/*------ ALL PAGES -------------------------------------------------------------*/

#pageTitle{
	margin-bottom:				20px;
}

#pageTitle h2{
	margin: 					10px 16px 0 16px;
	padding: 					10px 0 0 30px;
	border-bottom:				1px solid #b7d88d;
	font-size:					26px;
	background: 				url("../site_images/leaf.png") no-repeat left 3px;
}

#pageTitle p{
	text-align:					right;
	color:						#83a175;
	font-family: 				'Merriweather', 'serif';
	font-size:					13px;
	padding:					3px 18px 0 0;
}

section p, section h4{
	padding:					0 16px 5px 16px;
}

section ul, section ol{
	padding:					0 16px 5px 32px;
}

section ul li, section ol li{
	padding:					0 0 5px 0;
}

.resource{
	float: 						left;
	margin-top:					10px;
}

.resource h4, .resource img{
	width:						100%;
}

.resource h4{
	font-size:					18px;
	padding:					5px 0 10px 0;
}

.resource img{
	border:						1px solid #d7d7d7;
	cursor:						pointer;
}

.resource p{
	padding:					0 0 5px 0;
}


/*------ PAGE - HOME PAGE -------------------------------------------------------------*/

#banner img{
	display:					block;
	width:						100%;
	height:						auto;
	z-index: -1;
}

#featuredBackground{
	position:					relative;
	border:						2px solid #4e8461;
}

#featuredBackground img{
	width:						50%;
	height:						auto;
	display:					block;	
}

#featuredBackgroundInfo{
	width:						50%;
	height:						100%;
	position:					absolute;
	right:						0;
	top:						0;
	background: 				url("../site_images/thymeLogo.png") no-repeat -5% 110%;
	background-size:			20% auto;
}

#featuredBackgroundInfo img{
	width:						90%;
	margin:						10px auto 0 auto;
}

#featuredBackgroundInfo h3{
	margin:						0;
}

#featuredBackgroundInfo p{
	clear:						both;
}

#featuredBackgroundInfo form input{
	color:						#fff;
	float:						left;
	border-radius:				5px;
	background-color:			#888;
	cursor:						pointer;
}

#carouselAndUserInfo{
	width:						90%;
	margin:						15px auto 0 auto;
}

#logIn{
	width:						30%;
	float:						left;
}

#carousel{
	width:						68%;
	float:						right;
	position:					relative;
}

#carousel img{
	width:						100%;
	display:					block;
	border-radius:				10px;
}

/*------ PAGE - ACCOUNT TYPE -------------------------------------------------------------*/

#accountTypePage img{
	margin:						16px auto;
	border-radius:				5px;
	display:					block;
}

#accountTypePage h3{
	margin-left:				10px;
}

#accountTypePage h4{
	text-align:					center;
}

#accountContainer{
	width:						95%;
	height:						40px;
	margin:						0 auto;
}

#partThyme, #fullThyme{
	width:						49%;
	margin:						0 0 16px 0;
	padding:					0;
}

#partThyme{
	float:						left;
}

#fullThyme{
	float:						right;
}

/*------ PAGE - RESOURCE SINGLE -------------------------------------------------------------*/

#dialogueBoxContainer{
	position:					relative;
	margin-top:					40px;
}

#dialogueBoxImage{
	width:						90%;
	margin:						0 auto;
	display:					block;
	margin-bottom:				20px;
}

#dialogueBoxPointerLeft{
	position: 					absolute;
	width: 						6%;
	top: 						-29%;
	left: 						15%;
}

#dialogueBoxPointerRight{
	position: 					absolute;
	width: 						6%;
	top: 						-29%;
	right: 						15%;
}

#resourceImages .spriteImage{
	max-width:					20%;
	padding:					16px;
}

#resourceImages .backgroundImage{
	max-width:					45%;
	padding:					60px 16px 16px 16px;
}

#resourceImages .effectImage{
	max-width:					75%;
	padding:					16px;
	margin:						0 auto;
	display:					block;
}
/*------ PAGE - INDIVIDUAL DELETE -------------------------------------------------------------*/

.indiDeleteImage, p.indiDeleteName{
	max-width:					45%;
	padding:					0 0 0 30px !important;
}

#imageSelectForm{
	padding:					16px 0;
}

#imageSelectForm .group{
	position:					relative;
}

#imageSelectForm input[type="checkbox"]{
	position:					absolute;
	top:						40%;
	left:						0;
}

/*------ PAGE - PROFILE -------------------------------------------------------------*/

#profileContainer{
	width:						90%;
	margin:						0 auto;
}

#profileContainer h3{
	margin-left:				0;
}

#profileInfo img{
	width:						100%;
}

#profileAvatar{
	width:						100px;
	height:						100px;
	overflow:					hidden;
	border-radius:				5px;
	float:						left;
	margin:						0 10px 0 0;
	border: 					1px solid #b7d88d;
}

/*------ PAGE - REGISTER -------------------------------------------------------------*/

#agreementCheck{
	margin: 					10px 10px 16px 16px;
}

#agreementText{
	font-weight:				bold;
	color:						#5e9773;
	margin-top:					5px;
}

#register select{
	font-size:					16px;
	margin-bottom:				10px;
}

/*------ PAGE - STORY SINGLE -------------------------------------------------------------*/

.group .icon{
	float:						left;
	padding:					0 15px;
	width:						40%;
}

.group #infoContainer{
	float: 						left;
}

.group #infoContainer p{
	padding:					0;
}

.group h4{
	font-size:					25px;
	padding:					10px 0 5px 0;
}

.group #resourceDescrip{
	clear:						both;
	padding:					5px 0 0 0;
}

/*------ PAGE - ABOUT -------------------------------------------------------------*/

.staffImage{
	width: 22%;
	padding:					20px 30px 2px 30px;
	float:						Left;
}

.staffTitle{
	padding-top:				20px;
}

/*------ PAGE - TOUR -------------------------------------------------------------*/

.tourImage{
	width:						30%;
	margin: 0 16px 16px 16px;
	float:						Left;
	border: 					1px solid #b7d88d;
	border-radius:				5px;
}

/*------ PAGE - TUTORIALS -------------------------------------------------------------*/

.tutorialImage{
	width: 						79%;
    display: 					block;
    margin: 					5px auto 10px auto;
    border: 					1px solid green;
    border-radius: 				5px;
}

h4.tutorialH4{
	padding-top: 				15px;
    padding-left: 				0;
    padding-right: 				0;
    border-bottom: 				1px solid #b7d88d;
    margin: 					0 16px 5px 16px;
}

/*------ PAGE - LOGOUT -------------------------------------------------------------*/

#logout img{
	margin:						0 auto;
	width: 90%;
	height: auto;
	display: block;
	padding-bottom: 20px;
}

/*------ PAGE - NEW STORY -------------------------------------------------------------*/

form h3{
	margin:						15px 0 0 0;
}

form input[type="radio"]{
	margin:						5px;
}

/*------ RESOURCE DONATION -------------------------------------------------------------*/

#setting_Anonymous{
	margin: 					0 10px 5px 0 !important;
}

/*------ FOOTER -------------------------------------------------------------*/

footer{
	background-color:			#333;
	color:						#fff;
	width:						100%;
	margin-top:					70px;
	padding:					16px 0;
	font-size:					12px;
	clear: both;
}

footer p{
	clear:						both;
}

footer a, footer h4{
	color:						#fff;
}

footer h4{
	padding:					0 0 10px 0;
	font-weight:				bolder;
	font-size:					15px;
}

footer ul{
	padding: 					5px 0 0 5px;
	list-style-type: 			none;
}

.footerCol{
	width: 30%;
	padding-bottom:				20px;
	text-align: center;
}

footer .centerCol{
	margin:						0 auto;
}

/*------ WIDGETS -------------------------------------------------------------*/

.widget{
	position:					relative;
	border:						1px solid #ccc;
	border-radius:				10px;
	margin: 20px 10px 20px 10px;
	padding: 20px 10px 0 10px;
	background-color: white;
}

.widget:first-of-type{
	margin-top: 0;
}

.widget h3{
	position:					absolute;
	top:						-10px;
	background-color:			#fff;
	border:						none !important;
}

.widget p{
	padding-bottom: 5px;
}

.widget #avatar{
	width:						50px;
	height:						50px;
	overflow:					hidden;
	border-radius:				5px;
	border:						1px solid #ccc;
	float:						left;
	margin: 					10px 10px 0 0;			
}

.widget #avatar img{
	width:						100%;
}

.widget #userInfo{
	margin-top: 				10px;
}

.widget #userInfo p{
	line-height:				15px;
}

.widget label{
	float:						left;
	padding-top:				9px;
}

#userWidget{
	float:						none;
	margin-bottom:				10px;
	padding-bottom:				10px;
	padding-top:				40px;
}

#userWidget #error{
	font-size:					14px;
}

#userWidget #error ul{
	padding:					0 0 10px 15px;
}

#browseWidget input{
	margin:						0 5px 10px 0;
}

#browseWidget h4{
	padding:					10px 0 7px 0;
}

#nameFilter{
	width:						100%;
	padding:					2px;
	font-size:					14px;
	resize: 					none;
	box-sizing:					border-box
}

/*-------- CLASSES ------------------------------------------------------------------------*/

.storyThymeGradient{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,bed798+100 */
	background: 				#ffffff; /* Old browsers */
	background: 				-moz-linear-gradient(top, #ffffff 0%, #bed798 100%); /* FF3.6-15 */
	background: 				-webkit-linear-gradient(top, #ffffff 0%,#bed798 100%); /* Chrome10-25,Safari5.1-6 */
	background: 				linear-gradient(to bottom, #ffffff 0%,#bed798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: 					progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#bed798",GradientType=0 ); /* IE6-9 */
}

.floatRight{
	float:						right;
}

.floatLeft{
	float:						left;
}

.button{
	background-color: 			#62c1c7;
	border: 					none;
	border-radius: 				5px;
	color: 						#fff;
	padding: 					10px !important;
	font-size: 					14px;
	cursor:						pointer;
}

.anchorStyle{
	color: 						#62c1c7;
	border: 					none;
	background-color: 			transparent;
	font: 						inherit;
	cursor:						pointer;
	padding:					0 !important;
}

.anchorStyle:hover{
	color: #2f7b61;
}

.padding16Right{
	padding-right:				16px;
}

.padding16Left{
	padding-left:				16px;
}

.margin16Right{
	margin-right:				16px;
}

.margin16Left{
	margin-left:				16px;
}

.margin16Bottom{
	margin-bottom:				16px !important;
}

.margin16Top{
	margin-Top:					16px !important;
}

.error{
	color:						#ab1411;
}

.success{
	color:						#5e9773;
}

.notice{
	color:						#5e9773;
	font-weight:				bold;
}

.hidden{
	display:					none !important;
}

.invisible{
	opacity:					0;
}

/*------ CLASSES - METADATA COLORS -------------------------------------------------------------*/

.metadataSci-fi,
.metadataEffect,
.metadataSchool,
.metadataSad{
	background-color:			#2e94be !important;
}

.metadataComedy,
.metadataBackground,
.metadataModern,
.metadataClassical{
	background-color:			#d6d069 !important;
}

.metadataDrama,
.metadataAudio,
.metadataFuturistic,
.metadataEnergetic{
	background-color:			#be2e5e !important;
}

.metadataCrime,
.metadataDialogue,
.metadataRock{
	background-color:			#d69f69 !important;
}

.metadataFanfiction,
.metadataSprite,
.metadataNature,
.metadataElegance{
	background-color:			#7dd669 !important;
}

.metadataFantasy,
.metadataSound,
.metadataAnimal,
.metadataReggae{
	background-color:			#9a69d6 !important;
}

.metadataHorror,
.metadataAnimated,
.metadataMedieval,
.metadataTechno{
	background-color:			#621a1a !important;
}

.metadataAdventure,
.metadata2D,
.metadataWeather{
	background-color:			#43621a !important;
}

.metadataAction,
.metadata3D,
.metadataDystopia
{
	background-color:			#60a7e8 !important;
}

.metadataYuri,
.metadataAnime,
.metadataTowns{
	background-color:			#fa9ee8 !important;
}

.metadataYaoi,
.metadataRealistic,
.metadataMagic{
	background-color:			#86c5e5 !important;
}

.metadataSlice,
.metadataCartoon,
.metadataBattle{
	background-color:			#c6b07c !important;
}

.metadataEducational,
.metadataPainting,
.metadataEpic{
	background-color:			#9ed3bd !important;
}

.metadataRomance,
.metadataPhotograph,
.metadataHappy{
	background-color:			#ec82d4 !important;
}

/*-------- BREAKPOINTS ------------------------------------------------------------------------*/
@media only screen and (min-width: 1400px){
	#pageContainer{
		width:						1280px;
	}
	
	.group h3,
	#carousel h3,
	#userWidget h3{
		padding: 					10px 20px 10px 15px;
	}
	
	.group .resource{
		margin: 					0 10px 0 10px;
		width: 						246px;
	}
	
	.group .resource .iconContainer_sprite,
	.group .resource .iconContainer_background,
	.group .resource .iconContainer_effect,
	.group .resource .iconContainer_dialogue_box{
		width:						246px;
		height:						159px;
	}

	#styleType2 .group .resource{
		margin-bottom:				20px;
		width: 						178px;
	}
	
	#styleType2 .group .resource .iconContainer_sprite,
	#styleType2 .group .resource .iconContainer_background,
	#styleType2 .group .resource .iconContainer_effect,
	#styleType2 .group .resource .iconContainer_dialogue_box{
		width:						178px;
		height:						115px;
	}
	
	#styleType2 .group .resource h4{
		font-size:					18px;					
	}
	
	#styleType2 .group input.metadata{
		font-size:					11px;
	}
	
	#featuredBackgroundInfo h3{
		font-size:					30px;
		padding:					20px 0 10px 40px;
	}

	#featuredBackgroundInfo p{
		padding:					0 0 5px 40px;
	}

	#featuredBackgroundInfo form{
		padding:					0 0 20px 40px;
	}

	#featuredBackgroundInfo form:nth-of-type(2){
		padding-left:				5px;
	}

	#featuredBackgroundInfo form input{
		font-size:					12px;
		padding:					2px 10px !important;
		margin:						5px 6px 0 0;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px){
	#pageContainer{
		width:						1100px;
	}
	
	.group h3,
	#carousel h3,
	#userWidget h3{
		padding: 					7px 15px 7px 10px;
	}
	
	.group .resource{
		margin: 					0 10px 0 10px;
		width: 215px;
	}
	
	.group .resource .iconContainer_sprite,
	.group .resource .iconContainer_background,
	.group .resource .iconContainer_effect,
	.group .resource .iconContainer_dialogue_box{
		width:						215px;
		height:						139px;
	}
	
	#styleType2 .group .resource{
		margin: 					0 7px 10px 7px;
		width: 						154px;
	}
	
	#styleType2 .group .resource .iconContainer_sprite,
	#styleType2 .group .resource .iconContainer_background,
	#styleType2 .group .resource .iconContainer_effect,
	#styleType2 .group .resource .iconContainer_dialogue_box{
		width:						154px;
		height:						100px;
	}
	
	#styleType2 .group .resource h4{
		font-size: 					15px;
		padding-top: 				5px;
	}
	
	#styleType2 .group input.metadata{
		font-size: 					9px;
		margin:						5px 4px 0 0;
	}
	
	#featuredBackgroundInfo h3{
		font-size:					30px;
		padding:					20px 0 10px 40px;
	}

	#featuredBackgroundInfo p{
		padding:					0 0 5px 40px;
	}

	#featuredBackgroundInfo form{
		padding:					0 0 20px 40px;
	}

	#featuredBackgroundInfo form:nth-of-type(2){
		padding-left:				5px;
	}

	#featuredBackgroundInfo form input{
		font-size:					12px;
		padding:					2px 10px !important;
		margin:						5px 6px 0 0;
	}
}

@media only screen and (min-width: 1050px) and (max-width: 1199px){
	#pageContainer{
		width:						980px;
	}
	
	.group h3,
	#carousel h3,
	#userWidget h3{
		padding: 					7px 15px 7px 10px;
	}
	
	.group .resource{
		margin: 					0 10px 0 10px;
		width: 188px;
	}
	
	.group .resource .iconContainer_sprite,
	.group .resource .iconContainer_background,
	.group .resource .iconContainer_effect,
	.group .resource .iconContainer_dialogue_box{
		width:						188px;
		height:						122px;
	}
	
	#styleType2 .group{
		width:						95%;
	}
	
	#styleType2 .group .resource .iconContainer_sprite,
	#styleType2 .group .resource .iconContainer_background,
	#styleType2 .group .resource .iconContainer_effect,
	#styleType2 .group .resource .iconContainer_dialogue_box{
		width:						147px;
		height:						95px;
	}
	
	#styleType2 .group .resource{
		margin: 					0 5px 10px 5px;
		width:						147px;
	}
	
	#styleType2 .group .resource p{
		font-size:					12px;
	}
	
	#styleType2 .group .resource h4{
		font-size: 					14px;
		padding-top: 				5px;
	}
	
	#styleType2 .group input.metadata{
		font-size: 					8px;
		margin:						5px 4px 0 0;
	}
	
	#homePageResources.group .resource{
		width:						188px;
	}
	
	#featuredBackgroundInfo h3{
		font-size:					30px;
		padding:					20px 0 10px 40px;
	}

	#featuredBackgroundInfo p{
		padding:					0 0 5px 40px;
	}

	#featuredBackgroundInfo form{
		padding:					0 0 20px 40px;
	}

	#featuredBackgroundInfo form:nth-of-type(2){
		padding-left:				5px;
	}

	#featuredBackgroundInfo form input{
		font-size:					12px;
		padding:					2px 10px !important;
		margin:						5px 6px 0 0;
	}
}

@media only screen and (min-width: 880px) and (max-width: 1049px){
	#pageContainer{
		width:						800px;
	}
	
	.group h3,
	#carousel h3,
	#userWidget h3{
		padding: 					7px 15px 7px 10px;
	}
	
	.group .resource{
		margin:						0 7px 0 7px;
		width: 154px;
	}
	
	.group .resource .iconContainer_sprite,
	.group .resource .iconContainer_background,
	.group .resource .iconContainer_effect,
	.group .resource .iconContainer_dialogue_box{
		width:						154px;
		height:						100px;
	}
	
	#styleType2 .group{
		width:						95%;
	}
	
	#styleType2 .group .resource .iconContainer_sprite,
	#styleType2 .group .resource .iconContainer_background,
	#styleType2 .group .resource .iconContainer_effect,
	#styleType2 .group .resource .iconContainer_dialogue_box{
		width:						158px;
		height:						102px;
	}
	
	#styleType2 .group .resource{
		margin:						0 7px 10px 7px;
		width:						158px;
	}
	
	#styleType2 .group .resource p{
		font-size:					12px;
	}
	
	#styleType2 .group .resource h4{
		font-size: 					14px;
		padding-top: 				5px;
	}
	
	#styleType2 .group input.metadata{
		font-size: 					8px;
		margin:						5px 4px 0 0;
	}
	
	#homePageResources.group .resource{
		width:						154px;
	}
	
	#featuredBackgroundInfo h3{
		font-size:					20px;
		padding:					10px 0 5px 30px;
	}

	#featuredBackgroundInfo p{
		padding:					0 0 0 30px;
		font-size:					12px;
	}

	#featuredBackgroundInfo form{
		padding:					0 0 10px 30px;
	}

	#featuredBackgroundInfo form:nth-of-type(2){
		padding-left:				5px;
	}

	#featuredBackgroundInfo form input{
		font-size:					10px;
		padding:					2px 8px !important;
		margin:						5px 1px 0 0;
	}
}

@media only screen and (min-width: 404px) and (max-width: 879px){
	section, aside{
		width:						100%;
		float:						none;
		margin:						16px 0;
	}
	
	.group h3,
	#carousel h3,
	#userWidget h3{
		padding: 					7px 15px 7px 10px;
	}
	
	#pageContainer{
		width:						100%;
	}
	
	.group .resource{
		margin:						0 15px 15px 15px;
		width:						248px;
	}
	
	.group .resource .iconContainer_sprite,
	.group .resource .iconContainer_background,
	.group .resource .iconContainer_effect,
	.group .resource .iconContainer_dialogue_box{
		width: 99%;
		height: 163px;
	}
	
	#styleType2 .group .resource{
		margin:						0 7px 10px 7px;
		width:						149px;
	}
	
	#styleType2 .group .resource .iconContainer_sprite,
	#styleType2 .group .resource .iconContainer_background,
	#styleType2 .group .resource .iconContainer_effect,
	#styleType2 .group .resource .iconContainer_dialogue_box{
		width:						147px;
		height:						96px;
	}
	
	#styleType2 .group .resource p{
		font-size:					12px;
	}
	
	#styleType2 .group .resource h4{
		font-size: 					14px;
		padding-top: 				5px;
	}
	
	#styleType2 .group input.metadata{
		font-size: 					7px;
	}
	
	.homePageGroup .resource{
		width: 						44%;
		margin: 					0 1% 10px 1%;
	}
	
	#featuredBackgroundInfo h3{
		font-size:					20px;
		padding:					10px 0 5px 30px;
	}

	#featuredBackgroundInfo p{
		padding:					0 0 0 30px;
		font-size:					12px;
	}

	#featuredBackgroundInfo form{
		padding:					0 0 10px 30px;
	}

	#featuredBackgroundInfo form:nth-of-type(2){
		padding-left:				5px;
	}

	#featuredBackgroundInfo form input{
		font-size:					10px;
		padding:					2px 8px !important;
		margin:						5px 1px 0 0;
	}
	
	#logIn,
	#carousel{
		float:						none;
		width:						100%
	}
}

@media only screen and (max-width: 750px){
	#featuredBackground{
		display:	none;
	}
}

@media only screen and (max-width: 403px){
	section, aside{
		width:						100%;
		float:						none;
		margin:						16px 0;
	}
	
	.group h3,
	#carousel h3,
	#userWidget h3{
		padding: 					5px 10px 5px 10px;
		font-size:					18px;
	}
	
	.group .resource{
		width:						80%;
		margin:						0 auto 20px auto;
		float:						none;
		clear:						both;
	}
	
	.group .resource .iconContainer_sprite,
	.group .resource .iconContainer_background,
	.group .resource .iconContainer_effect,
	.group .resource .iconContainer_dialogue_box{
		width: 						99%;
		height: 					163px;
	}
	
	#logIn,
	#carousel{
		float:						none;
		width:						100%
	}
}