/* -----------------------------------
base
----------------------------------- */

body
{
	margin: 0;
	padding: 20px;
	color: #000;
	background: #fff;
	font: 100%/1.4 helvetica, arial, sans-serif;
}
blockquote {
    background: url(img/bg-quote.png) no-repeat;    
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px 30px 30px 50px;    
}
/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#FFF;
  background:#060; /* default background for browsers without gradient support */
  /* css3 */
 background:-webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#090));
  background:-moz-linear-gradient(#006633, #090);
  background:-o-linear-gradient(#006633, #090);
  background:linear-gradient(#006633, #090);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #090 transparent;
}
/* -----------------------------------
classes
----------------------------------- */
.maincontainer {
	background-attachment: fixed;
	background-image: url(img/bg2.jpg);
	background-size: cover;
	width: 100%;
	min-height:100%;
	position:absolute;
	top:0;
	left:0;
}
.header {
	max-width: 1024px;
	width: 100%;
	background-repeat:no-repeat;
	background-size: cover;
	background-color:#FFF;
	margin:.25% auto;
	overflow:hidden;
	border: solid; color:#000;

}
.logo {
	width:100%;
	height: auto;
	float:left;
	overflow:hidden;
}
.logo img {
	width: 100%;
}
.logo a {background-color:none;}
.banners {
	max-width:1024px;
	max-height:90px;
	margin-top:.5%;
	margin-bottom:.5%;
	border: solid; color:#000;
	overflow:hidden;
}
.banners img {
	width:100%;
	hieght:auto;
	
}
.ads {
	width:100%;
	float:right;
	margin-left: 5px;
	margin-right:5px;
	margin-bottom: 2%;
	margin-top: 1%;
	padding:2% 3%;
}
.ads img {
	width:100%;
	margin:auto;
	border: solid; color:#000;
	
}
.maincontent {
	max-width: 1024px;
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: auto;
}
.contentleft {
	width:60%;
	float:left;
}
.contentright {
	width:28%;
	float:right;
}
.content {
	width: 100%;
	float: left;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top: 1%;
	border: solid; color:#000;
	margin-bottom: 1%;

}
.content a {
	text-decoration: none;
	color: #666;
}
.content a:focus,#nav-toggle:focus { background-color: black; }
.content a:hover,#nav-toggle:hover { background-color: #0F0; color: #036; }
.content a:active,#nav-toggle:active { background-color: #0F0; color:#036;}
.countdown {
	width: 100%;
	float: right;
	background-color:#FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 5px;
	margin-right:0;
	margin-bottom: 2%;
	margin-top: 1%;
	padding:2% 3%;
	border: solid; color:#000;

}
/* -----------------------------------
BLOGS
----------------------------------- */


#blogsheeth {
	width:100%;
	margin-top:.25%;
	margin-bottom:.25%;
	float:left;
	padding:0;
	clear:both;
}
.blog-container
{
	position: relative;
	width:100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	border: solid #000;
}

.blog-container iframe,  
.blog-container object,  
.blog-container embed
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.blogcase {
	width:48%;
	float:left;
	padding:2%;
}
.blog {
	width:100%;
	margin-bottom: 1%;
	background-color:#FFF;
	border:#000;
	float:left;
	clear:both;
	border: solid #000;
	
	}
.blog h1 { font-size: 2em; color:#036; }
.blog h2 { font-size: 1.5em; color:#036; }
.blog h3 { font-size: 1.2em ; color:#036; }
.blog h4 { font-size: 1.0em; color:#036; }
.blog h5 { font-size: 0.9em; color:#036; }
.blog h6 { font-size: 0.8em; color:#036; }
.blog h7 { font-size: 0.7em; color:#036; }
.blog a { text-decoration:none;}
.blog a:link { color: #999; }
.blog a:hover { color: #0F0; }
.blog a:active { color: #FC0; }
.blog a:visited { color: #0C0; }

.blog-info {
	width: 100%;
	padding: 1%;
	float:left;
	padding-bottom:1%;
}
.blogtitle {
	width:98%;
	font-color:#F90;
	height:auto;
	float:left;
	margin: 0;
	clear:both;
	padding: 1%;
}
.blogdescription {
	width:98%;
	float:left;
	margin:0;
	padding: 1%;
}
.blogbody {
	width:98%;
	float:left;
	margin:0;
	padding: 1%;
}
.blogcontent {
	width: 96%;
	padding:2%;
	margin:auto;
	float:left;
	text-align:justify;
}
.blogauthor {
	width:100%;
	clear: both;
	float: left;
	margin-top:0;
	margin-left:3px;
}
/* -----------------------------------
Ribbon
----------------------------------- */
.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 12px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

.sponsors {
	width: 100%;
	float: right;
	background-color:#FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 5px;
	margin-right:0;
	margin-bottom: 2%;
	margin-top: 0.5%;
	padding:2% 3%;
	border: solid; color:#000;
}
.sponsors img {
	padding: 2%;
	display: inline-block;
	
}
.sponsors a {
	text-decoration:none;
	font-size: medium;
	color:#F00;
}
.clubs {
	clear:both;
	width: 100%;
	float: left;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-top: 1%;
	margin-bottom: 2%;
	border: solid; color:#000;
}
.clubs img {
	padding: 2%;
	display: inline-block;
	margin: auto;
	vertical-align:middle;
		
}
.clubs a {
	text-decoration:none;
	font-size:x-small;
}
.sponsorbox {
	width:100%;
	top:-10px;
	font-size:small;
	color:#F00;
	text-align:center;
}
.sponsorbox img {
	width:100%;
}
.socialbox {
	width: 100%;
	float: right;
	background-color:#FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 5px;
	margin-right:0;
	margin-bottom: 2%;
	margin-top: 0.5%;
	padding:2% 3%;
	border: solid; color:#000;
}
.mainfooter {
	width:100%;
	height: 40px;
	background-color:#000;
	overflow:hidden;
	clear:both;
}
.footer {
    background-color:#666;
    margin: auto;
    clear:both;
	overflow:hidden;
	border: solid; color:#000;
	margin-top: 10px;
}
#copy {
       float: left;
	   width: 40%;
	   padding: 2%;
	   color: #FFF;
}
#copy a {
	text-decoration:none;
	color:#0F0;
}
.social {
     float: left;
	 width: 20%;
}
.ajaxpickering {
    float: right;
	padding: 2%;
	margin-right:auto;
	width: 50%;
	font-size: 60%;
	color:#FFF;
	text-align:right;
}
.ajaxpickering a {
	text-decoration:none;
	color: lime;
}
/* -----------------------------------
Slider
----------------------------------- */
/* Slider Container */
.container {
  width:100%;
  padding-top:5px;
  padding-bottom: 5px;
}
/* Slider */
#slider {
  display:block;
  border:4px solid #000;
  width:95%; /* slider width */
  height:400px; /* slider height */
  margin:2% auto;
  background:white no-repeat 50% 50%;
  overflow:hidden;
  position:relative;
}

/* For caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* hide the caption with this way :) */
  left:0;
  z-index:44;
}

#slider img {
  display:block;
  margin:0 0;
  width:100%; /* slide width */
  height:100%; /* slide height */
  size:cover;
  position:absolute;
  top:0;
  left:0;
}

/* Navigation */
#slider-nav {
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  z-index:99;
}

#slider-nav a {
  display:block;
  float:left;
  width:10px;
  height:10px;
  background-color:#111;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  border-radius:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

#slider-nav .active {
  background-color:#2589B4;
}

/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
/* -----------------------------------
Countdown
----------------------------------- */
div#daysBox {
	background-color: #F90;
	font: bolder; font-size:16px;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	border: thin #000;
	margin: 1%;
}
div#hoursBox {
	background-color: #F90;
	font: bolder; font-size:16px;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	border: thin #000;
	margin: 1%;
}
div#minsBox {
	background-color: #F90;
	font: bolder; font-size:16px;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	border: thin #000;
	margin: 1%;
}
div#secsBox {
	background-color: #F90;
	font: bolder; font-size:16px;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	border: thin #000;
	margin: 1%;
}
.container .maincontent .countdown table {
	color: #F00;
}
/* -----------------------------------
Video
----------------------------------- */

.video-container
{
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
}

.video-container iframe,  
.video-container object,  
.video-container embed
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* -----------------------------------
Navigation
----------------------------------- */

#nav ul
{
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	list-style: none;
	line-height: 1;
}

#nav li { display: inline; }

#nav a
{
	display: block;
	padding: .5em;
	color: #fff;
	background: #036;
	border-bottom: 1px solid #fff;
	text-decoration: none;
	 -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}

#nav-toggle
{
	display: block;
	padding: .5em .5em .5em 40px;
	color: #fff;
	background-color: #036;
	background-image: url(img/responsive-nav.png);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	border-bottom: 1px solid #fff;
	text-decoration: none;
}

#nav a:focus,#nav-toggle:focus { background-color: black; }
#nav a:hover,#nav-toggle:hover { background-color: #0F0; color: #036; }
#nav a:active,#nav-toggle:active { background-color: #0F0; color:#036;}

/* -----------------------------------
Predefined
----------------------------------- */

.js #nav
{
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}

#nav.opened { max-height: 9999px; }

/* -----------------------------------
Navigation wide screen
----------------------------------- */

@media (min-width: 825px)
{
	.js #nav { position: relative; }
	.js #nav.closed { max-height: none; }
	#nav-toggle { display: none; }

	#nav
	{
		max-width: 1024px;
		margin: auto;
		overflow: hidden;
		zoom: 1;
		background-color: #036;
		border: solid; color:#000;
	}

	#nav a
	{
		float: left;
		padding: .5em 1em;
		border-bottom: 0;

	}
	#nav a:hover, a:active
	{
		background-color: #0F0;
		color: #036;
	    text-shadow: none;
	}
	#nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

}

/* -----------------------------------
340 and lower
----------------------------------- */
@media (max-width: 480px)
{
.maincontainer {
	width:100%;
	overflow:hidden;
}
.header {
	width: 100%;
	 /* fallback */
  background-color: #F00;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F00), to(#CCC));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #F00, #CCC);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #F00, #CCC);

  /* IE 10 */
  background: -ms-linear-gradient(top, #F00, #CCC);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #F00, #CCC);
}

.ads {
	
	float:left;
	margin: auto;
	
}
.ads img {
	width:50%;
	margin: auto;
}
.countdown {
	margin-right:5px;
}
/* Slider */
#slider {
  width:95%; /* slider width */
  height:auto; /* slider height */
  margin:2% auto;
}
.maincontent {
	margin: auto;
}
.contentleft {
	width:95%;
	float:left;
	margin-left:2%;
}
.contentright {
	width:95%;
	float:left;
	margin-left:2%;
}
.content {
	width: 95%;
	margin: auto;
	margin-bottom:1%;
	padding-left:3;
}
.content img {
	width:22%;
	display:inline-block;
	padding: 1%;
	margin-left:1;
}
.countdown {
	width: 90%;
	margin: auto;
	margin-bottom:2%;
}
.sponsors {
	width:90%;
	margin-right:5px;
	margin-bottom:2%;
}
.sponsors img {
	width: 40%;
    text-align:center;
}
.clubs {
	width:90%;
	margin: auto;
	margin-bottom:2%;
}
.clubs img {
	width: 40%;
    text-align:center;
	margin:auto;
}
.socialbox {
	width: 90%;
	margin: auto;
	margin-bottom:2%;
}
.fb-like-box {
	margin:auto;
	overflow:hidden;
}
.footer {
	width:100%;
   	margin-top: 2%;
}
#copy {
      width: 90%;
	  font-size: 60%;
}
.ajaxpickering {
    float: left;
	width: 98%;
	font-size: 30%;
	margin: auto;
}

}
/* -----------------------------------
Form - narrow
----------------------------------- */

.row-form
{
	clear: left;
	overflow: hidden;
	zoom: 1;
	margin: 0 0 1em;
}

.label
{
	display: block;
	margin: 0 0 .1em;
}

.input,.select,.textarea
{
	width: 100%;
	*width: 90%;
	box-sizing: border-box;
	border: 1px solid #999;
	border-radius: .3em;
}

.input,.textarea { padding: 5px; }
.textarea { height: 150px; }

.radio
{
	margin-left: 1px;
	margin-right: .5em;
}

.form-list
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.sendbtn
{
	display: inline-block;
	margin: 0;
	padding: .7em 1.2em;
	border: 0;
	border-radius: .3em;
	color: #fff;
	background-color: #c10000;
	line-height: 1;
}

.sendbtn:focus { background-color: #000; }
.sendbtn:hover { background-color: yellow; color:#036; }
.sendbtn:active { background-color: yellow; color:#036; }

/* -----------------------------------
Form - wide
----------------------------------- */

@media (min-width:33em)
{
	.submission-form { max-width: 40em; }
	
	.label
	{
		float: left;
		width: 25%;
		margin: 0 2% 0 0;
		text-align: right;
	}
	
	.input,.select,.textarea
	{
		float: left;
		width: 70%;
	}

	.form-indent
	{
		margin-left: 27%;
		width: 70%;
	}
}
@media (max-width: 825px)		 
{
.contentleft{
	width: 98%;
	float:left;
	margin:auto;
}
.contentright{
	width: 98%;
	float:left;
	margin:auto;
}
.stayinformed {
	width: 90%;
	float:left;
	clear:right;
}
.joinlist {
	width: 90%;
	float:left;
	clear:right;
}
.triangle-isosceles {
	width:98%;
	padding:1%;
	float:left;
}
#copy {
	width: 90%;
	font-size:small;
}
}