* {
margin: 0;
padding: 0;
}
html {
font-size: 100%;
}
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
#wrapper {
width: 96%/*714px*/;
font-size: 1.2em;
line-height: 1.5em;
margin: 0 auto;
background-color:#FFFFFF;
margin-top: 60px;
margin-bottom: 20px;
/*max-width: 714px;*/
}
p {
margin-bottom: 1.5em;
}
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ul li { list-style: inside;}
/* ---------- add your code below ---------- */
header, nav, section, article, aside, footer { display: block;}
section { margin-bottom: 1em;}
section.bg { background-color: #CCC;}
header { width:99.4397759%;
padding-bottom:/*58.15493%*/35.69607%;
background: url(i/storefront.jpg) no-repeat left top;
border: 2px solid #000000; background-size:cover; background-position: center;
}
header h1 { width: 50%; margin-top: -46px; font-family:Georgia, "Times New Roman", Times, serif;}
#tel {width: /*200px*//*28.01120448%*/40%; float:right; /*margin-top:-5px;*/ color:#202569; text-align: right;}
@media screen and (min-width: 416px) {
#tel:not(*:root) {
margin-top: -20px;
}
@-moz-document url-prefix() {
#tel {
margin-top: -20px;
}
}
}
nav { width: /*714px*/100%; /*height:30px;*/}
#navg{
width: /*711px*/99.5798319%;
list-style: none;
margin: 0;
padding: 0 0 0 3px; background-color:#000000; float: left;
}
#navg li{ margin: 0 .3em 0 0; float: left;}
#navg li a:link, #navg li a:visited {
font: 1.1em Arial, Geneva, Helvetica, Helvetica Neue, sans-serif;
float: left;
height: auto;
display: block;
padding: .4em .5em;
color:#FFFFFF;
text-decoration: none; font-weight:bold;
}
#navg li a:hover {
color: #949B9B; font-weight:bold;
}
#homepage li#home a, #webpage li#web a, #linkspage li#link a, #contactpage li#contact a, #founderpage li#founder a { color: #FFFF00; cursor: default;}
#content { width: /*694px*/97.198880%; padding: 10px 1.4005602%; border-bottom: 2px solid #000000;}
article { }
#content h2, #content article h2 { text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5); margin-bottom: 1em; margin-top: 2em; font-family:Georgia, "Times New Roman", Times, serif;}
#content h3 { margin-bottom: 1em;}
#content h4 { margin-top: 2em;}
/*#hlist { height: 12em;}*/
#hlist li {float: left; width: /*230px*/33.1412104%;}
aside { text-align: center;}
aside h2 {text-shadow: none !important;}
footer { padding: 10px;}
#power { width: 50%; float: right; font-size:.8em; text-align: right;}
#power a:link, #power a:visited { color:#000000; text-decoration: none;}
#power a:hover { color:#EFA954;}
.img-wrapper {
background: url(file:///C|/Users/Timothy/WebSites/Prowire%20Electric/i/CMR-Shadow.png) no-repeat bottom right;
float:right;
clear:right;
line-height:0;
margin-bottom: 0;
margin-left: 5px;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}
.photo { float: right;}
#photo1 li { width:170px/*24.4956772%*/; float:left; list-style: none;}
#photo1 li a
{
display: block;
width: 100%;
}
#photo1 li a img
{
display: block;
max-width: 100%;
}
.google-maps {
position: relative;
padding-bottom: 75%/*56.25%*/;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.loader { text-align: center;}
.loader h3 { margin-bottom: 2em;}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.scroll-to-top {
position: fixed;
background: url(i/scroll-to-top.png) no-repeat;
cursor: pointer;
bottom: 1em;
right: 0px;
width:55px;
height: 55px;
padding-right: 1em;
display: none;
z-index: 999;
}
.new { color: red; border: 2px solid red; padding: 0 5px; margin-right: 3px; border-radius: 5px;}
@media screen and (min-width: 740px) {
#wrapper {width: 714px;}
}
@media screen and (max-width: 740px) {
#photo1 li { width: 45%; margin-bottom: 1em;}
}
@media screen and (max-width: 641px) {
nav {padding-right: 1px;}
aside { width: 90%; float: none; margin-bottom: 1em;}
}
@media screen and (max-width: 620px) {
#hlist li {width:45%;}
}
@media screen and (max-width: 460px) {
#hlist li {float:none; list-style: outside; margin-left: 1em;}
#photo1 li {width: auto; margin: 1em 2em;}
#power {float:none; width: auto; text-align:left;}
}
@media screen and (max-width: 415px) {
header h1 { margin-bottom: 5px; width: auto;}
#tel { float: none; width:auto; text-align:left;}
}