body {
        background-image:url(../images/emerald3.jpg);background-size:cover;background-position:fixed;z-index:-1;width:100%;height:100%;
	font: .9em/150% Arial, Helvetica, sans-serif;
}
a {
	color: #B82EE6;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {font: bold 24px/100% Arial, Helvetica, sans-serif;margin-left:30%;margin-top:1%;text-shadow:
    1px 1px 0 #fff,
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
   -1px  1px 0 #fff,
    1px  1px 0 #fff;}
h2 {color:#196A4A;font: bold 18px/100% Verdana, sans-serif;margin-left:1%;margin-top:1%;}    
h3{color:#196A4A;font: bold 16px/100% Verdana, sans-serif;}
h4 {background-image:url(http://granshananigans.com/sample/bc/logolg.png);background-repeat:no-repeat;width:975px;height:190px;border: solid 0px #ffffff;margin:-18% 0 0 0;}
.tag {
    display: block;
    width:125px;
    height: 125px;
    background:transparent;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    background-image: url(../images/s125.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
    float:right;}
.tag2 {
    display: block;
    width:125px;
    height: 125px;
    background:transparent;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    background-image: url(../images/c125.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
     float:right;}
.tag3 {
    display: block;
    width:125px;
    height: 125px;
    background:transparent;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    background-image: url(../images/f125.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
     float:right;}


/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	padding: 5px;
	width: 980px;
	margin: 0 auto;
}
#header {
              background-image:url(http://granshananigans.com/sample/);background-size:100% auto;
	height: 180px;
}
#content {
	width: 650px;
	float: right;
	padding:.9em;
	-webkit-border-radius:40px;-moz-border-radius: 40px;border-radius: 40px;
        box-shadow:2px 2px 6px #000000;
}
#sidebar {
	width: 250px;
	float: left;
	-webkit-border-radius:40px;-moz-border-radius: 40px;border-radius: 40px;
}
#footer {
        background-image:url(http://granshananigans.com/sample/bethenft.jpg);background-size:100% auto;
        font-size:.8em;
        text-align:center;
	clear: both;
}
#nav {
	width: 100%;
	float: right;
	margin: -.4em 0 1em 0;
	padding: 0;
               background: #434343; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEB99', endColorstr='#522900'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFEB99), to(#522900)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFEB99,  #522900); /* for firefox 3.6+ */
              border-top: 1px solid #000;
	border-bottom: 1px solid #000;  }
#nav ul {
	list-style: none;
	width: 100%;
	margin: -1em auto;
	padding: 0; }
#nav li {
	float:right;}
#nav li a {
	display: block;
	padding: 8px 10px;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	border-right: 1px solid #000; }
#nav li:first-child a {
	border-left: 1px solid #000; }
#nav li a:hover {
	background: #676767; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#676767'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#676767)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #565656,  #676767); /* for firefox 3.6+ */;
	background-color: #fff; }

.legal{background: transparent;height:30px;width:15%;display: inline-block;vertical-align: top;margin:.1em .1em .1em .1em;text-align:center;        
}
.copyright{background: transparent;height:10%;width:65%;text-align:center;margin-left:20%; }
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 98%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 25%;
	}
             
}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}
              

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}
            
}

/* border & guideline (you can ignore these) */
#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#header, #content, #sidebar {
	margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
	border: solid 0px #ccc;
}