/* Stylesheet for splash page */

html {
	height: 98%;
}

body {
	background-color: #efeae3; /* #6ba2c9 || from(#bdddff), to(#6ba2c9)) */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e2d9cd), to(#efeae3)); /* Chrome, Safari 4+ */
	background-image: -webkit-linear-gradient(top, #e2d9cd, #efeae3); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
	background-image:    -moz-linear-gradient(top, #e2d9cd, #efeae3); /* Firefox 3.6-15 */
	background-image:      -o-linear-gradient(top, #e2d9cd, #efeae3); /* Opera 11.10-12.00 */
	background-image:         linear-gradient(to bottom, #e2d9cd, #efeae3); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
  	background-repeat: no-repeat;
	margin: 0;
	height: 100%;
}

.mainbackroundimage {
	width: 100%;
	height: auto;
	min-height: 100%;
	background-image:url('styleimages/spadebackground.png');
	background-repeat:repeat;
	padding: 10px 0 1px 0;
}

.generalBoxCharacteristics {
	background-color: #eeeeee; /* #4b7fa1; */
	border: 3px ridge #bbbbbb; /* #87bce5 */
	-webkit-box-shadow: 2px 2px 2px 0 #404040;
  	-moz-box-shadow: 2px 2px 2px 0 #404040;
  	box-shadow: 2px 2px 4px 0 #656565;
}

.titleBox {
	margin: 0 10px 0 10px;
	padding: 20px;
}

.mainTitle {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.5em;
	color: #707070;
	text-align: center;
	text-shadow: 3px 4px 0px #bbbbbb; /* #505050 */
	border-top: 1px solid #cccccc; /* #97b7cb */
	border-bottom: 1px solid #cccccc;
	margin: 0;
	padding: 6px 0 8px 0;
}

.introBox {
	margin: 10px;
	padding: 2px 20px 2px 20px;
}

.introduction {
	font-family: 'Allerta', sans-serif;
	font-size: 1em;
	color: #707070;
	text-align: center;
	text-shadow: 1px 1px 0px #bbbbbb;
	border-top: 1px solid #cccccc;
	padding: 14px 0 0 0;
}

.introductionBotton {
	border-bottom: 1px solid #cccccc;
	padding: 14px 0 16px 0;
}

.linkBox {
	margin: 10px;
	padding: 10px 10px 10px 10px;
}

.linkList {
	font-family: 'Oswald', sans-serif;
	font-size: 1.6em;
	list-style: none;
	text-align: center;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	margin: 10px;
	padding: 6px 0 8px 0;
}

.linkList lh {
	position: relative;
	top: -3px;
	color: #707070;
	font-size: 1.3em;
	text-shadow: 2px 2px 0 #bbbbbb;
	margin: 0 0 10px 0;
}

.linkList li {
	padding: 0 0 10px 0;
}

.linkBackground {
	background-color: #cdab82; /* #b58a57; #98ce98; */
	width:170px;
	height:1.5em;
    -webkit-border-radius: 170px / 1.5em;  /* for Chrome */
    -moz-border-radius: 170px / 1.5em;  /* for Firefox */
    border-radius: 170px / 1.5em;
  	-webkit-box-shadow: inset 1px 1px 5px 0 #404040;
  	-moz-box-shadow: inset 1px 1px 5px 0 #404040;
  	box-shadow: inset 1px 1px 5px 0 #404040;
	margin: 0 auto 0 auto;
}

.linkSingle {
	text-decoration: none;
	color: White;
	text-shadow: 2px 2px 0 #404040;
}

.linkTextPos {
	position: relative;
	top: -1px;
}

.imageBox {
	margin: 0 10px 10px 10px;
	padding: 20px;
}

.imageDecoration {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 20px;
}

.siteImages {
	height: 100px;
	background-image:url('styleimages/mainprofilepic.jpg');
	background-color: Black;
	background-repeat:no-repeat;
	background-position: -30px -50px;
	-webkit-box-shadow: inset 0 0 7px 0 #111111;
  	-moz-box-shadow: inset 0 0 7px 0 #111111;
  	box-shadow: inset 0 0 7px 0 #111111;
	margin: 0 auto 0 auto;
}

/* Style changes for larger screens */
@media screen and (min-width: 600px) and (max-width: 719px) {

.siteImages {
	max-width: 536px;
	background-position: 0px -50px;
}

}

@media screen and (min-width: 720px) {

.titleBox {
	margin: 15px 25px 0 25px;
}

.mainContent {
	margin: 0 25px 0 25px;
}

.introAndLinks {
	float: left;
	width: 35%;
	margin: 0 0 0 0;
}

.introBox {
	margin: 10px 0px 10px 0px;
}

.linkBox {
	margin: 10px 0px 10px 0px;
}

.imageBox {
	float: right;
	margin: 10px 0 10px 0;
	padding: 20px;
	width: 57%;
}

.siteImages {
	height: 453px;
	background-position: 0px 0px;
}


}

@media screen and (min-width: 760px) {

.imageBox {
	width: 57.2%;
}

}

@media screen and (min-width: 815px) {

.mainTitle {
	font-size: 2.8em;
}

.imageBox {
	width: 58%;
}

}

@media screen and (min-width: 910px) {

.imageBox {
	width: 59%;
}

}

@media screen and (min-width: 1040px) {

.contactImg{
	background-image:url('styleimages/contactpic.jpg');
}

.twitterImg{
	background-image:url('styleimages/twitterpic.jpg');
}

.instagramImg{
	background-image:url('styleimages/instagrampic.jpg');
}

.tumblrImg{
	background-image:url('styleimages/tumblrpic.jpg');
}

.blogImg{
	background-image:url('styleimages/blogpic.jpg');
}

.titleBox {
	width: 900px;
	margin: 15px auto 0 auto;
}

.mainTitle {
	font-size: 3.1em;
	padding: 12px 0 14px 0;
}

.mainTitle:before {
	position: relative;
	left: -10px;
	top: -2px;
	font-size: 0.9em;
	content:  "\2022 \2022 \2022";
}

.mainTitle:after {
	position: relative;
	left: 10px;
	top: -2px;
	font-size: 0.9em;
	content:  "\2022 \2022 \2022";
}

.mainContent {
	width: 946px;
	margin: 0 auto 0 auto;
}

.introAndLinks {
	margin: 0;
	width: 310px;
}

.introBox {
	margin: 15px 0 15px 0;
}

.linkBox {
	margin: 10px 0 10px 0;
}

.linkBackground:hover {
	background-color: #d7ba97; /* #d8b589; */
}

.linkSingle:hover {
	color: #7b7b7b;
	text-shadow: 2px 2px 0 #f9f9f9;
}

.imageBox {
	margin: 15px 0 10px 0;
	padding: 25px 20px 25px 20px;
	width: 576px;
}

}

/* Renders preloaded images unviewable */
.preload {
	display: none !important;
}

/* CSS to employ the clearfix method of clearing floats */
.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;
}