/**
* Globals
*/
html {
height: 100%;
}
body {
background: #f1f1f1;
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
min-height: 100%;
position: relative;
padding-bottom: 40px;
}
body #content {
background: #fff;
padding: 15px;
padding-top: 0;
}
body #background-absolute {
position: absolute;
background: #fff;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
font-family: 'Alatsi', sans-serif;
}
a,
button {
transition: 0.25s all;
}
::selection {
background: #fff2a8;
}
::-moz-selection {
background: #fff2a8;
}
.ad-bg {
background-color: transparent;
}
.alert {
border: 0;
font-size: 16px;
}
.well {
border: 0;
box-shadow: none;
}
.ebay-btn img {
margin-top: -3px;
}
.ebay-btn a {
font-size: 20px;
}
.ebay-btn a:hover {
border-bottom:1px solid blue;
}
.ebay-btn a:hover {
text-decoration: none !important;
}
.btn-primary {
background: #585858;
border: 2px solid #585858;
}
.btn-primary:hover,
.btn-primary:focus {
background: #F1F1F1;
border: 2px solid #585858;
color: #444;
}
.btn-secondary {
background: #ef0d0d;
border: 2px solid #ef0d0d;
color: #FFF;
box-shadow: 1px 1px 6px 2px #444;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: #fff;
border: 2px solid #fff;
color: #ef0d0d;
}
input[type="text"],
textarea.form-control {
transition: all 0.25s;
border: 2px solid #ccc;
box-shadow: none;
}
input[type="text"]:focus,
textarea.form-control:focus {
border-color: #585858;
box-shadow: none;
}
label {
font-size: 16px;
}
/**
* Helper classes
*/
a.link-color {
color: #982a2a;
}
a.link-color:hover {
color: #ef0d0d;
}
.btn-wide {
padding: 6px 20px;
}
.no-margin-top {
margin-top: 0 !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.banner-signup-lg {
padding: 20px 30px;
border-left: 15px solid #ef0d0d;
border-right: 15px solid #ef0d0d;
background-color: #585858;
text-decoration: none;
margin: 40px 0px;
}
.banner-signup-lg .app-name img {
display: inline;
height: 50px;
margin: 5px 0px 0px 0px;
}
.banner-signup-lg .description {
display: block;
font-weight: 200;
font-size: 16px;
color: #fff;
margin-top: 10px;
margin-bottom: 5px;
}
.banner-signup-lg .description span {
color: #ef0d0d;
margin-right: 5px;
}
.banner-signup-lg .btn.app-signup {
margin-top: 70px;
}
.banner-signup-lg .screenshot {
border-radius: 4px;
box-shadow: 0 6px 12px #333;
}
/**
* Header
*/
.navbar {
border-radius: 0px;
border: 0px;
margin-bottom: 0px;
background: #131313;
}
.navbar-top {
background-color: #131313; /* Old browsers */
background-image: -moz-linear-gradient(top, #717171 0%, #131313 55%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #717171), color-stop(55%, #131313)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #717171 0%, #131313 55%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #717171 0%, #131313 55%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #717171 0%, #131313 55%); /* IE10+ */
background-image: linear-gradient(to bottom, #717171 0%, #131313 55%); /* W3C */
}
.navbar-header {
float: none;
color: #ffffff;
}
.navbar-header a {
color: #ffffff;
}
.navbar-header .logo-box img.top-logo {
height: 50px;
width: auto;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 2px;
}
.navbar-header .logo-box img.top-wordlogo {
max-height: 31px;
width: auto;
margin-left: -6px;
margin-top: 8px;
margin-bottom: -2px;
}
.navbar-header .logo-box span {
display: block;
white-space: nowrap;
overflow: visible;
width: 180px;
font-weight: 300;
}
.navbar-header .padding-right-40 {
padding-right: 40px;
}
.navbar-header .navbar-toggle {
margin-right: 0;
}
.navbar-header .navbar-toggle .icon-bar {
background: #ffffff;
}
.navbar-header .navbar-toggle:hover {
border: 1px solid #ffffff;
}
/*Searchbox*/
.search-top-box {
background: #585858;
padding-top: 8px;
height: 50px;
}
.search-top-box .input-group {
width: 100%;
}
.search-top-box input[type=text] {
font-size: 18px;
border: 0;
border-radius: 0;
background-color: #fff;
}
.search-top-box .form-inline .input-group .input-group-btn {
width: 1%;
}
.search-top-box .input-group-btn button {
color: #000;
border-radius: 0;
}
.search-top-box .pull-right {
padding-right: 2px;
text-decoration: underline;
}
.search-top-box .search-icon {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: -5%;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgSW1hZ2VSZWFkeTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KKS7NPQAAAWdJREFUKBVVkb8uBFEUxu/cmQnZhBCFVkslsa3SC9AJhWaj2TdYryLotNt4AYlI2NhSiEQkBD1h54/fd+fcmD3JN+fMd/6f65xzHkgWvPcDMALP4ClN07M8z7uNO3yTlu0cznUC7wmsDe/o7/iPr28JU4mLraRhlmWbBK2ANfgjkksrsG3JadA4B+YYQkxVVAC+nvzEjfntiEMSBzGSwzqJnAHaO9MPQoi/VQwrbTQUHMYS+CiK4sXICboCBVBylSTJI9rVdT0nLVFiCeZBHCNeuT22/BIVDOKpdok1yzhx+dhJRyh0cfQW+GSq0Bk7PEVX84MC9KBix/BMcNfmP1E8In8zDd365lSBG3AOLoCKxbf9wj4IqRzbdDj7DgXGrUA9wRv/p0BJscCektQyHqHG7rDTql2vYqcHOCWr0zGQ/ILDYNnnv32btZ1J3gc/1vmqHayO6h6Xj9OIT5nijtFfsZfLstz9AzLCZDPuRB2PAAAAAElFTkSuQmCC');
}
/*Call to action*/
.mywb-actioncall {
width: 135px;
}
.mywb-actioncall img.mywb-logo {
width: 135px;
height: auto;
}
.mywb-actioncall > .mywb-button-container {
width: 135px;
text-align: center;
}
.mywb-button-container > a.btn {
height: 25px;
padding: 0;
width: 48%;
}
.navbar .mywb-actioncall {
margin-top: 3px;
}
/**
* Subnavbar
*/
.navbar.subnav {
min-height: 0;
background: #585858;
}
.navbar.subnav li {
padding: 8px 20px 8px 8px;
list-style: none;
}
.navbar.subnav ul.pull-right li {
padding: 8px 8px 8px 20px;
}
.navbar.subnav .navbar-nav {
padding: 0px;
}
.navbar.subnav li > a {
color: #fff;
}
.navbar.subnav .container {
padding-left: 22px;
}
/* Breadcumb */
.breadcrumb {
background: #fff;
border-bottom: 1px solid #ddd;
border-radius: 0;
padding-left: 0px;
padding-top: 15px;
padding-bottom: 11px;
margin-bottom: 0;
}
.breadcrumb > li + li:before {
color: #aaa;
content: "ยป";
}
.breadcrumb .active a,
.breadcrumb .active a:hover,
.breadcrumb .active a:focus {
text-decoration: none !important;
color: #444 !important;
}
/**
* Footer
*/
.footer {
background: #131313;
position: absolute;
bottom: 0;
width: 100%;
color: #ffffff;
height: 40px;
}
.footer .container {
background: #131313;
}
.footer .container > p {
margin: 10px 0;
}
.footer a,
.footer a:hover {
color: #ffffff;
}
.transparent {
opacity: 0.9;
}
#content.menu-padding {
padding-top: 51px;
}
/**
* Homepage
*/
.link-right {
text-decoration: underline;
}
.blog-stacked {
margin-bottom: 20px;
}
.blog-stacked .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-stacked .text-small {
font-size: 12px;
margin-top: -1px;
color: #aaa;
}
.blog-stacked .date {
color: #000;
}
.blog-stacked .nav > li > a {
padding: 9px 15px;
border-color: #eee #eee #ddd;
color: #982a2a;
}
.blog-stacked .nav > li > a:hover {
color: #ef0d0d;
}
.home h2 > span.listed {
font-size: 14px;
line-height: 1;
font-weight: normal;
float: none;
display: block;
margin-top: 5px;
}
/**
* Block style
*/
.block-container {
clear: both;
display: table;
content: " ";
}
body.brand .family-box .oneline-block-container {
height: 210px;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
body.brand .family-box .oneline-block-container .item-block {
margin-right: 0px;
}
.item-block {
display: block;
float: left;
border: 1px solid #ddd;
margin-right: 4px;
margin-bottom: 4px;
box-shadow: 0 1px 3px #ddd;
width: 48%;
height: auto;
padding: 10px;
text-align: center;
transition: 0.25s all;
}
.item-block:hover {
box-shadow: 0 6px 12px #ddd;
border: 1px solid #982a2a;
text-decoration: none;
}
.item-block .img-container {
height: 120px;
width: 120px;
line-height: 120px;
display: block;
margin: 0 auto;
}
.item-block .img-container img {
max-height: 100%;
max-width: 100%;
}
.item-block hr.seperator {
border-color: #ddd;
width: 87%;
margin: 6px auto;
margin-bottom: 0;
}
.item-block a:hover {
text-decoration: none;
}
.item-block .bottomtext {
display: block;
color: #131313;
padding: 4px;
font-size: 13px;
overflow: hidden;
text-align: center;
}
.family-block .bottomtext,
.caliber-block .bottomtext {
height: 24px;
}
.watch-block .toptext {
display: block;
color: #131313;
font-size: 12px;
}
.watch-block .bottomtext {
height: 58px;
}
.watch-block .toptext strong,
.watch-block .bottomtext strong {
display: block;
}
.watch-block .toptext strong {
font-size: 15px;
}
.watch-block-ad {
padding: 5px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/**
* Thumbnails
*/
.brand-thumbnail,
.watch-thumbnail,
.caliber-thumbnail,
.family-thumbnail {
transition: 0.25s all;
margin-bottom: 20px;
height: auto;
width: 100%;
display: block;
border: 1px solid #ddd;
/*placeholder img*/
}
.brand-thumbnail a:hover,
.watch-thumbnail a:hover,
.caliber-thumbnail a:hover,
.family-thumbnail a:hover {
text-decoration: none;
}
.brand-thumbnail div.bounding-box,
.watch-thumbnail div.bounding-box,
.caliber-thumbnail div.bounding-box,
.family-thumbnail div.bounding-box {
position: relative;
overflow: hidden;
}
.brand-thumbnail img.box-background,
.watch-thumbnail img.box-background,
.caliber-thumbnail img.box-background,
.family-thumbnail img.box-background {
width: 100%;
}
.brand-thumbnail img.box-background-half,
.watch-thumbnail img.box-background-half,
.caliber-thumbnail img.box-background-half,
.family-thumbnail img.box-background-half {
width: 50%;
float: left;
}
.brand-thumbnail span.background-text,
.watch-thumbnail span.background-text,
.caliber-thumbnail span.background-text,
.family-thumbnail span.background-text {
position: absolute;
width: 100%;
color: #982a2a;
padding: 5px 10px;
}
.brand-thumbnail img.thumb,
.watch-thumbnail img.thumb,
.caliber-thumbnail img.thumb,
.family-thumbnail img.thumb {
background: #fff;
position: absolute;
max-height: 100%;
max-width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.brand-thumbnail .bottomtext,
.watch-thumbnail .bottomtext,
.caliber-thumbnail .bottomtext,
.family-thumbnail .bottomtext {
color: #131313;
padding: 4px;
font-size: 12px;
overflow: hidden;
text-align: center;
height: 58px;
}
.brand-thumbnail hr.seperator,
.watch-thumbnail hr.seperator,
.caliber-thumbnail hr.seperator,
.family-thumbnail hr.seperator {
border-color: #ddd;
width: 87%;
margin: 6px auto;
margin-bottom: 0;
}
.caliber-thumbnail .bottomtext,
.family-thumbnail .bottomtext {
height: 24px;
}
a.brand-thumbnail img.thumb {
padding: 4px;
}
.hover-thumbnail:hover {
box-shadow: 0 6px 12px #ddd;
}
/**
* Watches/Calibers by brand page
*/
.overviewcaliber .brand-box,
.overviewwatch .brand-box {
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 15px;
padding: 15px;
padding-top: 10px;
padding-right: 5px;
}
.overviewcaliber .brand-box h3,
.overviewwatch .brand-box h3 {
margin-top: 5px;
}
.overviewcaliber .brand-logo-box,
.overviewwatch .brand-logo-box {
display: block;
height: 51px;
width: 106px;
position: relative;
}
.overviewcaliber .brand-logo,
.overviewwatch .brand-logo {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0px;
right: 0px;
padding: 7px;
}
#brandurl {
display: block;
margin-bottom: 2px;
}
/**
* Brand/Family page
*/
body.brand .brand-box {
padding-top: 10px;
}
body.brand .brand-box .brand-logo-container {
margin-top: 5px;
margin-right: 10px;
float: left;
height: 85px;
width: 170px;
}
body.brand .brand-box .brand-logo-container img {
bottom: auto;
}
body.brand .brand-box h1.title {
margin-top: 0px;
margin-bottom: 0px;
}
body.brand .brand-box #description {
margin-top: 5px;
}
.brand-logo-container {
position: relative;
}
.brand-logo-container img {
position: absolute;
max-height: 100%;
max-width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
body.brand .family-box div.background {
background: #eee;
border: 1px solid #ddd;
padding: 10px;
}
body.brand .family-box span.listed {
display: block;
font-size: 16px;
color: #585858;
font-weight: bold;
text-decoration: underline;
margin-bottom: 10px;
}
body.brand .family-box h2.title {
margin-top: 0;
}
body.brand .family-box .item-block {
background: #fff;
}
body.brand .family-box h2.title a {
display: flex;
justify-content: space-between;
}
body.brand .family-box h2.title a small {
line-height: 0px;
margin-top: 14px;
color: #982a2a;
text-decoration: underline;
white-space: nowrap;
padding-left: 5px;
}
body.brand .family-box h2.title a small:hover {
color: #ef0d0d;
}
body.brand .family-box h2.title a small i {
margin-left: 5px;
}
.brand #address {
padding-bottom: 5px;
}
.brand #brand-logo {
padding-bottom: 5px;
}
#showmore {
display: none;
}
.showless {
display: none;
}
body.family .family-box {
padding-top: 10px;
}
/**
* Blog
*/
body.blog .recent-posts a,
body.blog .tag-cloud a,
body.blog .blog-content a {
color: #982a2a;
}
body.blog .recent-posts a:hover,
body.blog .tag-cloud a:hover,
body.blog .blog-content a:hover {
color: #ef0d0d;
}
body.blog h6 {
font-size: 18px;
font-weight: 300;
}
body.blog .search button {
border-radius: 0;
}
body.blog .search input {
border-radius: 0;
}
body.blog .nav_links > a {
color: #982a2a;
}
body.blog .nav_links > a:hover {
color: #ef0d0d;
}
body.blog .nav_links {
padding-bottom: 15px;
}
.blog-label {
display: inline-block;
background: #ddd;
color: #000 !important;
padding: 6px 8px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 4px;
font-weight: normal;
}
.blog-label:hover {
color: #fff !important;
}
.blog-container .more-link {
color: #982a2a;
}
.blog-container .more-link:hover {
color: #ef0d0d;
}
.blog-container figure {
max-width: 100%;
}
.blog-container .aligncenter {
display: flex;
justify-content: center;
}
.blog-container img {
height: auto;
padding: 4px;
border: 1px solid #ccc;
max-width: 100%;
}
.blog-container img.alignleft {
float: left;
margin-right: 15px;
}
.blog-container img.alignright {
float: right;
margin-left: 15px;
}
.blog-container img.size-full {
max-width: 100%;
}
.blog-container .posted {
margin-bottom: 10px;
color: #444;
font-size: 13px;
}
.text-darker {
color: #444 !important;
}
.h1-small {
font-size: 18px;
font-weight:300;
margin-top:0px;
font-family: inherit;
}
.tag-cloud a {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
display: inline-block;
}
.recent-posts .text-small {
font-size: 12px;
margin-top: -1px;
color: #aaa;
}
.recent-posts .date {
color: #000;
}
.recent-posts .nav > li > a {
padding: 5px 15px;
border-color: #eee #eee #ddd;
}
.tag-cloud .well {
border-radius: 0;
box-shadow: none;
padding: 10px;
text-align: center;
}
img.wp-smiley {
border: 0;
padding: 0;
vertical-align: text-bottom;
}
div.wp-caption {
margin-top: 20px;
width: auto !important;
}
.wp-caption-text {
margin-top: 10px;
font-style: italic;
}
/**
* Watch search Page
*/
.watch.search .watch-thumbnail {
margin-bottom: 0;
border: 0;
}
.watch.search table td {
vertical-align: middle;
}
.watch.search table td.thumb {
padding: 0;
width: 70px;
}
.search-result {
display: block;
border-top: 1px solid #ddd;
/*margin: 5px 0px;*/
box-shadow: 0 1px 3px #ddd;
padding: 10px;
height: 80px;
}
.search-result:hover {
text-decoration: none;
box-shadow: 0 6px 12px #ddd;
border: 1px solid #982a2a;
}
.search-result .search-thumbnail-container {
float: left;
border: 1px solid #585858;
margin-right: 10px;
height: 60px;
width: 60px;
position: relative;
}
.search-result .search-thumbnail-container img {
position: absolute;
max-height: 100%;
max-width: 100%;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.search-result .info-box h4.title {
font-size: 18px;
margin-top: 0px;
margin-bottom: 21px;
color: #982a2a;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.search-result .info-box span.reference {
color: #585858;
}
.search-result .info-box span.description {
font-size: 14px;
color: #585858;
}
.search-result .info-box .brand-logo-container {
float: right;
height: 60px;
width: 119px;
}
/**
* Watch view page
*/
.info-table th {
font-weight: normal;
padding-right: 10px;
vertical-align: text-top;
padding-top: 1px;
width: 94px;
}
.info-table td {
font-weight: bold;
padding-top: 1px;
}
.info-table td.desc {
font-weight: normal;
}
.strap-tag {
border-radius: 4px;
background: #ddd;
padding: 8px;
margin-right: 8px;
margin-top: 8px;
}
.watch h2.case,
.watch h2.dial,
.watch h2.description,
.watch h2.caliber,
.watch h2.reference {
margin-bottom: 5px;
}
.watch h2.reference {
margin-top: 5px;
}
.watch .brand-logo {
margin: 10px;
}
.watch .caliber-thumbnail {
width: 60%;
}
.watch #pricechart-bordercontainer {
border-bottom: 1px solid #ddd;
}
.watch #pricechart-container {
width: 95%;
margin: 0 auto;
transition: all 0.25s;
}
.watch #chartbox {
border: 1px solid #ddd;
margin-bottom: 10px;
}
.watch #pricechart {
margin: 10px 0;
}
.watch #chart-desc {
padding: 10px;
transition: all 0.25s;
}
.watch #chart-desc .middot {
display: inline-block;
border-radius: 3px;
width: 11px;
height: 11px;
}
.add-to-app {
margin-top: 20px;
background-color: #585858;
color: #fff;
}
.add-to-app .link-box img {
height: 30px;
margin-top: 5px;
}
ul.social-icons {
padding: 0;
list-style: none;
}
ul.social-icons > li.share-icon {
display: block;
float: left;
margin: 0 10px 5px 0!important;
height: 25px;
}
h1, .h1 {
font-size: 26px;
}
h2, .h2 {
font-size: 22px;
}
h3, .h3 {
font-size: 18px;
}
h4, .h4 {
font-size: 18px;
}
h5, .h5 {
font-size: 14px;
}
h6, .h6 {
font-size: 12px;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
color: #585858;
font-weight: 700;
}
h1 a,
h2 a,
h3 a,
h1 a:focus,
h2 a:focus,
h3 a:focus {
color: #585858;
}
h1 a:hover,
h2 a:hover,
h3 a:hover {
color: #727272;
}
h4 a,
h5 a,
h4 a:focus,
h5 a:focus {
color: #585858;
}
h4 a:hover,
h5 a:hover {
color: #727272;
}
/**
* Content pages
*/
body.contact #content label > span.glyphicon {
font-size: 12px;
}
body.contact #content button > span {
font-size: 13px;
padding-right: 5px;
}
body.contact #content .social-icon {
line-height: 46px;
font-size: 16px;
text-decoration: none;
}
body.contact #content .social-icon img {
width: 40px;
height: 40px;
transition: 0.25s all;
}
body.contact #content .social-icon:hover img {
opacity: 0.6;
}
body.contact #content .social-icon:hover span.icon-text {
text-decoration: underline;
}
body.content #content a {
color: #982a2a;
}
body.content #content a:hover {
color: #ef0d0d;
}
#popular-watches {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
margin-bottom: 10px;
}
#popular-watches a {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 170px;
height: 75px;
border: 1px solid #ddd;
justify-content: center;
text-decoration: none;
font-family: 'Alatsi', sans-serif;
font-size: 18px;
}
#popular-watches a span {
align-self: center;
text-align: center;
}
#popular-watches a span.name {
line-height: 1.3;
}
#popular-watches a span.count {
font-size : 14px;
font-family: 'Source Sans Pro', sans-serif;
}
#letter-bar {
background-color: #ddd;
border-radius: 4px;
margin-bottom: 30px;
margin-top: 20px;
display: flex;
justify-content: space-around;
}
#letter-bar a {
text-align: center;
display: inline-block;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
color: #982a2a;
border-radius: 4px;
font-weight: bold;
}
#letter-bar a.all {
flex-basis: 7.28%;
}
#letter-bar a.letter {
flex-basis: 3.57%;
}
#letter-bar a:hover {
background-color: #585858;
color: #fff;
}
#letter-bar a.disabled {
background-color: inherit !important;
color: #bbb;
transition: color .75s;
}
#letter-bar a.active {
background-color: #982a2a;
color: #fff;
}
#brand-container .gutter {
width: 2.99%;
}
#brand-container .brand-box {
width: 48.5%;
}
#brand-container .brand-box img {
max-height: 82px;
max-width: 165px;
}
#brand-container .brand-box ul {
margin-top: 20px;
margin-bottom: 0px;
padding-left: 20px;
}
.flex-break {
flex-basis: 100%;
width: 0px;
}
#watch-detail .watch-header,
#caliber-detail .caliber-header {
display: flex;
margin: 20px 0px;
/* align-items: center; */
}
#watch-detail .watch-header .watch-name,
#caliber-detail .caliber-header .caliber-name {
flex-grow: 1;
}
#watch-detail .watch-header h1,
#watch-detail .watch-header h2,
#caliber-detail .caliber-header h1 {
margin: 0px;
}
#watch-detail .watch-header .h2 {
display: block;
margin-top: 5px;
margin-bottom: 0px;
}
#watch-detail .watch-brand-logo,
#caliber-detail .caliber-brand-logo {
padding-left: 20px;
}
#watch-detail .watch-brand-logo a,
#caliber-detail .caliber-brand-logo a {
display: inline-block;
height: 50px;
}
#watch-detail .watch-brand-logo img,
#caliber-detail .caliber-brand-logo img {
max-height: 50px;
width: auto;
}
#watch-detail .watch-main-image,
#caliber-detail .caliber-main-image {
padding: 5px 0px;
text-align: center;
margin: 0px auto;
}
#watch-detail .watch-main-image a,
#caliber-detail .caliber-main-image a {
display: inline-block;
}
#watch-detail .watch-main-image img,
#caliber-detail .caliber-main-image img {
max-height: 100%;
max-width: 100%;
}
#watch-detail .caliber-description .caliber-img {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
#watch-detail .caliber-description img {
max-height: 150px;
max-width: 150px;
}
#watch-detail .caliber-more {
margin-top: 10px;
}
#watch-detail .watch-description > p,
#caliber-detail .caliber-description > p {
margin-bottom: 0px;
}
#watch-detail .watch-images-more,
#caliber-detail .caliber-images-more {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
#watch-detail .watch-images-more a,
#caliber-detail .caliber-images-more a {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 150px;
text-align: center;
border: 1px solid #ddd;
margin-top: 10px;
margin-right: 10px;
}
#watch-detail .watch-images-more img,
#caliber-detail .caliber-images-more img {
max-height: 100%;
max-width: 100%;
}
@media (max-width: 767px) {
#letter-bar {
flex-wrap: wrap;
}
#letter-bar a.all {
flex-basis: 14.32%;
}
#letter-bar a.letter {
flex-basis: 7.14%;
}
#brand-container .gutter {
width: 0%;
}
#brand-container .brand-box {
width: 100%;
}
}
@media (min-width: 992px) {
#brand-container .gutter {
width: 2.99%;
}
#brand-container .brand-box {
width: 31.3%;
}
}
/**
* Responsive
*/
@media (min-width: 370px) {
/**
* Blocks
*/
.item-block {
width: 165px;
}
.item-block.watch-block-ad {
height: 227px;
}
body.search .item-block.watch-block-ad {
height: 271px;
}
body.family .item-block.watch-block-ad {
width: 100%;
}
.item-block .img-container {
height: 140px;
width: 140px;
line-height: 140px;
}
body.brand .family-box .oneline-block-container {
height: 230px;
}
}
@media (min-width: 480px) {
/*brand page*/
body.brand .family-box .listed-container {
text-align: right;
padding-right: 22px;
}
.col-s-8 {
width: 66.66666667%;
}
.col-s-4 {
width: 33.33333333%;
}
.col-s-4,
.col-s-8 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
}
}
@media (max-width: 540px) {
body.family .watch-block-container {
justify-content: space-around !important;
}
}
@media (max-width: 767px) {
body.family .watch-block-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
body.family .item-block.watch-block-ad.ad-fixed {
display: none;
}
}
@media (min-width: 768px) {
/**
* Header
*/
.navbar-collapse.collapse,
.navbar .container {
padding: 0;
}
.navbar.subnav li {
padding: 2px 20px 2px 2px;
}
.navbar.subnav .responsive-pull-right li {
padding: 2px 2px 2px 20px;
}
.search-top-box {
background: none;
padding-top: 11px;
}
.responsive-row {
margin-right: -15px;
margin-left: -15px;
}
.navbar-header .logo-box {
padding-left: 142px;
}
.navbar-header .logo-box img.top-wordlogo {
max-height: 48px;
width: auto;
margin-top: 5px;
margin-left: -10px;
}
.navbar-header .logo-box img.top-logo {
height: 80px;
width: auto;
position: absolute;
left: 0;
margin-top: 0;
margin-left: 12px;
top: 0px;
}
.navbar-header .logo-box span {
margin-top: -4px;
}
.navbar-top {
z-index: 1000;
height: 84px;
padding-top: 12px;
}
.navbar.subnav {
z-index: 999;
}
.navbar.subnav .container {
padding-left: 124px;
}
/**
* Blocks
*/
.item-block {
width: 176px;
}
.item-block.watch-block-ad {
height: 243px;
}
body.search .item-block.watch-block-ad {
height: 287px;
}
body.family .item-block.watch-block-ad {
width: 356px;
height: 490px;
float: right;
}
body.family .ad-responsive {
display: none;
}
.item-block .img-container {
height: 156px;
width: 156px;
line-height: 156px;
}
body.brand .family-box .oneline-block-container {
height: 245px;
}
/**
* Thumbnails
*/
a.brand-thumbnail img.thumb {
padding: 7px;
}
/**
* Helper utilities
*/
.responsive-pull-right {
float: right !important;
}
h1, .h1 {
font-size: 34px;
}
h2, .h2 {
font-size: 24px;
}
h3, .h3 {
font-size: 20px;
}
/**
* Homepage
*/
.home h2 > span.listed {
font-size: inherit;
line-height: 1;
font-weight: bold;
float: right;
}
/**
* Watches/calibers by brand page
*/
.overviewcaliber .brand-box,
.overviewwatch .brand-box {
margin-bottom: 30px;
}
.overviewcaliber .brand-box h2,
.overviewwatch .brand-box h2 {
margin-top: 5px;
}
.overviewcaliber .brand-logo-box,
.overviewwatch .brand-logo-box {
width: 163px;
height: 82px;
}
}
@media (min-width: 992px) {
/**
* Blocks
*/
.item-block {
width: 184px;
}
.item-block.watch-block-ad {
height: 251px;
}
body.search .item-block.watch-block-ad {
height: 295px;
}
body.brand .family-box .item-block {
width: 140px;
}
body.family .item-block.watch-block-ad {
width: 372px;
height: 506px;
float: right;
}
.item-block .img-container {
height: 164px;
width: 164px;
line-height: 164px;
}
body.brand .family-box .item-block .img-container {
height: 118px;
width: 118px;
line-height: 118px;
}
body.brand .family-box .oneline-block-container {
height: 205px;
}
/*Brand page*/
body.brand .brand-box .listed-container {
font-size: 24px;
text-align: right;
}
body.brand .family-box div.background {
margin-bottom: 30px;
}
/**
* Blog set background for sidepanel to body background
*/
body.blog h6 {
margin-top: 0px;
}
body.blog #content {
padding-bottom: 0;
background: none;
}
body.blog #background-absolute {
display: none;
}
body.blog #background-to-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
}
body.blog #background-to-bottom .col-md-8 {
background: #fff;
height: 100%;
position: absolute;
}
body.blog .breadcrumb {
margin-right: -15px;
}
body.blog .rightpanel {
background: #f1f1f1;
}
body.blog .rightpanel > div {
padding: 10px;
background: #fff;
border: 1px solid #ddd;
margin-top: 15px;
border-radius: 4px;
}
body.blog .well {
margin-bottom: 0;
}
.responsive-text-right {
text-align: right;
}
/*helper classes*/
}
@media (min-width: 1200px) {
/**
* Blocks
*/
.item-block {
width: 186px;
}
.item-block.watch-block-ad {
height: 253px;
}
body.search .item-block.watch-block-ad {
height: 297px;
}
body.family .item-block.watch-block-ad {
width: 376px;
height: 510px;
float: right;
}
body.brand .family-box .item-block {
width: 173px;
}
.item-block .img-container {
height: 166px;
width: 166px;
line-height: 166px;
}
body.brand .family-box .item-block .img-container {
height: 152px;
width: 152px;
line-height: 152px;
}
.blog-stacked .nav > li > a {
padding: 6px 15px;
padding-top: 7px;
}
body.brand .family-box .oneline-block-container {
height: 240px;
}
}
@media (max-width: 767px) {
.banner-signup-lg .btn.app-signup {
margin-top: 20px;
}
.banner-signup-lg .screenshot {
margin-top: 20px;
}
.search-top-box {
height: 65px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 738px;
}
.add-to-app .link-box {
text-align: center;
}
.add-to-app .link-box img {
margin-top: 0px;
margin-bottom: 5px;
}
.add-to-app .action-box a {
float: none !important;
display: block;
}
.banner-signup-lg .btn.app-signup {
margin-top: 20px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.banner-signup-lg .btn.app-signup {
margin-top: 45px;
}
}
.watch-radio {
margin-right: 10px !important;
}
.ebay-disclosure {
font-size: 11px;
line-height: 12px;
text-align: center;
opacity: .5;
margin-top: 5px;
margin-bottom: 15px;
}