CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<title>ACC C.U.R.E- Crusade Until a Resolution Exists</title>
</head>

<body>
  <div id="canvas"> <!-- Start Canvas -->
		
			<a href="index.html"><div class="logo"><img src="images/acclogo.png"></img></a>
								 
<div class="hovermenu">
	<ul>
		<li><a href="#">Home&nbsp;|</li></a>
		<li><a href="#">About&nbsp;|</li></a>
		<li><a href="#">Events&nbsp;|</li></a>
		<li><a href="#">ACC Warriors&nbsp;|</li></a>
		<li><a href="#">Donate&nbsp;|</li></a>
		<li><a href="#">Watch</li></a>
	</ul>
	<div class="img"><img src="images/facebook.png">&nbsp;<img src="images/youtube.png"></div><!--END IMG-->
</div> <!-- END TOPNAV //-->
</div> <!-- END LOGO //-->
								
		<div id="navigation">
		<!-- Sprite navigation goes here //-->
<ul>
	<li><a class="uac" href="#"></a></li>
	<li><a class="events" href="#"></a></li>
	<li><a class="accwarrior"href="#"></a></li>
	<li><a class="support" href="#"></a></li>
    <li><a class="watch" href="#"></a></li>
</ul>
		</div> <!-- END NAVIGATION //-->
					<div id="content">
						<div id="maincontent">
<!--NO SLIDER -->
<!--START CONTENT-->
							<div style="width:660px;height: 450px; overflow:scroll;">
<h1 style="font-size:24px; color: #20929e; margin: auto; padding: 10px;">Undertanding Adrenal Cancer</h1>
<a name="uac" id="uac"></a><p style="font-size: 14px; font-weight: 300; line-height: 2em; margin:auto; font-style: normal; ">Adrenal cancer (Adrenocortical Carcinoma) is an extremely rare and aggressive cancer affecting the adrenal glands, located on top of each kidney. These glands are essential for the regulation of various important body functions, including blood pressure, heart rate, and the production and regulation of various hormones. They are also responsible for the body's ability to respond to stress.

Although the average age of those diagnosed is between 45 and 50, adrenal cancer has been found to affect those of all ages, even in young children. Often times there are no physical symptoms of the disease in adults, making it very difficult to diagnose. Adrenal tumors do appear on CT scans or MRIs that are typically done on an individual for a different reason. The incidence rate of adrenal cancer is about 600 new cases per year in the United States, or 1 to 2 diagnosed individuals per million.

This type of cancer is extremely aggressive and can spread very rapidly. The rarity of adrenal cancer means that many physicians are not familiar with it and therefore are unsure of how to treat it. Thankfully, there are locations such as the University of Michigan Medical Center that specialize in adrenal cancer and are making outstanding efforts to understand and treat this rare disease.</p>
</div>



<!--END CONTENTPAGE-->

						</div> <!--END MAINCONTENT-->
							<div id="leftbar">
								<div class="facebooklike">
								
								</div><!--END FACEBOOKLIKE-->
								<div class="accrun">
								
								</div><!--END ACCRUN-->
								<div class="related">
								
								</div><!--END RELATED-->
							
							</div> <!--END LEFTBAR-->


					</div> <!-- END CONTENT //-->
<div id="footer">
	<ul>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>CONTACT US&nbsp;|</li>
		<li>PRIVACY POLICY & LEGAL&nbsp;|</li>
		<li>DISCLOSURE STATEMENT</li>	
	</ul>
	<br />
	<div class="butfooter">
	2012 A.C.C Cure Foundation. Site Created & Designed By SGW Marketing <a href="#">www.sgw.com</a>
	</div>
</div> <!--END FOOTER-->

	</div> <!-- End Canvas //-->





</body>



</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License:  none (public domain)
 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

body {
    line-height: 1;
}

ol,ul {
    list-style: none;
}

blockquote,q {
    quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

<--END RESET CSS--> html {
    background: url('images/background.png') no-repeat center center fixed;
    background-color: #ccc;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.png', sizingMethod='scale');
}

body {
    min-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: url('images/background.png') no-repeat center center fixed;
    background-color: #ccc;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.png', sizingMethod='scale');
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 10px;

}

.p {
display: inline;
}

#canvas {
    padding: 40px;
    margin-top: 25px;
    height: 850px;
    width: 930px;
    margin: auto;
    
}

.logo {
    height: 128px;
    margin: auto;
    padding-bottom: 15px;
    padding-left: 12px;
}

.hovermenu {
    width: 550px !important;
    float: right;
    top: -110px;
    z-index: 1;
}

.hovermenu li {
    font-family: 'Nunito', sans-serif;
}

.hovermenu ul {
    font: bold 13px arial;
    padding-left: 0;
    margin-left: 0;
    height: 20px;
    font-weight: 500;
}

.hovermenu ul li {
    list-style-type: none;
    display: inline;
    width: 400px;
    color: black;
    padding-right: 10px;
}

.hovermenu ul li a {
    padding: 2px 0.5em;
    text-decoration: none;
    float: left;
    color: black;
}

.hovermenu ul li a:hover {
    border-style: outset;
    text-decoration: underline;
}

#navigation {
    margin: 0px;
    height: 15px;
    margin-left: 17px;
    z-index: 1;
}

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

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

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

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

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

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

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

#navigation 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%;
}

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

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

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

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

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

#content {
    padding: 10px;
    margin-top: 10px;
    height: 500px;
    z-index: 999;
    
}

#maincontent {
    background: url('images/content.png') no-repeat;
    height: 454px;
    width: 663px;
    float: left;
    margin: auto;
    margin-top: -12px;
}


#maincontent .p {
    font-size: 12px;
    display: inline;
}

#leftbar {
    float: right;
    height: 454px;
    width: 232px;
    margin-left: 15px;
    margin-top: -12px;
}

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

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

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

}

#footer {
    margin: auto;
    position: relative;
    top: -40px;
    height: 50px;
    width: 450px;
}

#footer p,#footer a,#footer li {
    font-size: 12px;
    font-weight: 400;
    display: inline;
}

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


.butfooter {
    height: 50px;
    width: 450px;
    margin: auto;
    align: center;
}

.butfooter p {
    font-size: 10px;
    font-weight: 400;
    align: center;
}

p {
    font-family: "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
    font-stretch: normal;
    padding: 10px;
}

.img {
    padding-right: 15px;
    float: right;
    position: relative;
    top: -30px;
}

.img :hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 0.8;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

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

.runtext{
    width: 500px;
    margin-left: 10px;
    margin: auto;

}

.schedule {
    width: 400px;
    margin-left: 90px;
}

.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 ..................