/**
* HTML5 ✰ Boilerplate
*
* reset.css contains a reset, font normalization and some base styles.
*
* Credit is left where credit is due.
* Much inspiration was taken from these projects:
* - yui.yahooapis.com/2.8.1/build/base/base.css
* - camendesign.com/design/
* - praegnanz.de/weblog/htmlcssjs-kickstart
*/
/**
INDEX
1.) Reset
2.) Primary
- Container
- Header
- Main
- Footer
3.) Global
- Fancybox Overrides
- Lists
- Products
- Reviews
- Widgets
- Login Modal
- Report Abuse Modal
4.) Page Specific
- Homepage
- Categories
- Form
- About
- Product Detail
- Write Review
5.) Non-semantic helper classes
6.) Media Queries
7.) Print
*/
/**
# 1.) RESET
* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
* v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
* html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
/**
* Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
*/
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
/* Normalize monospace sizing:
en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
/**
* Minimal base styles.
*/
/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
/* Remove margins for navigation lists */
.nav ul, .nav li,
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
em { font-style: italic; }
td { vertical-align: top; }
/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre {
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; white-space: pre-wrap; word-wrap: break-word;
padding: 15px;
}
textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; }
/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; margin: 0; padding: 0; }
.ie7 input[type="checkbox"] { vertical-align: baseline; height: 13px; width: 13px; }
.ie6 input { vertical-align: text-bottom; height: 13px; width: 13px; }
/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
/* placeholder */
.placeholder { color: #5B5B5B; font-style: italic; } /*fallback*/
::-webkit-input-placeholder { color: #5B5B5B; font-style: italic; } /*webkit*/
:-moz-placeholder { color: #5B5B5B; font-style: italic; } /*ff*/
/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #419ba5; }
/* Make buttons play nice in IE:
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button { width: auto; overflow: visible; }
/* Bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
/**
* You might tweak these..
*/
body {
background-color: #fff;
color: #404040;
font-size: 12;
font-family: "Whitney SSm A", "Whitney SSm B", sans-serif;
}
/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: 1; }
h1 {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
color: #17498a;
font-style: normal;
font-weight: 600;
font-size: 30px;
line-height: 30px;
letter-spacing: 0;
margin: 0 0 10px 0;
}
h2.orange { font-size: 18px; font-weight: normal; margin: 3px 0 23px; }
h2 {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
color: #3A4757;
line-height: 28px;
letter-spacing: 0;
font-style: normal;
margin: 0 0 33px 0;
font-size: 14px;
line-height: 18px;
margin: 0;
font-weight: 600;
}
h3 { }
h4 { }
h5 { }
h6 { }
a, a:active, a:visited { text-decoration: none; color: #0078C1; }
a:hover { text-decoration: underline; color: #2a6496; }
a:focus { outline: none; }
strong { color: #000; }
p {
margin-bottom: 18px;
font-family: 'Whitney SSm A','Whitney SSm B',sans-serif;
}
input[type="text"],
input[type="password"],
select,
textarea {
background: #fff;
border: 1px solid #ACACAC;
color: #5b5b5b;
padding: 12px;
font-size: 12px;
}
select { padding: 4px 3px 3px; cursor: pointer; }
textarea { resize: none; }
/**
* 2.) Primary styles
*
* Author: The Atom Group
* www.theatomgroup.com
*/
/*-------------- CONTAINER --------------*/
#container {
width: 960px;
margin: 0 auto;
padding-bottom: 59px;
}
/*-------------- HEADER --------------*/
#header { position: relative; height: 120px; }
/*---- Logo ----*/
#logo {
position: absolute;
left: 27px; top: 22px;
height: 53px; width: 203px;
}
#logo a {
display: block;
text-indent: -9999px;
height: 53px; width: 203px;
background: url("../img/master/logo.png");
}
/*---- Utility Nav ----*/
#utility-nav {
position: absolute;
right: 20px; top: 5px;
height: 31px; width: 770px;
font-size: 11px;
}
/*---- Main Nav ----*/
#main-nav {
position: absolute;
left: 0; bottom: 0;
height: 31px;
width: 960px;
background: url("../img/master/main-nav-bg.png");
}
#main-nav ul { float: left; }
#main-nav li { float: left; }
#main-nav a { display: block; background: url("../img/master/main-nav.png"); height: 31px; text-indent: -9999px; }
#main-nav .home { background-position: 0px 0px; width: 90px; }
#main-nav .apps { background-position: -90px 0px; width: 186px; }
#main-nav .services { background-position: -276px 0px; width: 105px; }
#main-nav .listed { background-position: -381px 0px; width: 120px; }
#main-nav .feedback { background-position: -501px 0px; width: 115px; }
#main-nav .about { background-position: -616px 0px; width: 92px; }
#main-nav .home:hover, #main-nav .home.active { background-position: 0px -31px; width: 90px; }
#main-nav .apps:hover, #main-nav .apps.active { background-position: -90px -31px; width: 186px; }
#main-nav .services:hover, #main-nav .services.active { background-position: -276px -31px; width: 105px; }
#main-nav .listed:hover, #main-nav .listed.active { background-position: -381px -31px; width: 120px; }
#main-nav .feedback:hover, #main-nav .feedback.active { background-position: -501px -31px; width: 115px; }
#main-nav .about:hover, #main-nav .about.active { background-position: -616px -31px; width: 92px; }
/*-------------- MAIN --------------*/
#main { min-height: 400px; margin-top: 30px; }
#left-col { float: left; margin-right: 31px; width: 668px; }
#right-col { float: left; width: 221px; }
#main li:before {
content: none;
}
/*-------------- FOOTER -------------*/
#footer {
background: #ebebeb;
padding: 33px 40px 0;
text-align: center;
position: relative;
}
/*---- Footer Featured ----*/
#footer-featured li { float: left; width: 196px; padding: 0 12px; }
#footer-featured h2 { color: #000; margin-bottom: 6px; font-size: 13px; }
#footer-featured p { margin-bottom: 30px; }
/*---- Footer Nav ----*/
#footer-nav { height: 73px; background: url("../img/global/dots-horz.png") repeat-x left top; font-size: 11px; }
#footer-nav ul { float: left; width: 100%; padding-top: 30px; }
#footer-nav li { float: left; }
#footer-nav li.no-spam { float: right; }
#footer-nav li.no-spam a {
background: url("../img/master/cancel-icon.png") no-repeat right top;
padding-right: 20px;
height: 15px;
line-height: 16px;
text-transform: uppercase;
font-weight: bold;
margin-right: 0;
}
#footer-nav li:first-child a { margin-left: 0; }
#footer-nav a { display: inline-block; margin: 0 12px; color: #818181; }
#footer-nav a:hover { color: #3E69BD; }
/*---- Copyright ----*/
#copyright {
position: absolute;
bottom: -44px; left: 0;
font-size: 11px;
width: 960px;
line-height: 1;
text-align: center;
color: #666;
}
/**
* 3.) Global Styles
*
* Author: The Atom Group
* www.theatomgroup.com
*/
span.yellow-arrow { position: relative; top: -1px; font-weight: bold; }
/*-------------- FANCYBOX OVERRIDES --------------*/
.fancybox-close {
height: 35px; width: 86px;
background: url("../img/global/fancy-close.png");
right: 0; top: 0;
z-index: 1007;
}
.fancybox-wrap { padding-top: 35px !important; background: #d1d3d4 !important; }
.fancybox-wrap.fancybox-opened {
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer {
background: #404040;
/* border-radius */
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.fancybox-opened .fancybox-outer {
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
#fancybox-overlay { background-color: rgba(0,0,0,0.5) !important; }
.fancybox-title {
height: 35px;
line-height: 35px;
padding-left: 20px;
top: 0; left: 0; right: auto; bottom: auto;
width: auto !important;
margin: 0;
}
.fancybox-title .child {
margin: 0;
padding: 0;
text-shadow: 0 0 0 #222;
line-height: 35px;
background: none;
color: #404040;
font-size: 14px;
/* border radius */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
/*---- Inline ----*/
.fancybox-wrap.inlineModal .fancybox-outer {
background: #fff;
padding-top: 47px !important;
padding-bottom: 25px !important;
}
.fancybox-wrap.inlineModal { width: 520px !important; }
.fancybox-wrap.inlineModal .fancybox-inner { width: 480px !important; height: 200px !important; }
/*---- Image Gallery ----*/
.fancybox-wrap.gallery { width: 640px !important; height: 640px !important; }
.fancybox-wrap.gallery .fancybox-outer,
.fancybox-wrap.gallery .fancybox-inner {
width: 600px !important;
height: 600px !important;
line-height: 600px !important;
text-align: center;
}
.fancybox-image {
max-width: 600px !important;
max-height: 600px !important;
height: auto;
width: auto;
margin: 0 auto;
vertical-align: middle;
display: inline-block !important;
}
.gallery.fancybox-wrap .fancybox-image { visibility: hidden !important; }
.gallery.fancybox-wrap .fancybox-image.show { visibility: visible !important; }
/*- Thumbnails -*/
#fancybox-thumbs { position: absolute; left: 0; top: 0; bottom: auto; height: 35px; visibility: hidden; }
#fancybox-thumbs ul { height: 24px; padding-top: 11px; padding-left: 22px; position: static; margin: 0 auto; }
#fancybox-thumbs ul li { opacity: 1; padding: 0 3px !important; }
#fancybox-thumbs ul li a {
height: 10px !important;
width: 10px !important;
background: #fff;
text-indent: -9999px;
border: 2px solid #fff;
/* border radius */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
#fancybox-thumbs ul li a:hover { border-color: #969696; }
#fancybox-thumbs ul li.active { border: 0; opacity: 1; }
#fancybox-thumbs ul li.active a { background: #5b5b5b; border-color: #5b5b5b; }
#fancybox-thumbs a img { display: none !important; }
/* Arrows */
.gallery.fancybox-wrap .fancybox-prev,
.gallery.fancybox-wrap .fancybox-next {
visibility: visible;
height: 29px; width: 58px;
padding-top: 6px;
z-index: 1006;
}
.gallery.fancybox-wrap .fancybox-prev { margin-left: 204px; }
.gallery.fancybox-wrap .fancybox-next { margin-right: 204px; }
.gallery.fancybox-wrap .fancybox-prev span,
.gallery.fancybox-wrap .fancybox-next span {
height: 23px; width: 58px;
background: url("../img/global/modal-arrows.png");
margin: 0;
position: static;
display: block;
}
.gallery.fancybox-wrap .fancybox-prev span { background-position: left bottom; float: right; }
.gallery.fancybox-wrap .fancybox-next span { float: left; }
.gallery.fancybox-wrap .fancybox-prev span:hover { background-position: right bottom; }
.gallery.fancybox-wrap .fancybox-next span:hover { background-position: right top; }
/* Text */
.gallery.fancybox-wrap .titleText {
position: absolute;
top: 0; left: 0;
font-weight: bold;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 0 0 0 #222;
line-height: 35px;
background: none;
color: #404040;
font-size: 14px;
/* border radius */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.gallery.fancybox-wrap .fancybox-title {
position: static;
margin: 0 auto;
padding: 0;
height: auto;
display: none;
}
.gallery.fancybox-wrap .fancybox-title strong {
display: block;
color: #fff;
line-height: normal;
margin-bottom: 7px;
font-size: 16px;
white-space: normal;
}
.gallery.fancybox-wrap .fancybox-title .child {
margin: 0;
display: block;
color: #fff;
text-shadow: 0 0 0 #000;
line-height: normal;
font-weight: normal;
white-space: normal;
}
/*-------------- LISTS --------------*/
.yellow-bullet,
.orange-bullet { margin-left: 25px; }
.yellow-bullet li {
background: url("../img/global/yellow-bullet-sm.png") 0 3px no-repeat;
list-style: none;
padding-left: 12px;
}
.orange-bullet { margin-bottom: 15px; }
.orange-bullet li {
background: url("../img/global/orange-bullet.png") 0 1px no-repeat;
list-style: none;
padding-left: 14px;
}
.indented-list ul {
padding-left: 20px;
}
/*-------------- PRODUCTS --------------*/
.products { padding-bottom: 5px; }
.ie7 .products { padding-bottom: 10px; }
/*---- Product ----*/
.product {
font: 14px "Whitney SSm A", "Whitney SSm B", sans-serif;
padding: 21px 210px 19px 140px;
position: relative;
min-height: 70px;
}
.products.services .product {
padding-right: 267px;
min-height: 83px;
}
.product p { margin-bottom: 0; }
.product h2 { margin-bottom: 5px; font-size: 14px; }
.product .image {
position: absolute;
left: 0; top: 1px;
height: 100%; width: 120px;
}
.product .image img {
/*height: 60px; width: 120px; */
position: absolute;
top: 50%; left: 0;
margin-top: -30px;
display: block;
width: 100%;
}
/* Type */
.product .type { position: absolute; top: 28px; right: 122px; width: 60px; }
.new,
.free,
.deal,
.presenter {
display: block;
margin-bottom: 4px;
height: 16px; width: 39px;
text-transform: uppercase;
font-weight: 600;
}
span.new {
color: #f8b21a;
}
span.free {
color: #c2ce25;
}
span.deal {
color: #f25b2e;
}
.serviceLevel {
display: block;
margin-bottom: 4px;
height: 16px; width: 78px;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
}
.serviceLevel.platinum {
color: #d8d8d8;
}
.serviceLevel.gold {
color: #f8b21a;
}
.serviceLevel.silver {
color: #727270;
}
.serviceLevel.accredited {
color: #c2ce25;
}
/* Location */
.product .location {
position: absolute;
top: 18px; right: 100px;
width: 140px;
color: #000;
}
.presenter { width: 78px; background-position: 0 -155px; }
/* Rating */
.product .rating {
position: absolute;
top: 38px; right: 0;
width: 81px;
}
.rating { font-size: 11px; }
.rating .stars {
height: 16px; width: 80px;
text-indent: -9999px;
display: block;
margin-bottom: 1px;
background: url("../img/global/stars.png");
}
.rating .stars.zero { background-position: 0px 0px; }
.rating .stars.one { background-position: 0px -16px; }
.rating .stars.two { background-position: 0px -32px; }
.rating .stars.three { background-position: 0px -48px; }
.rating .stars.four { background-position: 0px -64px; }
.rating .stars.five { background-position: 0px -80px; }
/*---- Top Products ----*/
.top-products {
padding-top: 20px;
border-top: 1px solid #d4d4d4;
margin-top: 45px;
}
.top-products .products { background: none; padding: 25px 0 0; }
.top-products h3 {
font-size: 14px;
color: #1a70a8;
margin: 0;
}
.top-products .products .product:first-child { margin: 0; }
.top-products .product {
padding: 0;
background: none;
float: left;
width: 170px;
margin-left: 70px;
}
.top-products .product .image {
position: static;
height: 65px; width: 170px;
margin-bottom: 11px;
display: block;
}
.top-products .product .image img {
height: 60px; width: 120px;
position: static;
margin: 0;
border: 1px solid #ccc;
}
.top-products .product h2 { font-size: 13px; margin-bottom: 4px; }
.top-products .product p { font-size: 11px; color: #848484; margin-bottom: 5px; }
.top-products .rating { position: static; }
/*---- Header ----*/
.products-header { padding: 12px 0; margin-top: 10px; height: 29px; line-height: 29px; }
.showing-results { float: left; }
.showing-results strong,
.pager strong { color: #404040; }
.sort-by { float: right; font-size: 14px; position: relative; top: -5px; }
.sort-by label { display: inline-block; margin-right: 5px; }
.sort-by select {
height: 29px;
line-height: 29px;
padding: 4px;
font-family: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Arial, sans-serif;
color: #5b5b5b;
font-size: 13px;
border-radius: 4px;
}
/*---- Footer ----*/
.products-footer { padding: 11px 0 5px; margin-bottom: 28px; }
.pager { float: right; }
.pager li:first-child { border: 0; padding-left: 0; }
.pager li { float: left; padding: 0 9px; font-size: 14px; border-left: 1px solid; line-height: 13px; }
.ie7 pager li { line-height: normal; }
.pager a { font-weight: bold; }
.submit-feedback { font-size: 14px; color: #3A4757; font-weight: bold; }
.submit-feedback a { font-weight: normal; }
/*-------------- REVIEWS --------------*/
#reviews h3 { font-size: 14px; color: #1a70ad; margin-bottom: 11px; }
#reviews h3 a { font-weight: normal; }
#reviews h5 { display: inline-block; margin-bottom: 0; }
#reviews .see-all-reviews { font-weight: bold; font-size: 14px; }
#reviews .first-to-write { font-size: 14px; margin: 42px 0; }
/*---- Review ----*/
#reviews .review { padding: 10px 0 30px; }
#reviews .helpful-people { margin-bottom: 10px; }
#reviews .main-copy { margin-bottom: -5px; }
/* rating */
#reviews .review .rating {
font-size: 13px;
position: relative;
padding-left: 95px;
margin-bottom: 7px;
}
#reviews .review .stars { position: absolute; left: 0; top: 0; }
/* actions */
#reviews .actions { margin-top: 20px; }
#reviews .actions .helpful { float: left; width: 340px; color: #717171; }
#reviews .actions .helpful p { float: left; height: 23px; line-height: 23px; font-size: 12px; margin-bottom: 0; }
#reviews .actions .helpful a {
text-indent: -9999px;
display: block;
float: left;
height: 23px; width: 42px;
background: url("../img/global/review-buttons.png");
margin-left: 5px;
}
#reviews .actions .helpful a.yes { background-position: -186px -2px; }
#reviews .actions .helpful a.yes:hover { background-position: -186px -25px; }
#reviews .actions .helpful a.no { background-position: -233px -2px; }
#reviews .actions .helpful a.no:hover { background-position: -233px -25px; }
#reviews .actions ul { float: left; list-style: none; margin: 4px 0 0; }
#reviews .actions ul li:first-child { padding-left: 0; border: 0; }
#reviews .actions li { float: left; border-left: 1px solid #717171; padding: 0 10px; }
#reviews .actions li a { display: block; }
#reviews .actions li a.comments { padding-left: 24px; background: url("../img/global/comment-icon.png") no-repeat left top; }
/*---- Customer Reviews ----*/
#listing #reviews {
margin-top: 14px;
padding-top: 1px;
}
#reviews .customer-reviews {
position: relative;
height: 157px;
}
#listing #reviews .customer-reviews { margin-bottom: 24px; padding-bottom: 2px; }
#reviews .customer-reviews .inner {
padding-bottom: 1px;
height: 157px;
border-top: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
#reviews .customer-reviews h2 {
color: #1a70ad;
font-size: 16px;
position: absolute;
top: 13px; left: 25px;
}
/* chart */
#reviews .customer-reviews .chart {
position: absolute;
top: 40px; left: 22px;
width: 190px;
font-size: 10px;
}
#reviews .customer-reviews .chart table,
#reviews .customer-reviews .chart td { border-collapse: separate; border-spacing: 4px; min-width: 35px; }
#reviews .customer-reviews .chart .bar {
width: 100px;
background: #e6e6e6;
height: 13px;
}
#reviews .customer-reviews .chart .bar .bar-filled {
display: block;
background: #efc573;
height: 15px;
line-height: 13px;
text-indent: -9999px;
}
#reviews .customer-reviews .chart .number { padding-left: 2px; }
#reviews .customer-reviews .chart a { text-decoration: underline; display: inline-block; margin-right: 2px; }
#reviews .customer-reviews .chart a:hover { text-decoration: none; }
/* rating */
#reviews .customer-reviews .rating { position: absolute; top: 55px; left: 217px; width: 230px; }
#reviews .customer-reviews .rating .stars { float: left; margin: -2px 8px 0 0; }
#reviews .customer-reviews .rating strong { display: block; color: #1a70ad; font-size: 12px; margin-bottom: 7px; }
/* share */
#reviews .customer-reviews .share {
position: absolute;
top: 55px; right: 35px;
width: 172px;
text-align: center;
font-size: 12px;
}
#all-reviews .customer-reviews .inner {
height: 139px;
}
#all-reviews .customer-reviews .chart { left: 22px; top: 16px; }
#all-reviews .customer-reviews .rating,
#all-reviews .customer-reviews .share { top: 45px; }
/* Reviews Filter */
#all-reviews .reviews-filter { height: 26px; padding-top: 10px; }
#all-reviews .reviews-filter-header { margin-bottom: 10px; }
#all-reviews .reviews-filter .pager { float: left; }
#all-reviews .reviews-filter .order { float: right; }
#all-reviews .reviews-filter .order li:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
#all-reviews .reviews-filter .order li { border-left: 1px solid #717171; float: left; padding-left: 10px; margin-left: 10px; }
#all-reviews .reviews-filter .order li .active { font-weight: bold; cursor: default; color: #404040; text-decoration: none !important; }
/*---- Comments ----*/
div.comments { margin-top: 12px; display: none; }
.comments .comment,
.comments .load-more { margin-top: 9px; }
.comments div { background: #e9e9e9; padding: 12px 16px; }
.comments .comment.new-comment { background: #fff7c2; }
/* add comments */
.comments .add-comment { position: relative; padding-left: 147px; padding-right: 124px; }
.comments .add-comment textarea { width: 382px; height: 53px; }
.comments .add-comment label {
font-size: 14px;
font-weight: bold;
color: #0c8390;
display: block;
position: absolute;
left: 16px; top: 12px;
}
.comments .add-comment label span { display: block; font-size: 13px; font-weight: normal; position: static; color: #404040; }
.comments .add-comment label .characters { display: inline; }
.comments .add-comment input[type="button"], .comments .add-comment input[type="submit"] {
position: absolute;
right: 19px; bottom: 14px;
height: 31px; width: 83px;
text-indent: -9999px;
display: block;
border: 0;
background: url("../img/global/review-buttons.png") right top;
font-size: 0;
}
.comments .add-comment input[type="button"]:hover, .comments .add-comment input[type="submit"]:hover { background-position: right -31px; }
/* load more */
.comments .load-more { cursor: pointer; }
.comments .load-more span {
display: block;
height: 21px; line-height: 21px;
padding-left: 50px;
background: url("../img/global/review-buttons.png") -186px -74px no-repeat;
}
.comments .load-more:hover span { background-position: -186px -97px; }
/*-------------- WIDGETS --------------*/
.widget-link { font-size: 12px; }
/*---- Video ----*/
.widget-video {
margin-bottom: 6px;
border: 1px solid #acacac;
background: #d1d3d4;
padding: 0 10px 7px;
color: #000;
font-size: 13px;
/* border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* box shadow */
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.widget-video .thumb {
margin: 0 0 7px;
left: -10px;
height: 137px; width: 219px;
display: block;
position: relative;
}
.widget-video .thumb img {
height: 137px; width: 219px;
display: block;
/* border radius */
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.widget-video .play {
position: absolute;
top: 50%; left: 50%;
height: 33px; width: 50px;
margin: -12px 0 0 -25px;
text-indent: -9999px;
display: block;
background: url("../img/global/play-button.png");
}
.widget-video .thumb:hover .play { background-position: 0 bottom; }
.widget-video-large .play {
background: url("../img/global/play-button-large.png");
height: 46px; width: 70px;
margin: -23px 0 0 -35px;
}
/*---- Connections ----*/
.connections { margin-bottom: 30px; }
.connections p { margin-bottom: 26px; font-size: 14px;}
.connections input[type="text"] {
width: 148px;
height: 16px;
border-radius: 3px;
font: 14px "Whitney SSm A", "Whitney SSm B", sans-serif;
}
.connections input[type="button"] {
height: 42px;
font: 14px "Whitney SSm A", "Whitney SSm B", sans-serif;
background: #5babd5;
padding: 12px;
margin: 0;
border-radius: 3px;
display: inline-block;
border: 0;
color: #fff;
}
.connections input[type="button"]:hover { background-position: left bottom; }
/*---- Rounded Corners ----*/
.ie8 .rounded-corners,
.ie7 .rounded-corners { border: 1px solid #e9e9e9; }
.rounded-corners {
display: block;
margin-top: 25px;
/* box shadow */
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.38);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.38);
box-shadow: 1px 1px 3px rgba(0,0,0,0.38);
/* border radius */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.rounded-corners img {
display: block;
width: 219px; height: auto;
margin: 0 auto;
/* border radius */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*---- Search ----*/
.widget-search {
border: 1px solid #ccc;
background: #F6F6F6;
padding: 14px 16px;
border-radius: 5px;
}
.widget-search input[type="text"] {
margin-bottom: 5px;
display: block;
width: 161px;
}
.widget-search .top {
margin-bottom: 15px;
padding-bottom: 15px;
background: url("../img/global/dots-horz-2px-black.png") repeat-x left bottom;
}
.widget-search select {
margin-bottom: 16px;
width: 179px;
color: #5b5b5b;
height: 39px;
line-height: 39px;
padding: 7px;
border-radius: 4px
}
.widget-search .near { display: block; margin: -5px 0 5px; }
.widget-search input.zip { width: 48px; margin-right: 2px; display: inline-block; vertical-align: top; font-style: normal; }
.widget-search .miles { width: 107px; display: inline-block; vertical-align: top; }
/*---- Gray ----*/
.gray {
background: #e9e9e9;
padding: 23px 14px;
}
.gray .type li {
background: url("../img/global/type-icons.png") no-repeat -1px 0;
padding-left: 55px;
margin-bottom: 9px;
min-height: 18px;
text-indent: 0;
height: auto; width: auto;
}
.gray .type li.free { background-position: 0px -45px; }
.gray .type li.deal { background-position: 0px -98px; }
.gray .type li.presenter {
padding: 24px 0 0;
margin-bottom: 0;
background-position: 0 -155px;
}
/*---- Gray Gradient ----*/
.gray-gradient {
border: 1px solid #d60f18;
background: #fff;
padding: 2px;
margin-bottom: 20px;
/* border radius */
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.gray-gradient .inner {
padding: 12px 17px 20px;
background: #e9e9e9;
/* border radius */
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
/* gradient */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5ZTllOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e9e9e9 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9e9), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e9e9e9 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e9e9e9 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e9e9e9 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, #e9e9e9 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
.gray-gradient h2 {
font-size: 16px;
font-weight: bold;
color: #3A4757;
margin-bottom: 10px;
}
.gray-gradient p { margin: 0; }
.gray-gradient.with-image { text-align: center; }
.gray-gradient.with-image h2 { margin: 0; font-size: 14px; }
.gray-gradient.with-image .image { margin-bottom: 5px; display: inline-block; }
.gray-gradient.with-image .image img { height: 58px; width: 118px; display: block; border: 1px solid #d1d3d4; }
.gray-gradient .box-deal-header {
background:url(../img/global/header-deal.png) right top no-repeat #fff;
height:32px;
-moz-border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
}
.gray-gradient .box-deal-header h2 {
padding: 7px 15px 0;
color:#fff;
}
/*---- Request Info ----*/
.request-info {
border: 5px solid #0078c1;
padding: 0 17px 0 14px;
/* border radius */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.ie7 .request-info {
border-top: 2px;
border-bottom: 2px;
}
.request-info.expand {
/* border radius */
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
}
.request-info h2 {
font-weight: 100;
color: #fff;
font-size: 16px;
height: 44px;
line-height: 44px;
margin: -4px -21px -4px -18px;
text-align: center;
position: relative;
cursor: pointer;
background: #0078c1;
/* border radius */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.ie7 .request-info h2 {
position: relative;
/* top: -4px;*/
left: -18px;
margin: 0 0 -9px;
width: 202px;
}
.request-info.expand h2 {
background: #0078c1;
margin-bottom: 0;
/* border radius */
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
}
.request-info h2 .icon {
position: absolute;
top: 13px; right: 6px;
border: 2px solid #fff;
height: 16px; width: 16px;
line-height: 16px;
text-align: center;
background: #0078c1;
display: block;
font-weight: normal;
font-size: 20px;
}
.request-info h2 .icon .icon-inner { position: relative; top: -2px; }
.request-info.expand h2 .icon .icon-inner { top: -2px; }
.request-info ul { display: none; padding: 9px 0 19px; }
.request-info li {
margin-bottom: 10px;
padding-left: 0;
}
.request-info input[type="text"],
.request-info textarea,
.request-info select { display: block; width: 162px; }
.request-info select { width: 180px; }
.request-info textarea { height: 59px; }
.request-info label { font-weight: bold; display: inline-block; margin-bottom: 3px; }
.request-info input.send { margin: 0 auto; }
.request-info .captcha { text-align: center; }
/*---- Recommended Apps ----*/
.recommended-apps {
padding: 0 7px 8px;
text-align: center;
margin-top: 50px;
margin-bottom: 22px;
border: solid 1px #ccc;
border-radius: 6px;
}
.ie8 .recommended-apps,
.ie7 .recommended-apps { border: 1px solid #e9e9e9; }
.ie7 .recommended-apps { filter: none; background: url("../img/home/recommended-apps-bg.png") repeat-x left bottom #fafafa; }
.ie7 .recommended-apps h2 { position: relative; left: -7px; width: 220px; }
.recommended-apps h2 {
font: 600 14px "Whitney SSm A", "Whitney SSm B", sans-serif;
padding: 15px;
height: 28px;
line-height: 28px;
margin: 0 -7px 10px;
}
.recommended-apps a { font-weight: 600; }
.recommended-apps p { margin: 5px 0 0; font-size: 11px; }
.recommended-apps img {
border: 1px solid #e9e9e9;
display: block;
margin: 0 auto 12px;
/*width: 168px;*/
height: auto;
}
.recommended-apps .slides { height: 190px; overflow: hidden; }
.recommended-apps .slide { background: transparent !important; }
.recommended-apps .cycle-nav { display: inline-block; margin: 9px auto 0; }
.recommended-apps .cycle-nav a {
display: block;
height: 13px; width: 13px;
background: #aaa;
text-indent: -9999px;
float: left;
margin: 0 2px;
border-radius: 50%;
}
.recommended-apps .cycle-nav a:hover { border-color: #ccc; }
.recommended-apps .cycle-nav a.activeSlide { background: #eee; }
input[type="submit"].login:hover {
background-position: 0 bottom;
}
input[type="submit"].login {
text-indent: -9999px;
font-size: 0;
display: block;
border: 0;
background: url("../img/global/login-btn.png");
height: 34px;
width: 95px;
}
.error { color: red; }
/*-------------- LOGIN MODAL --------------*/
#login-modal ul { padding-left: 60px; }
#login-modal li {
display: block;
padding-left: 80px;
position: relative;
margin-bottom: 11px;
}
#login-modal label {
font-weight: bold;
position: absolute;
left: 0; top: 0;
padding-right: 10px;
width: 70px;
display: block;
text-align: center;
height: 26px;
line-height: 26px;
}
#login-modal input[type="text"],
#login-modal input[type="password"] { width: 273px; }
#login-modal input[type="submit"] {
text-indent: -9999px;
font-size: 0;
display: block;
border: 0;
background: url("../img/global/login-btn.png");
height: 34px; width: 95px;
}
#login-modal input[type="submit"]:hover { background-position: 0 bottom; }
/*-------------- REPORT ABUSE --------------*/
#report-abuse .report,
#report-abuse .cancel {
background: url("../img/global/abuse-buttons.png");
display: block;
height: 34px; width: 86px;
text-indent: -9999px;
float: left;
margin-right: 14px;
}
#report-abuse .report:hover { background-position: left bottom; }
#report-abuse .cancel { background-position: right top; }
#report-abuse .cancel:hover { background-position: right bottom; }
/**
* 4.) Page Specific
*
* Author: The Atom Group
* www.theatomgroup.com
*/
/*-------------- HOMEPAGE --------------*/
.container {
width: 960px;
margin: 0 auto;
}
.intro-home {
background: #97C9E4;
border-bottom: solid 1px #B7B7B7;
}
.intro-home .container {
padding: 50px;
width: 860px;
}
.intro-home hgroup {
text-align: left;
float: left;
width: 450px;
}
.intro-home .search {
float: right;
}
.intro-home h1 {
font-size: 30px;
font-weight: 600;
line-height: normal;
margin-bottom: 6px;
}
.intro-home h2 {
font-size: 24px;
color: #3A4757;
font-weight: 300;
margin-bottom: 26px;
line-height: 28px;
}
.intro-home .search h2 {
font-weight: 600;
font-size: 16px;
color: #444;
margin-bottom: 0;
}
.intro-home .search select {
margin: 5px 0 0 5px;
}
.intro-home .search input[type="text"] {
padding: 15px;
margin: 10px 0;
width: 200px;
border-radius: 3px;
}
.intro-home .search input[type="button"] {
background: url('../img/home/magnifying-glass.png') no-repeat;
width: 17px; height: 17px;
text-indent: -9999px;
font-size: 0;
display: inline-block;
border: 0;
position: absolute;
top: 25px;
right: 15px;
}
.intro-home .search-marketplace {
display: block;
/* overflow: hidden; */
}
.intro-home .search-area {
float: right;
position: relative;
display: inline-block;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
/*---- Main ----*/
#home {
margin-top: -30px; /* Move contents up to against hero area */
}
#home #left-col { width: 610px; padding: 15px 0 0 50px; }
#home #right-col { padding: 15px 48px 0 0; }
/* Tabs */
#home #left-col .view-all {
font: 600 14px "Whitney SSm A", "Whitney SSm B", sans-serif;
height: 34px;
line-height: 34px;
text-align: right;
}
#home #left-col .tabs { margin-top: -63px; }
#home #left-col .tabs li { float: left; margin-right: 7px; border: solid 1px #B7B7B7; background: #fff; }
#home #left-col .tabs a {
font: 14px "Whitney SSm A", "Whitney SSm B", sans-serif;
display: block;
padding: 15px;
background: #E7E8EB;
color: #0A52A2;
text-align: center;
}
#home #left-col .tabs li.ui-state-active {
border-bottom: 0;
padding-bottom: 1px;
}
#home #left-col .tabs li.ui-state-active a {
background: #fff;
font-weight: bold;
color: #4F565C;
cursor: default;
}
#home #left-col .tabs a:hover { color: #000; text-decoration: none; }
/* Products Filter */
#home #left-col .product-filter {
font-weight: bold;
font-size: 15px;
margin: 20px 0;
padding: 15px 5px;
border-bottom: solid 1px #eee;
}
#home #left-col .product-filter li { padding: 0 20px 0 0; float: left; font: 14px "Whitney SSm A", "Whitney SSm B", sans-serif; }
#home #left-col .product-filter li.active a { cursor: default; }
#home #left-col .product-filter li.active a { color: #4F565C; text-decoration: none; }
#home #left-col .product-filter a:hover { text-decoration: none; }
/*-------------- CATEGORIES --------------*/
#categories { position: relative; }
#categories h2.orange { margin-bottom: 0; }
#categories h3 { color: #5b5b5b; font-size: 18px; margin-bottom: 10px; }
#categories li { margin-bottom: 5px; }
#categories .col { float: left; width: 210px; padding-right: 20px; margin-top: 40px; }
#categories .col.four-col { width: auto; }
#categories .col.two-col { width: 440px; }
#categories .col.two-col ul,
#categories .col.four-col ul { float: left; width: 210px; padding-right: 10px; }
#categories .col.four-col ul { width: 215px;
}
#categories .search-apps,
#categories .search-services {
position: absolute;
top: 10px; right: 0;
background: url("../img/global/categories-btns.png");
display: block;
height: 34px; width: 123px;
text-indent: -9999px;
}
#categories .search-services { background-position: -145px top; width: 148px; }
#categories .search-apps:hover { background-position: left bottom; }
#categories .search-services:hover { background-position: -145px bottom; }
/*-------------- FORM --------------*/
#form { margin: 0 auto; width: 599px; }
#form h1 {margin-bottom: 25px; }
#form .form-wrap {
border: 5px solid #d3d3d3;
padding: 21px 106px 21px 0;
margin-top: 27px;
}
#form .form-wrap li {
display: block;
padding-left: 176px;
position: relative;
margin-bottom: 11px;
}
#form .form-wrap li.checkbox { margin-bottom: 20px; }
label.optional { font-weight: normal !important; }
#form .form-wrap label {
position: absolute;
top: 0; left: 0;
width: 165px;
padding-right: 12px;
text-align: right;
font-weight: bold;
display: block;
height: 30px;
line-height: 30px;
}
#form .form-wrap input[type="checkbox"] ~ label {
position: static;
display: inline-block;
height: auto; width: auto;
line-height: normal;
font-weight: normal;
text-align: left;
padding: 0;
margin: 6px 0 0 7px;
}
#form .form-wrap input[type="checkbox"] { margin-top: 6px; }
#form .form-wrap input[type="text"] { width: 290px; padding: 7px 8px 6px; }
#form .form-wrap input[type="password"] { width: 290px; padding: 7px 8px 6px; }
#form .form-wrap input.zip { width: 160px; }
#form .form-wrap textarea { width: 290px; height: 54px; }
#form .form-wrap select { width: 178px; }
.send {
display: block;
height: 34px; width: 90px;
text-indent: -9999px;
background: url("../img/global/send-btn.png");
border: 0;
}
.send:hover { background-position: 0 bottom; }
/*-------------- ABOUT --------------*/
#about h1 {
display: block;
}
#about .intro { padding: 13px 0 20px; }
#about .intro p { padding-left: 39px; width: 310px; font-size: 14px; line-height: 20px; }
/* Sections */
#about h2 { font-size: 20px; color: #1a70ad; margin-bottom: 10px; }
#about h3 {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
font-size: 20px;
font-weight: 200;
color: #1a70ad;
margin-bottom: 10px;
}
#about .info div { margin: 20px 0; }
#about .section .cta {
display: block;
margin-top: 18px;
}
#about .info {
padding-bottom: 35px;
border-bottom: 1px solid #d4d4d4;
}
#about .quotes {
padding-top: 30px;
}
#about .quotes .col {
width: 50%;
float: left;
}
#about .quote_left {
width:400px;
margin:20px 20px 0 0;
float:left;
}
#about .quote_right {
width:400px;
margin:20px 20px 0px;
float:left;
}
#about .quote_left h5, .quote_right h5 {
font-size:15px;
margin:0 0 10px;
color:#3A4757;
}
#about .quote_text {
font-family: 'Whitney SSm A', 'Whitney SSm B', sans-serif;
font-size: 13px;
font-style: italic;
background: #e8e8e8;
border-color: #e8e8e8;
padding: 20px;
line-height: 20px;
position: relative;
}
#about .quote_text:after {
content: '';
position: absolute;
top: 100%;
left: 40px;
border-top: 20px solid;
border-top-color: inherit;
border-right: 20px solid transparent;
}
#about .quote_name {
text-align:left;
padding-top: 15px;
padding-left: 20px;
}
/* Buttons */
#about .search-apps,
#about .search-services,
#about .apply-now {
background: url("../img/global/categories-btns.png");
display: block;
height: 34px;
text-indent: -9999px;
position: absolute;
left: 0; bottom: 0;
}
#about .search-apps { width: 123px; }
#about .search-services { width: 148px; background-position: -145px 0; }
#about .apply-now { width: 116px; background-position: -314px 0; }
#about .search-apps:hover { background-position: 0 bottom; }
#about .search-services:hover { width: 148px; background-position: -145px bottom; }
#about .apply-now:hover { width: 116px; background-position: -314px bottom; }
/*-------------- PRODUCT DETAIL --------------*/
#listing .back { margin-top: -23px; }
#listing #right-col { margin-top: 11px; }
.product-detail { padding-top: 13px; }
/*---- Left ----*/
.product-detail .left { float: left; width: 160px; margin-right: 30px; }
/* image */
.product-detail .left .image {
display: block;
height: 160px; width: 160px;
}
.left .image img {
width: 100%;
}
/* type */
.product-detail .left { text-align: center; margin-top: 7px; }
.product-detail .left .inner { display: inline-block; margin: 0 auto; }
.product-detail .left .inner span { height: auto; width: auto;}
.product-detail .left .presenter { margin: 0 auto !important; }
.product-detail .left span:first-child { margin-left: 0; }
.product-detail .left .new,
.product-detail .left .free,
.product-detail .left .deal { float: none; margin-left: 4px; }
/* rating */
.product-detail .rating { text-align: center; margin-top: 14px; }
.product-detail .rating .stars { margin-left: auto; margin-right: auto; }
/* actions */
.product-detail .actions { margin-top: 17px; }
.product-detail .actions a:first-child { margin-top: 0; }
.product-detail .actions a {
display: block;
text-indent: -9999px;
height: 61px; width: 160px;
background: url("../img/global/actions.png");
margin-top: 9px;
}
.product-detail .actions a.testimonial:hover { background-position: right top; }
.product-detail .actions a.portfolio { background-position: 0 -61px; }
.product-detail .actions a.portfolio:hover { background-position: right -61px; }
.product-detail .actions a.demo { background-position: 0 -122px; }
.product-detail .actions a.demo:hover { background-position: right -122px; }
.product-detail .actions a.screenshots { background-position: 0 -183px; }
.product-detail .actions a.screenshots:hover { background-position: right -183px; }
/* map */
.product-detail .map { margin-top: 10px; }
.product-detail .map .map-image {
height: 158px; width: 158px;
display: block;
border: 1px solid #c0c0c0;
margin-bottom: 8px;
}
/* addthis */
.product-detail .addthis { margin-top: 30px; }
/*---- Right ----*/
.product-detail .right { float: left; width: 478px; }
.ie7 .product-detail .right { padding-top: 5px; }
/*.product-detail .right h1 { margin-top: -5px; }*/ /*Removed to fix issue with titles being chopped off in IE.*/
.product-detail .right h2 {
font-style: italic;
font-weight: normal;
margin: 9px 0 20px;
font-size: 14px;
line-height: 17px;
}
.product-detail .right h3 { font-size: 18px; color: #1a70ad; margin: 20px 0 10px; }
.product-detail .right li {
padding-left: 0;
margin-left: 20px;
list-style: initial;
color: #394856;
}
.product-detail .categories {
margin: 0;
list-style: none;
font-size: 12px;
}
.product-detail .categories li {
margin: 0;
padding-left: 0;
list-style: none;
}
.product-detail .categories label { font-weight: bold; }
/* buttons */
.product-detail .visit-website,
.product-detail .get-it-here {
margin-top: 18px;
text-indent: -9999px;
height: 34px;
display: block;
background: url("../img/global/listing-buttons.png");
}
.product-detail .visit-website { width: 152px; }
.product-detail .visit-website:hover { background-position: left bottom; }
.product-detail .get-it-here { width: 132px; background-position: right 0; }
.product-detail .get-it-here:hover { background-position: right bottom; }
/*-------------- WRITE REVIEW --------------*/
#write-review h1 { margin-bottom: 35px; }
#write-review ul { margin: 0; list-style: none; font-size: 14px; }
#write-review li {
position: relative;
margin-bottom: 15px;
padding-left: 164px;
display: block;
}
#write-review label {
font-weight: bold;
width: 142px;
position: absolute;
top: 0; left: 0;
padding-right: 22px;
text-align: right;
display: block;
}
#write-review label span { font-weight: normal; display: block; font-size: 13px; }
#write-review label span .characters { display: inline; }
#write-review .stars { cursor: pointer; }
.ie7 #write-review .rating { margin-top: -14px; }
#write-review .star-value { display: none; }
#write-review input[type="text"],
#write-review textarea { width: 422px; }
#write-review textarea { height: 110px; }
#write-review input[type="submit"] {
text-indent: -9999px;
display: block;
font-size: 0;
background: url("../img/global/submit-btn.png");
height: 34px; width: 110px;
border: 0;
}
#write-review input[type="submit"]:hover { background-position: 0 bottom; }
/*-------------- GET LISTED --------------*/
.eligibility-reqs {
margin-top: .75rem;
}
/*------------- Application --------------*/
.application-page .description-container:last-of-type {
clear: both;
margin-bottom: 30px;
}
.application-page .description-container:before {
content: "";
display: table;
clear: both;
}
.application-page .description-container:after {
content: "";
display: table;
clear: both;
}
.application-page .description-container .span6 {
width: 49%;
float: left;
}
.application-page .description-container .span6 > h2 {
margin-bottom: 10px;
}
.application-page .description-container .span6:first-of-type > h2 {
padding: 0 15px 0 0;
}
.application-page .description-container .span6:last-of-type > h2 {
padding: 0 0 0 15px;
}
.application-page .description-container .span6:first-of-type > p {
padding: 0 15px 0 0;
}
.application-page .description-container .span6:last-of-type > p {
padding: 0 0 0 15px;
}
.application-page .cta-flat-grey {
display: inline-block;
color: #3378c3;
background: #eceeef;
border-radius: 3px;
padding: 10px 15px;
text-decoration: none;
font-size: 14px;
}
/**
* 5.) Non-semantic helper classes: please define your styles before this section.
*/
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none !important; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.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: drupal.org/node/897638 */
.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; }
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after,
#header:before, #header:after,
#main:before, #main:after,
#footer:before, #footer:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after,
#header:after,
#main:after,
#footer:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix,
#header,
#main,
#footer { zoom: 1; }
/**
* 6.) Media queries for responsive design.
*
* These follow after primary styles so they will successfully override.
*/
@media all and (orientation:portrait) {}
@media all and (orientation:landscape) {}
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
/**
* 7.) Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}