CodePen

HTML

            
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
	<head>
	
	<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
	</head>
<html>
<body>
	<div id="canvas">
		<div id="header">
			<a href="index.html"><div id="logo"></div></a>
			
				<div id="headermenu"> 
				<ul>
					<a href="index.html"><li>Home</li></a>
					<a href="about.html"><li>About</li></a>
					<a href="events.html"><li>Events</li></a>
					<a href="stories.html"><li>ACC Warriors</li></a>
					<a href="watch.html"><li>Watch</li></a>
					<li>
</li>
					
					
				</ul>
				<div id="social">
<a href="https://www.facebook.com/groups/217974704953646/"><img src="images/facebook.png" width="33" height="33"></a>&nbsp;&nbsp;<a href=""><img src="images/youtube.png" width="35" height="35"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="U6HW6M5B9MRDU">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"></form></a></div>
				</div>			
			</div> <!--END HEADER-->
			<div id="menu">
<ul>
	<li><a class="uac" href="about.html"></a></li>
	<li><a class="events" href="events.html"></a></li>
	<li><a class="accwarrior"href="stories.html"></a></li>
	<li><a class="support" href="#"></a></li>
	<li><a class="watch" href="watch.html"></a></li>
	
</ul>	

			</div>
		<div id="content">
			<div id="maincontentevents">
					<div class="accimage"><img src="images/accrunimage.png"></div>
				<br />
					<div class="runtext"><p style="font-size: 14px; font-weight: 300; line-height: 2em; margin:auto; font-style: normal;">
Join us for a 5K fun run (or 1.3 mile walk) to benefit ACC C.U.R.E. and Adrenal Cancer research at the beautiful Verona Park! All proceeds will benefit ACC C.U.R.E..</p></div>
	<div class="schedule">
	<table width="450" border="0" margin="auto">
  <tr>
    <td width="100" height="28" class="blue">DATE:</td>
    <td width="315" class="grey">Thursday, November 4, 2012</td>
  </tr>
  <tr>
    <td class="blue">TIME:</td>
    <td class="grey">Registration: 9:00am - Event 10:00am</td>
  </tr>
  <tr>
    <td class="blue">WHERE:</td>
    <td class="grey">Verona Park Bloomfield Ave &amp; Lakeside Ave., Verona NJ</td>
  </tr>
</table>
<p>All participants will receive a FREE ACC C.U.R.E wristband!
<br />
<br />
REGISTER:
Please send your Name, Email, and Phone Number to: <a href="mailto:acc.cure@gmail.com">acc.cure@gmail.com</a>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4ZAEN6FUD86HN">
<table>
<tr><td><input type="hidden" name="on0" value="Participation">Participation</td></tr><tr><td><select name="os0">
<option value="Runner / Walker">Runner / Walker $20.00 USD</option>
<option value="Under 10 years old (5 &amp; under FREE)">Under 10 years old (5 &amp; under FREE) $10.00 USD</option>
<option value="Family Special">Family Special $50.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

</select> </td></tr>

</p> 
	</div>
			</div>
			
			<div id="leftbarevents">
				<a href="https://www.facebook.com/groups/217974704953646/"><div class="leftbarone"></div></a>
				<a href="mailto:acc.cure@gmail.com"><div class="leftbartwo"></div></a>
				<div class="leftbarthree">
				<a href="http://www.uofmhealth.org/news/archive/201209/researchers-find-2-gene-mutat">uofmhealt.org</a>
					<br />
					<a href="http://www.ur.umich.edu/update/archives/120904/brazil">ur.umich.edu</a>
					<br />
					<a href="http://atterocor.com/">attercor.com</a>
				
				</div>
			</div>
			
			<div id="footer">
				<ul>
					<a href="mailto:acc.cure@gmail.com"><li>CONTACT US</li></a>
					<a href="privacy_policy.html"><li>PRIVACTY POLICY & LEGAL</li></a>
					<a href="#"><li>DISCLOSURE STATEMENT</li></a>
				</ul>
			<p>2012 A.C.C. Cure Foundation. Site Created & Designed By SGW Marketing <a href="http://www.sgw.com">www.sgw.com</a></p>
			
			</div>
			
		</div>
	
	
	
	
	
	</div>






</body>






</html>
            
          
!

CSS

            
              body {
  font-family: arial;
	margin-top: 25px;
	background-image:url('images/background.png');
	overflow-y: scroll;
	font-family: 'Nunito', sans-serif;
	font-weight: 400;
}

#canvas {
	height: auto;
	width: 960px;
	height: 650px;
	margin: auto;
	
}

#logo {
	height: 128px;
	width: 236px;
	margin-left: 10px;
	position: relative;
	float: left;
	background: url('images/acclogo.png');
	
}

#header {
	height: 150px;
	width: 100%;

}

#headermenu {
	position: relative;
	float: right;
	display: inline;
	padding-right: 169px;



}

#headermneu ul {
	font: bold 13px arial;
	padding-left: 0px;
	margin-left: 0px;
	height: 20px;
	font-weight: 400;
	
	
	
}

#headermenu ul li {
	display: inline;
	padding-right: 20px;
	list-style-type: none;
	color: #000;
	text-decoration: none;
}

#headermenu a {
	text-decoration: none;
}

#headermenu li:hover {
	text-decoration: underline;

}

#social {
	height: 45px;
	width: 100px;
	float: right;
	position: relative;
	margin-left: 40px;
	top: -35px;
	right: -164px;
	display: inline;
	
}

.donate {
	position: absolute;
	left: 404px;
	bottom: 20px;
}

#social a {
	text-decoration: none;
	color: grey;
}

#menu {
	margin: 0px;
	height: 15px;
	margin-left: -10px;
	z-index: 1;
	width: 103%;
	position: relative;
	left: -12px;
	
}

#menu li {
	float: left;
	display: block;
	color: #000;
}

#menu li a {
	background-image: url(images/sprite.png);
	display: block;
	outline: none;
	position: relative;
	height: 70px;
	text-decoration: none;
	width: auto;
}

#menu .uac {
	background: url('images/sprite.png') no-repeat -23px -280px;
	width: 268px;
	height: 31px;
}

#menu .events {
	background: url('images/sprite.png') no-repeat -23px -201px;
	width: 126px;
	height: 28px;
}

#menu .accwarrior {
	background: url('images/sprite.png') no-repeat -23px -111px;
	width: 186px;
	height: 31px;
	padding-right: 10px;
}

#menu .support {
	background: url('images/sprite.png') no-repeat -23px -21px;
	width: 186px;
	height: 31px;
	padding-right: 20px;
}

#menu .watch {
	background: url('images/sprite.png') no-repeat -23px -376px;
	width: 72px;
	height: 31px;
}

#menu a .hover {
	background: transparent url('images/sprite.png') no-repeat;
	display: block;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#menu .uac:hover {
	background: url('images/sprite.png') no-repeat -15px -313px;
	width: 268px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -8px;
}

#menu .events:hover {
	background: url('images/sprite.png') no-repeat -8px -229px;
	width: 126px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -15px;
}

#menu .accwarrior:hover {
	background: url('images/sprite.png') no-repeat -17px -144px;
	width: 186px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -6px;
}

#menu .support:hover {
	background: url('images/sprite.png') no-repeat -13px -59px;
	width: 186px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -10px;
}

#menu .watch:hover {
	background: url('images/sprite.png') no-repeat -13px -412px;
	width: 131px;
	height: 31px;
	position: relative;
	top: -8px;
	left: -11px;
}

#content {
	height: 800px;
	width: 960px;
}

#maincontent {
	height: 434px ;
	width: 663px;
	overflow: auto;
	margin: 10px;
	background: url('images/content.png') no-repeat;
	position: relative;
	top: -8px;
	padding: 10px;
}

#maincontentslider {
	height: 434px ;
	width: 663px;
	margin: 10px;
	position: relative;
	top: -12px;
	left: -9px;
	padding: 10px;

}

#maincontentevents {
	height: 434px ;
	width: 663px;
	margin: 10px;
	position: relative;
	overflow: auto;
	top: -8px;
	left: 1px;
	padding: 10px;
	background: url('images/content.png') no-repeat;

}


#maincontentwatch {
	height: 434px ;
	width: 663px;
	margin: 10px;
	position: relative;
	overflow: auto;
	top: -8px;
	left: 1px;
	padding: 10px;
	background: url('images/content.png') no-repeat;

}

#leftbar {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -466px;
	left: -27px;
}

#leftbarslider {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -466px;
	left: -27px;
}

#leftbarstories {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -472px;
	left: -27px;
}

#leftbarabout {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -472px;
	left: -27px;
}

#leftbarevents {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -472px;
	left: -27px;
}

#leftbarwatch {
	height: 454px;
	width: auto;
	float: right;
	position: relative;
	top: -792px;
	left: -27px;
}

.leftbarone {
	background: url('images/facebooklike.png') no-repeat;
	height: 140px;
	width: 232px;
	padding-bottom: 17px;
}

.leftbartwo {
	background: url('images/accrun.png') no-repeat;
	height: 140px;
	width: 232px;
	padding-bottom: 17px;
}

.leftbarthree {
	background: url('images/relatedlinks.png') no-repeat;
	height: 140px;
	width: 232px;
}

.leftbarthree a {
	text-decoration: none;
	color: #20929e;
	margin-left:65px;
	position: relative;
	top: 65px;
	text-align: center;
}

#footer {
	height: 100px;
	width: 835px;
	margin: auto;
	padding-left: 218px;

}

#footer a {
	text-decoration: none;
	color: #000;
	font-size: 11px;
}

#footer  ul li {
	display: inline;
	padding-right: 10px;
}

#footer li:hover {
	text-decoration: underline;
}

#footer p {
	font-size: 11px;
}

#footer a:hover {
	text-decoration: underline;
}


#footerwatch {
	height: 100px;
	width: 835px;
	margin: auto;
	padding-left: 218px;
	position: relative;
	top: -330px;

}

#footerwatch a {
	text-decoration: none;
	color: #000;
	font-size: 11px;
}

#footerwatch  ul li {
	display: inline;
	padding-right: 10px;
}

#footerwatch li:hover {
	text-decoration: underline;
}

#footerwatch p {
	font-size: 11px;
}

#footerwatch a:hover {
	text-decoration: underline;
}

::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #20929e); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #20929e; 
    -webkit-box-shadow: inset 0 0 6px #20929e); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #000; 
}

.accimage {
	margin: auto;
	margin-top: 10px;
	padding-left: 155px;
	position: relative;
	top: -10px;
}

.runtext{
	width: 500px;
	margin-left: 10px;
	margin: auto;
	position: relative;
	top: -15px;

}

.schedule {
	width: 442px;
	height: auto;
	margin-left: 90px;
	position: relative;
	top: -10px;
}

.blue {
	font-size: 21px;
	color: #20929e;
}

.grey {
	font-size: 21px;
	color: #3c3c3e;
}

.bluesmall {
	font-size: 14px;
	color: #20929e;
	font-weight: 400;
	display: inline;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................