@font-face {
    font-family: 'dirty_ego';
    src: url("../fonts/dirtyego-webfont.eot");
    src: url("../fonts/dirtyego-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/dirtyego-webfont.woff") format("woff"), url("../fonts/dirtyego-webfont.ttf") format("truetype"), url("../fonts/dirtyego-webfont.svg#dirty_egoregular") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'antonio';
    src: url("../fonts/antonio-regular-webfont.eot");
    src: url("../fonts/antonio-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/antonio-regular-webfont.woff") format("woff"), url("../fonts/antonio-regular-webfont.ttf") format("truetype"), url("../fonts/antonio-regular-webfont.svg#antonioregular") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'antonioregular';
    src: url("../fonts/antonio-regular-webfont.eot");
    src: url("../fonts/antonio-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/antonio-regular-webfont.woff") format("woff"), url("../fonts/antonio-regular-webfont.ttf") format("truetype"), url("../fonts/antonio-regular-webfont.svg#antonioregular") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'BebasNeue';
    src: url("../fonts/BebasNeue.eot");
    src: url("../fonts/BebasNeuet?#iefix") format("embedded-opentype"), url("../fonts/BebasNeue.woff") format("woff"), url("../fonts/BebasNeue.ttf") format("truetype"), url("../fonts/BebasNeue.svg#BebasNeue") format("svg");
    font-weight: normal;
    font-style: normal
}

.typography * {
    font-size: 1em
}

.typography blockquote {
    margin-left: 20px
}

.typography hr {
    padding: 5px
}

.typography p,
.typography ul li,
.typography ol li {
    color: #FFFFFF;
    line-height: 1.5em;
    font-size: 14px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif
}

.typography p {
    clear: both;
    line-height: 20px;
    margin-bottom: 20px
}

.typography .showRegisterForm {
    color: #FFFF00;
    cursor: pointer
}

.typography .showRegisterForm:hover {
    text-decoration: underline
}

.typography h1,
.typography h2,
.typography h3,
.typography h4 {
    color: #FFFFFF;
    font-family: antonio;
    margin-bottom: 14px
}

.typography h1,
.typography h4 {
    font-weight: bold
}

.typography h2,
.typography h3 {
    font-weight: normal
}

.typography h1 {
    font-size: 2.7em;
    text-transform: uppercase
}

.typography h2 {
    font-size: 2.5em
}

.typography h3 {
    font-size: 1.8em
}

.typography h4 {
    font-size: 1.4em
}

.typography a {
    color: #FFFF00;
    font-size: 1em;
    text-decoration: none
}

.typography a:hover {
    text-decoration: underline
}

.typography ul,
.typography ol {
    margin-left: 10px;
    margin-bottom: 20px
}

.typography ul li,
.typography ol li {
    margin: 4px 10px;
    line-height: 1.4em
}

.typography ol li {
    list-style-type: decimal
}

.typography ul {
    list-style-position: inside;
    list-style-type: square
}

.typography .PageTitle {
    text-transform: uppercase
}

.typography table {
    font-size: 1.1em
}

.typography table tr td {
    padding: 3px 5px
}

.typography table tr td img {
    height: auto;
    width: 100%
}

.typography .left {
    text-align: left
}

.typography .center {
    text-align: center
}

.typography .right {
    text-align: right
}

.typography img.right {
    float: right
}

.typography img.left {
    float: left
}

.typography p.MsoNormal,
.typography p.MsoBodyText {
    margin: 0
}

.typography .solarPanelPrice {
    color: #FFA500;
    font-size: 22px
}

.typography .solarPanelImage {
    margin: 10px
}

.typography .solarPanelTableHeader {
    background: url(../images/solar-panel-table-header.png)
}

@media screen and (max-width: 640px) {
    .typography .solarPanelImage {
        width: 100px;
        margin: 0
    }
    .typography p img {
        height: auto;
        width: 100%
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .typography .solarPanelImage {
        margin: 0
    }
    .typography p img {
        height: auto;
        width: 100%
    }
}