body {
	background:url(Images/Backgrounds/BackgroundTiles.jpg)	
}

#containerouter {
	width:100%;
	
	font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
/*	background-color:#00FF33; background-color:#00FF33; GREEN */
}

#containerinner {
	/* background-color: #0066FF; /* background-color: #0066FF; BLUE */
	padding-bottom: 1.25%;
	padding-top: 1.25%;
	
	text-align:center;
}

#bannerBorderOuter {
	width: 100%;
	height: 20%;
	/*background: #00FFFF;*/
	}

#bannerBorderInner {
	background: rgba(0, 217, 198, 0.6);
	
	border-style: solid;
	border-color: rgba(0, 217, 200, 0.6);
	
	padding-top: 0.75%;
	padding-bottom: 0.75%;
	padding-right: 1%;
	padding-left: 1%;
}


#bannerOuterText {
	float: left;
	
	width: 55%;
	/*background-color: #9900FF; /* background-color: #9900FF; */
}

#bannerInnerText {
	/*background-color: #FFFF33; /* background-color: #FFFF33; */  
	font-size: 3.75em;
	text-align: center;
	vertical-align: middle;
	/*color: #F8F8F8; /*F0F0F0; */
	/* text-shadow: 0.1em 0.1em 0.30em black; */
}

#badgeOuterBuddies {
	float: left;
	
	width: 22.5%;
	
	/*background: #000000;*/
}

#badgeInnerBuddies {
	/*background: #CCCCFF;*/
	padding-left: 3%;
}

#badgeOuterMaking {
	float: left;
	
	width: 22.5%;
	/*background: white; */
}

#badgeInnerMaking {
	/*background: #FF0033;*/
	padding-right: 3%;
	
	text-align: right;
}

/* ERROR PAGE */

#errorBoxOuter {
	width: 90%;
	/* background: #CC0000; */
	
	margin-left: auto;
	margin-right: auto;
}

#errorBoxInner {
	background: #CC0000;
	
	font-size: 0.85em;
	
	border: solid 2px #CC0000;
	
	border-radius: 7.5px 7.5px 7.5px 7.5px;
	
	padding-left: 2%;
	padding-right: 2%;
}
/* ERROR PAGE */

/*LOGIN PAGE */

#loginMainBoxOuter {
	width: 100%;
	
	/* background: #FF66FF; */
}

#loginMainBoxInner {
	background: rgba(106, 151, 211, 0.85);
	
	border: black solid ;
	border-radius: 15px 15px 15px 15px;
	
	color: white;
	
	padding: 1%;
	
	margin-top: 3%;
} 

#loginTitleRow {
/*	background: yellow; */
	
	width: 100%;
}


#loginTitleOuter {
	width: 32%;
	
	margin:auto;
	/*background-color: #0FF; */
}

#loginTitleInner {
	/* background-color: #C66;*/
	font-size: 3em;
	
	padding-left: 4%;
	padding-bottom: 2%;
	text-align: center;
	text-decoration: underline;
	
	font-weight: 700;
	color: white;
}

#loginBoxOuter {
	width: 40%;
	
	margin-right: auto;
	margin-left: auto;
}

#loginBoxInner {
	background: rgba(36, 38, 37, 0.65);
	padding-top: 3%;
	padding-bottom: 3%;
	
	border: solid rgba(36, 38, 37, 0.15);
	border-radius: 15px 15px 15px 15px;
	
	box-shadow: 2.5px 2.5px 15px black;
	
	
	color: white;
	font-size: 1.25em;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}

#loginBoxContentOuter {
	width: 100%;
}

#loginBoxContentInner {
	/* background: #CCFF33; */
	
	padding-top: 3%;
}

.Button {
	background: linear-gradient(to bottom left, white,grey);
	width: 55%;
}

.loginInfoOuter {
	width: 100%;	
}

.loginInfoInner {
	/* background: red;	*/
	font-size: 1.5em;
	font-weight: 600;
	text-align: right;
	
	padding-top: 1.5%;
	padding-left: 0%;
}

.whiteclass {	background-color:#FFF !important;}
.redclass {	background-color:#FFD9DE !important;}
.greenclass {	background-color:#AEFFAE !important;}
.buttonclass {	width:350px;}

/*LOGIN PAGE */

/* INFO PAGE */

#infoMainBoxOuter {
	width: 100%;
	
	/* background: #FF66FF; */
}

#infoMainBoxInner {
	background: rgba(106, 151, 211, 0.85);
	
	border: black solid ;
	border-radius: 15px 15px 15px 15px;
	
	color: white;
	
	padding: 1%;
	
	margin-top: 3%;
} 

#infoTitleRow {
/*	background: yellow; */
	
	width: 100%;
}


#infoTitleOuter {
	width: 32%;
	
	margin:auto;
	/*background-color: #0FF; */
}

#infoTitleInner {
	/* background-color: #C66;*/
	font-size: 3em;
	
	padding-left: 4%;
	padding-bottom: 2%;
	text-align: center;
	text-decoration: underline;
	
	font-weight: 700;
	color: white;
}

.infoBoxOuter {
	width: 80%;
	
	margin-right: auto;
	margin-left: auto;
}

.infoBoxInner {
	background: rgba(36, 38, 37, 0.65);
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left:5%;
	padding-right: 6%;
	
	border: solid rgba(36, 38, 37, 0.15);
	border-radius: 15px 15px 15px 15px;
	
	box-shadow: 2.5px 2.5px 15px black;
	
	
	color: white;
	font-size: 1.35em;
	font-family:Arial, Helvetica, sans-serif;
	text-align: left;
}

#friends {
	float: left;
	
	width: 26.25%;
} 


#sideTextOuter {
	float:left;
	
	width: 73.75%;

}

#sideTextInner {
	padding-top: 5%;
	
	text-align: center;
}

.homeIconOuter {
	width: 100%;	
}

.homeIconInner {
	/* background: red;	*/
	font-size: 1.5em;
	font-weight: 600;
	text-align: right;
	
	padding-top: 1.5%;
	padding-left: 0%;
}

/* INFO PAGE */

/*RESULTS PAGE*/

#resultsBoxOuter {
	width: 100%;
	
	/*background: #FF66FF; */
}

#resultsBoxInner {
	background: rgba(106, 151, 211, 0.75);
	
	border: black solid ;
	border-radius: 15px 15px 15px 15px;
	
	padding: 1%;
	
	text-align: right;
	
	margin-top: 3%;
}

#resultsTitleRow {
/*	background: yellow; */
	
	width: 100%;
}


#resultsTitleOuter {
	width: 65%;
	
	margin:auto;
	/*background-color: #0FF; */
}

#resultsTitleInner {
	/* background-color: #C66;*/
	font-size: 3em;
	
	padding-left: 4%;
	padding-bottom: 1.25%;
	text-align: center;
	text-decoration: underline;
	
	font-weight: 700;
	color: white;
}

#resultsOddRowBorderOuter {
	float:left;
	/* background: red; */
	
	text-align: left;
	width: 50%;
}

#resultsOddRowBorderInner {
	background: yellow;
	
	padding: 1.5%;
}

#resultsColumnOuter {
	width: 100%;
}

#resultsColumnInner {
	background: rgba(20, 141, 255, 0.6);
	
	border: solid black;
	border-radius: 5px 5px 5px 5px;
	
	box-shadow: 2.5px 2.5px 20px black;
	
	
	padding-top: 1%;
	padding-bottom: 1%;
	color: white;
}

#resultsEvenRowBorderOuter {
	float:left;
	/* (background: yellow; */
	
	text-align: left;

	width: 50%;
}

#resultsEvenRowBorderInner {
	/* background: red; */
	
	padding: 1.5%;
}

#resultsColumn2Outer {
	width: 100%;
}

#resultsColumn2Inner {
	border: solid #669966 10px;
	
	background: white;
}

#matchRankOuter {
	width: 100%;
	
	/* background: #F36; */
}

#matchRankInner {
	text-align: center;
	font-size: 1.5em;
	font-weight: 700;
	
	/* background: #F96; */
}

#matchIDOuter {
	/* background-color: #F36; */
	width: 100%;
}

#matchIDInner {
	/* background-color: #CFF; */
	font-size: 1.4em;
	font-weight: 700;
	
	padding-top: 0.5%;
	padding-bottom: 1.5%;
	padding-left: 2%;
}

#matchNameOuter {
	float:left;
	width: 50%;
	/* background: #CCFF00; */
}

#matchNameInner {
	text-align:center;	
	/* background: #CC66CC; */
	
	font-weight: 700;
}

#matchGradeOuter {
	float:left;
	width: 23%;

	/* background: #CC66CC; */
}

#matchGradeInner {
	text-align:center;
	/* background: #CCFF00; */
	
	font-weight: 700;
}

#matchGenderOuter {
	float:left;
	
	width: 23%;
	/* background: #CCFF00; */ 
}

#matchGenderInner {

	text-align:center;	
	/* background: #CC66CC; */
	
	font-weight: 700; 
}

#overallCompatibilityOuter {
	float: left;
	
	width: 40%;
	/* background-color: #FF6; */ 
}

#overallCompatibilityInner {
	/* background-color: #0FF; */
	font-size: 1.1em;
	font-weight: 700;
	
	padding-bottom: 3%;
	padding-left: 17%;	
}

#overallCompatibilityScoreOuter {
	float: left;
	
	width: 20%;
	/* background-color: #F36; */
}

#overallCompatibilityScoreInner {
	/* background-color: red; */
	font-size: 1.1em;
	
	padding-left: 5%;
}

#starRankingOuter {
	float: left;
	width: 30%;
	
	/* background: white;  */
}

#starRankingInner {
	/* background: yellow; */
	
	font-size: 1.1em;
	color: black;
}

#specificResultsOuter {
	/* ackground-color: #FF6; */
	width: 25%;
}

#specificResultsInner {
	background-color: #666666;
		
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	
	padding-top: 1.25%;
	padding-bottom: 1.25%;
	
	margin-left: 4%;	
}

/*RESULTS PAGE*/
	
/*Categories For Compatibility*/

#categoryRowOuter {
	float:left;
	width: 50%;
	
	
	/* background: #CC6; */
}

#categoryRowInner {
	/* background: #39F; */
}

#categoryOuter {
	float: left;
	
	width: 70%;
	/* background-color: #FF6; */
}

#categoryInner {
	/* background-color: green; */
	font-size: 1em;
	font-weight: 700;
	
	padding-left: 22.5%;
}

#categoryScoreOuter {
	float:left;
	
	width: 30%;
	/* background-color: #0FF; */
}

#categoryScoreInner {
	/* background-color: red; */
	font-size: 1em;
	font-weight: 700;
	
	padding-left: 3%;
}

/*Categories For Compatibility*/

/* QUESTIONS PAGE */

#pageFrameOuter {
	width: 100%;

	/* background: white; */
}

#pageFrameInner {
	/* background: #CFC; */
	
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 4%;
}

#questionMainBoxOuter {
	width: 100%;
	
	/*background: #FF66FF; */
}

#questionMainBoxInner {
	background: rgba(106, 151, 211, 0.85);
	
	border: black solid ;
	border-radius: 15px 15px 15px 15px;
	
	padding: 1%;
	
	margin-top: 3%;
}




#QuestionTitleRow {
/*	background: yellow; */
	
	width: 100%;
}


#QuestionTitleOuter {
	width: 30%;
	
	margin:auto;
	/*background-color: #0FF; */
}

#QuestionTitleInner {
	/* background-color: #C66;*/
	font-size: 3em;
	
	padding-left: 4%;
	padding-bottom: 5%;
	text-align: center;
	text-decoration: underline;
	
	font-weight: 700;
	color: white;
}

#questionInfoOuter {
	width: 100%;	
}

#questionInfoInner {
	/* background: red;	*/
	
	color: white;
	font-size: 1.25em;
	font-weight: 600;
	
	padding-bottom: 1.25%;
	padding-left: 10%;
	padding-right: 10%;
}





#questionBoxOuter {
	width: 100%;
	/* background: black; */
}

#questionBoxInner {
	background-color: rgba(32, 104, 143, 0.75); 

	border: black solid 3px;
	border-radius: 15px 15px 15px 15px;
	padding-top: 1%;
	padding-bottom: 2%;

	box-shadow: 5px 5px 35px black;
}

#questionNumberOuter {
	float: left;
	
	width: 50px;
	height: 37px;
	/* background: #000; */
	
	text-align: center;

}

#questionNumberInner {
	/*background: #0C6; */
	
	font-size: 2em;
	color: white;
	background-image: url(Images/QuestionsPage/questionNumberSquare.png);
	background-repeat: no-repeat;	
	
}

#questionCategoryOuter {
	float: left;
	
	/* background: blue; /*/
	width: 90%;
}

#questionCategoryInner {
	/* background: #0CF; /*/
	

	text-align:center;
	text-decoration: underline;
	font-size: 2em;
	font-weight: 700;
	color: white;
}

#questionTextOuter {
	/* background: #C03; /*/
}

#questionTextInner {
	/* background: #999; */

	color: white;
	font-size: 1.125em;
	padding-left: 6%;
	padding-top: 2%;
}

#questionAnswerOuter {
	width: 100%;
	
	/* background: white; /*/
}

#questionAnswerInner {
	padding-top: 2%;
	/* background: #00FF99; /*/
	
	color: white;
	font-weight: 700;
	font-size: 1.05625em;
	text-align: center;
}

#questionHowImportantOuter {
	width: 100%;
	
	/* background: white; /*/
}

#questionHowImportantInner {
	/* background: #0099FF; /*/
	
	color: white;
	text-align: center;
	font-weight: 700;
	font-size: 1.05625em;
}

.questionButton {
	background: linear-gradient(to bottom right, #1AB8F4, #7BC4D2);
	width: 25%;
	
	color: white;
}

.questionTypeOuter {
	width: 100%
}

.questionTypeInner {
 	/* background: #45EFEB; */
	padding-bottom: 1%;
	padding-top: 1%;
}

.radioButtonStripOuter {
	width: 100%;
		
}

.radioButtonStripInner {
	
	background: #61C5D6;
}

.radioDescription {
	font-size: 0.90em;
}

/* QUESTIONS PAGE */

/* Recorded Answers */

#pageFrameRecordOuter {
	width: 100%;

	/* background: white; */
}

#pageFrameRecordInner {
	/* background: #CFC; */
	
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 4%;
}

#RecordedMainBoxOuter {
	width: 100%;
	
	/*background: #FF66FF; */
}

#RecordedMainBoxInner {
	background: rgba(106, 151, 211, 0.75);
	
	border: black solid ;
	border-radius: 15px 15px 15px 15px;
	
	padding: 1%;
	
	margin-top: 3%;
	text-align: right;
}




#RecordedTitleRow {
/*	background: yellow; */
	
	width: 100%;
}


#RecordedTitleOuter {
	width: 50%;
	
	margin:auto;
	/*background-color: #0FF; */
}

#RecordedTitleInner {
	/* background-color: #C66;*/
	font-size: 3em;
	
	padding-left: 4%;
	padding-bottom: 5%;
	text-align: center;
	text-decoration: underline;
	
	font-weight: 700;
	color: white;
}

#RecordedBoxOuter {
	width: 100%;
	/* background: black; */
}

#RecordedBoxInner {
	background-color: rgba(32, 104, 143, 0.75); 

	border: black solid 3px;
	border-radius: 15px 15px 15px 15px;
	padding-top: 1%;

	box-shadow: 5px 5px 35px black;
}

#RecordedTextOuter {
	/* background: #C03; /*/
}

#RecordedTextInner {
	/* background: #999; */

	color: white;
	font-size: 2em;
	text-align:center;
	

	padding-top: 2%;
	padding-bottom: 2%;
}

/* Recorded Answers */

#clearFloats {
	clear: both;
}