/*Import fonts*/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

/*Format the heading*/
#headercontainer {
	color:white;
	position:fixed;
	text-align:center;
	font-size:28px;
	padding-bottom:5px;
	z-index: 1;
	width: 100%;
}

#name {
	font-size:80px;
	font-family:ubuntu, verdana, Impact, cursive, Arial;
	margin:0 auto;
	display:inline;
	padding:5px 20px 5px 20px;
	border-radius:5px;
}

#phrase {
	font-size:12px;
	font-family:ubuntu, cursive, Arial;
	display:inline;
	border-radius:5px;
	text-align:center;
	width:100vw;
}

/*Set the background color*/
body {
	/*background-image:url('Graphics\\BrucePeninsula2.png');
	background-image:url('Graphics\\BrucePeninsulaWater.png');*/
	/*background-color:#202020;
	background-color:#CC9900;
	background-color:#00CCFF;
	background-color:#0099FF;
	background-color:#3399FF;
	background-color:#370075;
	background-color:#9966FF;
	background-color:#009933;
	background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
    /*background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
    /*background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
    /*background-image: repeating-linear-gradient(180deg,#009900,#000066,#009900);*/
}

html {
  background-color:#009933;
  background-image: linear-gradient(135deg,#330066,#00CC33);
  background: url('Graphics\\BikeTrip\\MacKerricherBeach.jpg') no-repeat center center fixed; 
  /*background: url('Graphics\\BikeTrip\\SunsetBay.jpg') no-repeat center center fixed;*/
  /*background: url('Graphics\\BikeTrip\\PatricksPoint.jpg') no-repeat center center fixed; */
  background: url('Graphics\\BrucePeninsula2.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#navcontainer {
	text-align: center;
}
#navlist,
#navlist li{
  padding: 0;
  position: relative;
  display:inline-block;
  margin:0 auto;
}

#navlist li {
	padding-top:23px;
}

#navlist > li  div
{
	display:inline-block;
	text-align:center;
	color:black;
	font-weight: normal;
	text-decoration: none;
	line-height: 1;
	font-family: 'Open Sans', sans-serif;
	font-size: 25px;
	height:23px;
	width:100px;
	background: radial-gradient(grey , black); /* Standard syntax */
	background:white;
	padding: 12px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 25px;
	border: 4px dashed black;
	border: 2px solid black;
	margin-right: 10px;
	vertical-align: bottom;
}

#navlist > li div:hover {
	-webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 20px #FFD700;
}

#navlist > li > #activePage{
	color:white;
	background-color:rgba(0,0,0,0.8);
	height:23px;
	width:100px;
	margin-top:-5px;
}

p {
	font-family: ubuntu, cursive, HELVETICA, Verdana;
	text-align:left;
	font-size:20px; 
	color: white;
}

/*make a class for highlighted elements*/
.highlight{
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 20px #FFD700;
}

/*pseudo selectors for the links*/
div >a:link {
	color: white;
	text-decoration:none;
	font-size:16px; 
	font-family:cursive, Impact;
}

div >a:visited
{ 
	color: white;
}

div >a:hover {
	color: white;
	text-decoration: none;
}


#iconcontainer {
	text-align: center;
	height:54px;
}
#iconlist,
#iconlist li{
  padding: 0;
  position: relative;
  display:inline-block;
  margin:0 auto;
}

#iconlist li {
	float:left;
}

/* initialize icons dimensions */
#iconlist img {
	width:90%;
	height:90%;
	background:black;
	border-radius: 15px;
}
/* Below is the CSS code that makes your sticky footers actually stick to the bottom. */
 html, body {height: 99%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 54px;
	padding-top: 180px;
}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -54px; /* negative value of footer height */
 	height: 54px;
	clear:both;
}  

/*Opera Fix*/
body:before {
 	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
} 

.gridcontainer {
	margin: auto;
	max-width: 960px;
}

/* for grid padding*/
.l-box div{
	margin: 10px;
	background-color:rgba(0,0,0,0.8);
	border:1px solid rgba(0,0,0,0.8);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	border-radius:5px;
}

.l-box h1, .marginmaker h1{
	text-align: center;
}

.l-box h2, .marginmaker h2{
	text-align: center;
}

.l-box {
	min-width: 200px;
	color: white;
	height: 100%;
}

.marginmaker {
	margin-top: 20px;
	margin-left: 10px;
	/*margin-right: 10px;*/
	padding:15px;
	background-color:rgba(0,0,0,0.8);
	height: 100%;
}

.rpadding {
	padding:15px;
}

.pure-g > div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.title {
	font-size:36px;
	font-family: sans-serif;
	text-align: center;
	font-weight: bold;
}
#logo-scroll{ display:none; position:fixed; }