@charset "UTF-8";
/* CSS Document */

/*ANOTHER WAY TO USE WEBFONTS (@import link):
--important: The first thing in your styles panel should be these links.
--also: later, you have to "integravte the fontsv into your CSS".*/
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?famivly=Euphoria+Script);
@import url(http://fonts.googleapis.com/css?family=Exo:600);
@import url(http://fonts.googleapis.com/css?family=Ropa+Sans:400italic);
@font-face {
 font-family:cicle;
 src:url('../fonts/cicle/Cicle_Fina.ttf'); 	/*ALSO, don't ever have spaces in the font names.*/
}
@font-face {
 font-family:ostrich-sans;
 src:url('../fonts/ostrich-sans/ostrich-regular.ttf');
}
@font-face {
 font-family:ostrich-sans-BLACK;
 src:url('../fonts/ostrich-sans/ostrich-black.ttf');
}
body {
	margin:0;
	padding:0;
}
header, section, footer, aside, nav, article, figure {
	display: block;
	margin:0;
	padding:0;	
}
.cicle { /*The "." at the beginning says that this is a class.*/
	font-family:cicle; /*copy and paste this font family line from @font-face (above).*/
	font-size:1em;
	margin-right: 10px;
	margin-left: 10px;
	text-align: justify;
}
.ostrich-sans {
	font-family:ostrich-sans;
	font-size:2.6em;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.ostrich-sans-BLACK {
	font-family:ostrich-sans-BLACK;
	font-size:3.27em;
	margin-top: 15px;
	text-align: center;
}
header {
	margin-top:0px;
	color: #000;
	font-family: 'Exo', cursive;
	font-size: 0.5em;
	font-weight: normal;
	background-image: url(../images/bkgd-green.png);
	height:auto;
	width:262px;
	background-repeat: repeat;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #330;
	border-bottom-color: #330;
	border-right-width: 1px;
	border-bottom-width: 1px;
	text-align: center;
	float: left;
	border-bottom-right-radius: 8px;
	-moz-border-bottom-right-radius: 8px; /*for Firefox*/
	-o-border-bottom-right-radius: 8px; /*for Opera*/
	-webkit-border-bottom-right-radius: 8px;
}
footer {
	font-family: cicle;
	text-align: center;
	display: block;
	width: 100%;
	background-image: url(../images/bkgd-green.png);
	height: auto;
	border-bottom-left-radius: 8px;
	-moz-border-bottom-left-radius: 8px; /*for Firefox*/
	-o-border-bottom-left-radius: 8px; /*for Opera*/
	-webkit-border-bottom-left-radius: 8px; /*for Safari & Chrome*/
	border-bottom-right-radius: 8px;
	-moz-border-bottom-right-radius: 8px; /*for Firefox*/
	-o-border-bottom-right-radius: 8px; /*for Opera*/
	-webkit-border-bottom-right-radius: 8px;
	font-size: .7em;
	padding-top: 2px;
	padding-bottom: 2px;
}
article {
	color:#000;
	font-family: 'Cicle', sans-serif;
	clear: none;
	position: relative;
	padding: 10px;
	text-align: justify;
	display: block;
	width: 600px;
	margin-left: 300px;
	background-image: url(../images/bkgd-green.png);
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
	-moz-border-radius: 8px; /*for Firefox*/
	-o-border-radius: 8px; /*for Opera*/
	-webkit-border-radius: 8px;
	height: auto;
}
aside {
	font-family: 'Cicle', sans-serif;
	float: left;
	position: absolute;
	padding: 0px;
	text-align: center;
	display: block;
	width: 250px;
	margin-left: 940px;
	background-image: url(../images/aside2-collage.jpg);
	margin-right: 10px;
	height: auto;
	border-right-width: 0.08em;
	border-bottom-width: 0.08em;
	border-left-width: 0.08em;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-left-radius: 8px;
	-moz-border-bottom-left-radius: 8px; /*for Firefox*/
	-o-border-bottom-left-radius: 8px; /*for Opera*/
	-webkit-border-bottom-left-radius: 8px; /*for Safari & Chrome*/
	border-bottom-right-radius: 8px;
	-moz-border-bottom-right-radius: 8px; /*for Firefox*/
	-o-border-bottom-right-radius: 8px; /*for Opera*/
	-webkit-border-bottom-right-radius: 8px; /*for Safari & Chrome*/
}
aside2 {
	font-family: 'Cicle', sans-serif;
	float: left;
	position: absolute;
	padding: 0px;
	text-align: center;
	display: block;
	width: 250px;
	margin-left: 940px;
	background-image: url(../images/bkgd-green.png);
	margin-right: 10px;
	height: auto;
	border-right-width: 0.08em;
	border-bottom-width: 0.08em;
	border-left-width: 0.08em;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-left-radius: 8px;
	-moz-border-bottom-left-radius: 8px; /*for Firefox*/
	-o-border-bottom-left-radius: 8px; /*for Opera*/
	-webkit-border-bottom-left-radius: 8px; /*for Safari & Chrome*/
	border-bottom-right-radius: 8px;
	-moz-border-bottom-right-radius: 8px; /*for Firefox*/
	-o-border-bottom-right-radius: 8px; /*for Opera*/
	-webkit-border-bottom-right-radius: 8px; /*for Safari & Chrome*/
}
.date {
	float: right;
	text-align: right;
	width: 25%;
	text-indent: 0px;
	padding: 0px;
	font-family: cicle;
	font-size: 1em;
	margin-top: 20px;
}
.ArticleTitle {
	font-family: ostrich-sans;
	margin-left: 10px;
	font-size: 3em;
	width: 70%;
	margin-top: 10px;
}
.dateNewsSidebar {
	text-align: center;
	width: 100%;
	text-indent: 0px;
	font-family: cicle;
	font-size: 0.8em;
	margin-bottom: 5px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #000;
	padding-top: 5px;
	margin-top: 5px;
}
.NewsTitle {
	font-family: ostrich-sans-BLACK;
	font-size: 1.6em;
	width: 100%;
	margin-top: 5px;
	text-align: center;
}
.NewsLinks {
	font-family: ostrich-sans;
	font-size: 1.6em;
	width: 100%;
	text-align: center;
}
.photoleft2 {
	float: left;
	text-align: center;
	width: auto;
	text-indent: 0px;
	margin: 5px;
	padding: 5px;
}
.PHOTOleft3 {
	float: left;
	text-align: center;
	width: auto;
	margin: 10px;
	border-width: .08em;
	border-style: solid;
	border-radius: 4px;
	-moz-border-radius: 4px; /*for Firefox*/
	-o-border-radius: 4px; /*for Opera*/
	-webkit-border-radius: 4px;
	clear: none;
}
.center {
	float: none;
	text-align: center;
	width: auto;
	margin-right: 10px;
	margin-left: 10px;
	font-family: cicle;
	font-size: 1em;
}
.photoright {
	margin: 0px;
	float: right;
	text-align: center;
	text-indent: 0px;
	display: block;
	padding-top: 0px;
	padding-right: 60px;
	padding-bottom: 0px;
	padding-left: 60px;
	width: 157px;
}
#btn-Blog {
	background-image: url(../images/btn-Blog.png);
	height: 70px;
	margin: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #033;
	border-right-color: #033;
	border-bottom-color: #033;
	border-left-color: #033;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
#btn-Blog:hover {
	background-position:left -72px;
	border-radius: 4px;
	-moz-border-radius: 4px; /*for Firefox*/
	-o-border-radius: 4px; /*for Opera*/
	-webkit-border-radius: 4px; /*for Safari & Chrome*/ /*This chooses the bottom part of the button.
	You could also put in a number instead of top/bottom/left/right/etc. Example on hover tag.*/
}
/*This code hides the text in the box by sending it wayyy above the web page.*/
#btn-Blog span {
	position:absolute;
	top:-999em;
}
#btn-Book {
	background-image: url(../images/btn-Book.png);
	height: 70px;
	margin: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #033;
	border-right-color: #033;
	border-bottom-color: #033;
	border-left-color: #033;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
#btn-Book:hover {
	background-position:left -72px; /*This chooses the bottom part of the button.
	You could also put in a number instead of top/bottom/left/right/etc. Example on hover tag.*/
}
#btn-Book span {
	position:absolute;
	top:-999em;
}
#btn-Videos {
	background-image: url(../images/btn-Videos.png);
	height: 70px;
	margin: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #033;
	border-right-color: #033;
	border-bottom-color: #033;
	border-left-color: #033;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
#btn-Videos:hover {
	background-position:left -72px; /*This chooses the bottom part of the button.
	You could also put in a number instead of top/bottom/left/right/etc. Example on hover tag.*/
}
#btn-Videos span {
	position:absolute;
	top:-999em;
}
#btn-Gallery {
	background-image: url(../images/btn-Gallery.png);
	height: 70px;
	margin: 0px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #033;
	border-right-color: #033;
	border-bottom-color: #033;
	border-left-color: #033;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
#btn-Gallery:hover {
	background-position:left -72px; /*This chooses the bottom part of the button.
	You could also put in a number instead of top/bottom/left/right/etc. Example on hover tag.*/
}
#btn-Gallery span {
	position:absolute;
	top:-999em;
}