/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html{background:#e4e4e4 url(/images/headerfooter/bg_grid.jpg) top center repeat!important;}
body {
font-size: 1em;
line-height: 1.4;
font-family: "myriad-pro", Arial, Helvetica, sans-serif;
font-weight:300;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* Headers
*/
h1{font:normal 36px "myriad-pro", Arial, Helvetica, sans-serif;}
h2{font:normal 24px "myriad-pro", Arial, Helvetica, sans-serif;}
h3{font:normal 18px "myriad-pro", Arial, Helvetica, sans-serif;}
h4{font:normal 14px "myriad-pro", Arial, Helvetica, sans-serif;}
h5{font:normal 10px "myriad-pro", Arial, Helvetica, sans-serif;}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/*
* Remove focused outline.
*/
a:focus {
outline: none;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/******************************
*******************************
1. GLOBAL CLASSES
2. HEADER
3. HEADERPAGE
4. BREADCRUMB
5. TOP NAV
6. MAIN NAV
7. SOCIAL NAV
8. FOOTER
9. FOOTER NAV
10. HOME
10a. SOCIAL NAV
10b. SLIDES
10c. PRODUCTS
11. OVERVIEW
11a. PAGEHEADER
11b. LIST ITEMS
11c. NESTED LIST ITEMS
12. L2 PAGES
13. L4 TESTIMONIAL
13a. PAGEHEADER
13b. CONTENT
13c. QUOTE FORM
*******************************
******************************/
/*
* 1. GLOBAL CLASSES
*/
.constraint{width:950px; margin:0 auto; position:relative;}
.content{background:transparent url(/images/headerfooter/bg_shadow.png) bottom center no-repeat; padding-bottom:7px;}
.content .constraint{background:#fff; -moz-border-radius:10px; border-radius:10px; overflow:hidden;}
.content_inner{padding:50px 0px; max-width:660px; margin:0 auto;}
.content_header h1{margin:0px; padding:0 0 10px 0; font:300 36px "myriad-pro", Arial, Helvetica, sans-serif; border-bottom:#e7e7e8 1px solid; }
.content_header p{color:#6c6e70;}
.content_footer{background:transparent url() 0 0 no-repeat; padding-left:85px; font-style:italic; min-height:80px;}
.content_columns {width:100%; margin:0 auto;}
.col{float:left; width:48%; font-size:14px; margin:0 2% 15px 0;}
.col:last-child{margin:0 0 0 2%;}
.col h2{font-weight:600; font-size:14px; line-height:2; padding:0px; margin:0 0 8px 0;}
.col ul{margin:0px; padding:0 0 0 15px;}
.col li{margin:0 0 10px 0; padding:0; font-size:8px;}
.col li p{font-size:14px;}
.fullcol{float:none; clear:both; width:100%; border-top:#e7e7e8 1px solid;}
a.btnArrow{color:#000000; font-size:10px; font-weight:600; display:inline-block; text-decoration:none; text-transform:uppercase; padding-right:10px; background:transparent url(/images/headerfooter/arrow_black.png) right 5px no-repeat;}
a.btnArrow.black{color:#000000; background-image: url(/images/headerfooter/arrow_black.png);}
a.btnArrow.white{color:#ffffff; background-image: url(/images/headerfooter/arrow_white.png);}
a.btnArrow.lightGray{color:#e6e7e8; background-image: url(/images/headerfooter/arrow_lightGray.png);}
a.btnArrow.mediumGray {color:#a7a9ac; background-image: url(/images/headerfooter/arrow_mediumGray.png);}
a.btnArrow.darkGray {color:#6d6e71; background-image: url(/images/headerfooter/arrow_darkGray.png);}
a.btnArrow.brightBlue {color:#33ccff; background-image: url(/images/headerfooter/arrow_brightBlue.png);}
a.btnArrow.lightBlue {color:#a3cbc9; background-image: url(/images/headerfooter/arrow_lightBlue.png);}
a.btnArrow.mediumBlue {color:#7aa3aa; background-image: url(/images/headerfooter/arrow_mediumBlue.png);}
a.btnArrow.darkBlue {color:#4b7e88; background-image: url(/images/headerfooter/arrow_darkBlue.png);}
a.btnArrow.lightGreen {color:#c4d597; background-image: url(/images/headerfooter/arrow_lightGreen.png);}
a.btnArrow.mediumGreen {color:#a7c539; background-image: url(/images/headerfooter/arrow_mediumGreen.png);}
a.btnArrow.darkGreen {color:#749e33; background-image: url(/images/headerfooter/arrow_darkGreen.png);}
a.btnArrow.lightOrange {color:#fdb913; background-image: url(/images/headerfooter/arrow_lightOrange.png);}
a.btnArrow.mediumOrange {color:#f7941d; background-image: url(/images/headerfooter/arrow_mediumOrange.png);}
a.btnArrow.lightRed {color:#f7941d; background-image: url(/images/headerfooter/arrow_mediumOrange.png);}
a.btnArrow.mediumRed {color:#ca6643; background-image: url(/images/headerfooter/arrow_mediumRed.png);}
sup{font-size:25%; vertical-align:super;}
#page_container{padding-top:110px;}
#site_bar{z-index:1000; position:relative;}
/*form input, form select, form textarea{display:block; color:#6d6e70; background-color:#e6e7e8; border:0px solid; width:90%; margin-bottom:10px; padding:12px 5%;-moz-border-radius:8px; border-radius:8px;}*/
/*form select{width:100%; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding:12px 0 12px 5%; background:none; margin:0; width:125%;}*/
form .selectbox{clear:both; background:#e6e7e8 url(/images/headerfooter/arrow_select.png) top right no-repeat;-moz-border-radius:8px; border-radius:8px; overflow:hidden; margin-bottom:10px;}
form textarea{resize:none; width:455px; height:180px; padding:10px;}
::-webkit-input-placeholder {color: #6d6e70; opacity: 1 !important;}
:-moz-placeholder { /* Firefox 18- */ color: #6d6e70; opacity: 1 !important;}
::-moz-placeholder { /* Firefox 19+ */ color: #6d6e70; opacity: 1 !important;}
:-ms-input-placeholder {color: #6d6e70; opacity: 1 !important;}
/*form input[type="checkbox"]{float:left; margin:2px 0 0 -30px; width:25px; height:25px;}*/
label.checkbox{padding-left:30px; display:block;}
/*form input[type="submit"]{width:auto; margin:15px 0; background:transparent url(/images/headerfooter/arrow_submit_white.png) 72px 13px no-repeat; text-transform:uppercase; padding:5px 20px 5px 10px; font:300 19px "myriad-pro", Arial, Helvetica, sans-serif;}*/
form p{margin-bottom:4px;}
.doublecol label{width:30%; float:left;}
.doublecol input[type="radio"]{width:auto; display:inline; margin-right:10px;}
form p{margin:0 0 3px 0;}
/*form select{padding-bottom:10px;}*/
/*
* 2. HEADER
*/
header{background:#fff; position:fixed; top:0px; z-index:999; width:100%;}
header .constraint{height:110px; padding-bottom:0px; }
#mozyLogo{position:absolute; top:65px; left:8px;}
/*
* 3. PAGEHEADER
*/
#pageHeader{margin:0px; background:transparent url(/images/headerfooter/bg_shadow.png) bottom center no-repeat; padding-bottom:7px;}
#pageHeader p{margin:0px;}
#pageHeader p.title{color:#ffffff;}
#pageHeader .constraint{-moz-border-radius-bottomright:10px; border-bottom-right-radius:10px; -moz-border-radius-bottomleft:10px; border-bottom-left-radius:10px; background-repeat:no-repeat; background-position:40px 130px;}
#pageHeader .col1{position:absolute; top:40px; left:40px; width:300px;}
#pageHeader .col1 h1{margin:-5px 0 15px 0; width:250px; padding:0px;}
#pageHeader .col1 p{text-transform:uppercase; font-size:14px;}
#pageHeader .col2{margin-left:310px;-moz-border-radius-bottomright:10px; border-bottom-right-radius:10px; padding:0px 20px 50px 70px; min-height:185px;}
#pageHeader .col2 .inner{padding-top:70px;}
#pageHeader .col2 h1{margin:-15px 0 5px 0; width:465px; padding:0px;}
#pageHeader .col2 h2{margin:-15px 0 5px 0; width:465px; padding:0px;}
#pageHeader .col2 p{width:500px; font-size:14px;}
/*
* 4. BREADCRUMB
*/
#breadcrumb ul{list-style-type:none; padding:0; margin:0px 0 0 0px; padding-left:40px; height:20px; }
#breadcrumb ul li{font-size:10px; float:left; padding-right:3px;}
#breadcrumb ul li a{font-size:10px; font-weight:500; text-decoration:none; text-transform:uppercase; color:#6d6e71;}
/*
* 5. TOP NAV
*/
#topNav{position:absolute; top:0px; right:0px; z-index:100;}
#topNav>ul>li{float:left; position:relative; height:32px;}
#topNav>ul>li a{font-weight:normal; font-size:11px; color:#8a8c8f; text-decoration:none; padding:0 10px; border-right: 1px solid;}
#topNav>ul>li:last-child>a{border:none;}
#topNav ul li.search a{border:none;}
#topNav ul li.search a{background:#fff url(/images/headerfooter/bg_topNavSearch.png) center right no-repeat; padding-right:11px;}
#topNav ul li.searchBox form{width:0px; height:25px; background:#fff url(/images/headerfooter/bg_search.jpg) top right no-repeat; position:absolute; top:6px; right:0px; overflow:hidden;}
#topNav ul li.searchBox form input{padding:0px; background:transparent; border:0px solid; height:20px; width:155px; margin:4px 0 0 5px; font-size:14px}
#topNav ul li.searchBox form input[type='submit']{ margin:0px; width:20px; height:20px; position:absolute; top:2px; right:2px; text-indent:-999px;}
#topNav>ul>li.dropdown>a{background:#fff url(/images/headerfooter/bg_topNavArrow.png) center right no-repeat; padding-right:23px; outline:none;}
#topNav>ul>li.dropdown>ul{display:none; width:146px; padding:28px 0 0 0; background:transparent url(/images/headerfooter/bg_topNav_drop_top.png) top center no-repeat; position:absolute; top:0px; left:-20px;}
#topNav>ul>li.dropdown>ul>li{height:auto; background:transparent url(/images/headerfooter/bg_topNav_drop_mid.png) left bottom repeat-y;}
#topNav>ul>li.dropdown>ul>li:last-child{ background:transparent url(/images/headerfooter/bg_topNav_drop_btm.png) left bottom no-repeat; padding-bottom:20px;}
#topNav li ul ul{display:none; padding:0px; margin:0 0 0 40px; list-style-type:disc;}
#topNav li.dropdown li{padding:0px; margin:0px;}
#topNav li.dropdown li a{display:block; padding:10px 30px; margin:0; border:none;}
#topNav li.dropdown li:last-child a{padding-bottom:0px!important;}
#topNav li.dropdown li li{border:none; padding:0!important; font-size:8px;}
#topNav li.dropdown li li a{display:block; padding:5px 30px 0 0!important; margin:0; background:none!important;}
/*
* 6. MAIN NAV
*/
#navToggle{display:none;}
#mainNav{position:absolute; bottom:0px; right:0px; z-index:99;}
#mainNav>ul>li{float:left; padding:0px;}
#mainNav li a{font:normal 18px "myriad-pro", Arial, Helvetica, sans-serif; color:#8a8c8f; text-decoration:none; padding:12px 50px 8px 50px; display:block;}
#mainNav>ul>li:last-child a{background:#fff url(/images/headerfooter/bg_mainNavSignUp.png) right center no-repeat;}
#mainNav ul ul{display:none; position:absolute; background:#FFF; margin:0 0 0 20px; padding:10px 30px 20px 30px; box-shadow:#666 1px 2px 2px; -moz-border-radius-bottomright:10px; border-bottom-right-radius:10px; -moz-border-radius-bottomleft:10px; border-bottom-left-radius:10px;}
#mainNav ul ul li{float:none; border-bottom:#dddede 1px solid; padding:10px 0; margin:0px;}
#mainNav ul ul li a{font:normal 12px Arial, Helvetica, sans-serif; padding:0px; margin:0px;}
#mainNav ul ul ul{display:block; position:static; margin:0 0 0 15px; padding:0px; box-shadow:#fff 0 0 0; list-style-type:disc;}
#mainNav ul ul ul li{border:0px; padding:0px; color:#b4b6b7; font:normal 6px Arial, Helvetica, sans-serif; }
#mainNav ul ul ul li a{color:#b4b6b7; font:normal 12px Arial, Helvetica, sans-serif; position:relative; top:3px;}
/*
* 7. SOCIAL NAV
*/
#socialNav ul{position:fixed; z-index:999; top:150px; right:0px; padding:10px; background:transparent url(/images/headerfooter/bg_socialMedia.png) left top no-repeat; margin:0px;}
#socialNav li{margin:0 0 13px 0; padding:0px;}
#socialNav li a{display:block; width:22px; height:23px; background:transparent url(/images/headerfooter/ico_socialMedia.png) top left no-repeat; text-indent:-999px; overflow:hidden;}
#socialNav li#facebook a{background-position:0 0;}
#socialNav li#twitter a{background-position:0 -36px;}
#socialNav li#google a{background-position:0 -73px;}
#socialNav li#linkedIn a{background-position:0 -109px;}
#contactNav ul{position:fixed; z-index:999; top:310px; right:0px; padding:13px 5px 0 5px; background:transparent url(/images/headerfooter/bg_contactNav.png) left top no-repeat; margin:0px;}
#contactNav.blue ul{background-image:url(/images/headerfooter/bg_contactNav_blue.png);}
#contactNav li{margin:0 0 13px 0; padding:0px;}
#contactNav li a{display:block; width:31px; height:22px; background:transparent url(/images/headerfooter/ico_liveChat.png) top left no-repeat; text-indent:-999px; overflow:hidden;}
/*
* 8. FOOTER
*/
footer{clear:both;}
footer .constraint{font:normal 11px Arial, Helvetica, sans-serif; color:#fff; background:transparent url(/images/headerfooter/bg_footerTop.png) top center no-repeat; padding-top:7px;}
footer .constraint a{font:normal 11px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase;}
footer .constraint ul ul a{text-transform:none;}
/*
* 9. FOOTER NAV
*/
#footerNav{background:#808080; padding-bottom:40px;}
#footerNav ul{margin:0 0 0 20px; padding:0px; list-style-type:none;}
#footerNav ul ul{margin:0px; padding:0px; list-style-type:none;}
#footerNav ul ul ul{margin:3px 0 0 15px; padding:0px; list-style-type:disc;}
#footerNav li{float:left; margin:10px 1% 0 0 ; padding:0px; width:19%;}
#footerNav li li{float:none; width:auto;}
#footerNav li li li {margin-top:0px; color:#b4b6b7; font-size:8px;}
#footerNav li li li a{color:#b4b6b7; font-size:11px;}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (max-width: 320px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 600px) {
body{}
body.navOpen{overflow:hidden;}
#page_container{padding-top:60px; position:absolute; width:100%;}
#navToggle{display:block; position:absolute; top:10px; right:15px; width:46px; height:38px; overflow:hidden; text-indent:-900px; background:transparent url(/images/headerfooter/ico_navToggle.png) center center no-repeat;}
header .constraint{height:auto; height:60px;}
header #siteNav{padding:0px; margin:0px; background:#000 url(/images/headerfooter/bg_sideNav.jpg) top center repeat; height:100%; position:absolute; top:0; right:-80%; z-index:999; width:80%; overflow:auto;}
header #topNav {position:static;}
header #topNav ul{padding:55px 0 15px 0; margin:0px; border-bottom:1px solid;}
header #topNav li{display:block!important; float:none; padding:0px; margin:0px; height:auto;background:none!important;}
header #topNav li a{font:normal 22px "myriad-pro", Arial, Helvetica, sans-serif; display:block; float:none; padding:10px 10px 10px 20px; border-right:none;}
header #topNav li.dropdown a{background:none;}
header #topNav li.search a{display:none;}
header #topNav li.searchBox{position:static; top:0px; right:0px; }
header #topNav li.searchBox form{width:100%; height:auto; background:none; overflow:hidden;}
header #topNav li.searchBox form input{background:#fff; border:none; -moz-border-radius:10px; border-radius:10px; height:auto; padding:5px 0px 2px 35px; width:90%; margin:0 auto; font-size:22px}
header #topNav li.searchBox form input[type='submit']{ margin:0px; width:24px; height:24px; position:absolute; top:3px; left:5px; right:inherit; -moz-border-radius:0px; border-radius:0px; background:transparent url(/images/headerfooter/ico_searchMobile.png) center center no-repeat; text-indent:-999px;}
header #topNav li.dropdown ul{display:none; width:100%;padding:0; background:#333; position:static;}
header #topNav li.dropdown li{float:none; padding:0px; margin:0px;}
header #topNav li.dropdown li a{display:block; padding:10px 10px 10px 20px; margin:0; background:transparent; border-right:none;}
header #topNav li.dropdown li:last-child a{background:transparent; padding-bottom:10px;}
header #topNav li.dropdown li ul{border:none!important;}
header #mainNav{position:static;}
header #mainNav ul{padding:10px 0 0 0; margin:0px;}
header #mainNav ul ul{display:none; background:#333; border:none; position:static; padding:0; margin:0px; box-shadow:#666 0px 0px 0px; -moz-border-radius:0px; border-radius:0px;}
header #mainNav ul li{float:none;padding:0px; margin:0px; width:100%; background:none;}
header #mainNav ul li a{font-size:22px; color:#8a8c8f; text-align:left; padding:10px 10px 10px 20px;}
header #mainNav>ul>li:last-child a{background:none;}
header #mainNav ul ul ul{display:none; background:#000;}
header #mainNav ul ul li{border:none!important;}
header #mainNav ul ul ul li a{font-size:22px; color:#8a8c8f; top:0px;}
#footerNav ul{margin:0!important;}
#footerNav ul ul{display:none;}
#footerNav>ul>li{float:none; margin:0 0 0 0; width:100%; }
#footerNav li li {border-bottom:none; border-top:#999 1px solid;}
#footerNav li a{font-size:18px; display:block; padding:20px; margin:0px;}
#footerNav li li a{font-size:14px;}
#footerNav li li li a{font-size:14px;}
}
@media only screen and (max-width: 768px) {
#mozyLogo{position:absolute; top:15px; left:10px;}
#mainNav{width:100%;}
#mainNav>ul{width:100%; margin:0px; padding:0;}
#mainNav>ul>li{width:25%;}
#mainNav>ul>li>a{padding:12px 0px 8px 0px; width:100%; text-align:center; display:block;}
}
@media only screen and (max-width: 950px) {
.constraint{max-width:950px; width:auto; margin:0 auto; position:relative;}
#topNav{right:8px;}
#footerNav li.two li li{width:auto;}
}
@media only screen and (max-width: 1050px) {
#socialNav ul{position:static; margin:10px auto; padding:0px; height:30px; width:128px; background:none;}
#socialNav li{float:left; margin:0 5px;}
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}