Ref: first web site tutorial - why does Doctype data load with paste-special Adobe edge font
Here's the CSS that I used.
@charset "utf-8";
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #eff5f8;
}
#wrapper {
background-color: #ffffff;
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#hero {
position: absolute;
clear: left;
top: 92px;
left: -1%;
margin-top: -138px;
padding-top: 0px;
width: 100%;
min-width: 740px;
max-width: 1214px;
padding-left: 13px;
margin-right: 0px;
margin-left: 25px;
}
#hero article {
width: 36%;
padding-left: 9px;
padding-right: 9px;
position: relative;
background-color: #F5951B;
border-radius: 15px;
color: #ffffff;
top: 210px;
right: -644px;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
padding-top: 9px;
padding-bottom: 9px;
}
h1, h2 {
color: #3399cc;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
}
h1 {
font-size: 72px;
text-align: center;
text-transform: uppercase;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
color: #3399cc;
}
#main {
width: 58%;
margin-left: 2%;
float: left;
top: -57px;
margin-top: 545px;
}
#sidebar {
width: 34%;
margin-left: 0%;
clear: none;
padding-left: 4%;
float: left;
top: 0px;
left: 0px;
margin-top: 539px;
}
#footer {
background-color: #43a6cb;
color: #ffffff;
}
#footer {
clear: left;
padding-left: 2%;
background-color: #43a6cb;
color: #ffffff;
}
#figure img {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #ffffff;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #ff6600;
}
a:visited {
color: #ff944c;
}
a:hover, a:active, a:focus {
color: #7f3300;
text-decoration: underline;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 20%;
display: block;
float: left;
text-align: center;
background-color: #4d4d4d;
color: #ffffff;
padding-top: 6px;
padding-bottom: 6px;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
text-decoration: none;
background-color: #43a6cb;
}
#hero h2 {
color: #ffffff;
text-transform: uppercase;
margin-top: 12px;
margin-bottom: -17px;
}
