/*old green was: #205134*/ a { color: #02A0A2; } a:hover { color: #3EB2B2; } ul.nav a { color: black; text-transform: uppercase; } ul .nav a:hover { color: #02a0a2; } body#home { min-height: 0; padding-bottom: 0; background: url("../images/background_home_overall.jpg") repeat-x; } body { min-height: 0; padding-bottom: 0; background: url("../images/background_overall.jpg") repeat-x; : none; } /*.row { margin-left: 0; margin-right: 0; }*/ #overall { max-width: 1260px; margin: 0 auto 0 auto; background: white;} #mainContent { max-width: 1260px; margin: 0 auto 0 auto; background: white;} .way-offsides { position: absolute; left: -50000px; } /******************************************************************/ /*** TOP NAVIGATION ***/ /******************************************************************/ .container { max-width: 1020px; padding: 0; } .container img { max-width: 100%; } .navbar { background: #0F0F0F url("../images/background_header.jpg") center top no-repeat; margin: 0; min-height: 180px;} .navbar-nav { margin-top: 0px; } .navbar-header { width: 100%; margin-bottom: 0px; } .navbar-brand { line-height: auto; height: auto; } .navbar-collapse { float: left; clear: none; overflow: hidden; border-bottom: 10px solid #535252; width: 100%; background: #535252;} .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-left:0; } .navbar-brand { padding: 0 0 20px 0; width: 100%; position: relative; } .navbar-brand img { display: block; width: 100%; max-width: 281px; max-height: 88px; margin: 0px auto 0 auto; } .navbar-default { border: 0; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { text-transform: uppercase; background: transparent; color: #aeaeae; border-color: #02a0a2; } .navbar-default .navbar-nav > li { border-bottom: 1px solid #9c9c9e; margin: 0; padding: 0; width: 100%; min-width: 100px; background: #464545; } .navbar-default .navbar-nav > li:last-child { border-bottom: 0; } .navbar-default .navbar-nav > li > a { text-transform: uppercase; color: #aeaeae; border-left: 4px solid #5c5b5b; font-size: 0.9em; padding: 15px 0 15px 20px; font-weight: bold; } .navbar-default .navbar-nav > li > a:hover { border-left: 4px solid #02a0a2; } .navbar-default .navbar-nav > li > a span.feature { text-transform: uppercase; color: white; display: inline-block; font-size: 1.3em; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a.focus { color: #aeaeae; } .navbar-default .navbar-toggle { border: 0px; margin: 0;} .navbar-default .navbar-toggle .icon-bar { background: #17A3A4; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background: none; } /******************************************************************/ /*** CAROUSEL ***/ /******************************************************************/ .carousel { margin-bottom: 0; height: 240px; } .carousel-inner { max-height: 240px; height: 100%;} .carousel-inner > .item { height: 100%; background: none; } .carousel-control.left, .carousel-control.right { background: none; } .carousel-inner > .item > img { height: auto; } .carousel-indicators { bottom: 0px; } .carousel-indicators li { border: 2px solid white; } .carousel-indicators li.active { background: #02A0A2; } .carousel-inner .container { font-size: 12px; opacity: .8; filter: alpha(opacity=80); } .carousel-caption { font-size: 3em; top: 40%; font-weight: bold; color: rgba(255,255,255,.8); text-align:center; text-transform:uppercase; text-shadow: 0 0; margin:0; padding: 0; left: 15%; right:15%; } /******************************************************************/ /*** MAIN & SUB NAV ***/ /******************************************************************/ #main { position: relative; margin: 10px 0 0 0; } #main article { padding-right: 20px; } #main h1 { font-size: 21px; font-weight: normal; text-transform: uppercase; color: #02a0a2; padding-bottom: 20px; margin-top: 10px;} #main h2 { font-size: 18px; font-weight: normal; text-transform: uppercase; } #main h3 { font-size: 14px; font-weight: normal; color: #02a0a2; } #main table { width: 100%; } #main table td { float: left; clear: both; display: block; width: 100%; padding: 10px 0 0px 0; vertical-align: top;} .mainimg { position: relative; max-height: 318px; margin-bottom: 0px; } .mainimg.carousel-inner .container { font-size: 12px; opacity: .8; filter: alpha(opacity=80); } .mainimg .carousel-caption { font-size: 2em; top: 40%; font-weight: bold; color: rgba(255,255,255,.8); text-align:center; text-transform:uppercase; text-shadow: 0 0; position: relative; line-height: 0px; top: 40%; font-size: 50px; left: 0; right: 0; } .carousel-inner > .item { width: 100%; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { top: auto; } #sidebar { background:#e9e9ea; padding: 15px; margin-top: 40px; } #sidebar .nav a:before { content: "+"; padding-right: 10px; font-size: 20px; font-weight: normal; } #main #sidebar h1 { margin-top: 12px;} #sidebar .nav > li > a { font-size: 16px; padding: 5px 0 5px 0; margin-right: 25px; border-bottom: 1px solid black; } #sidebar .nav > li > a:hover { background-color: transparent; color: #02a0a2; border-bottom: 1px solid #02a0a2; } #sidebar .nav > li.active > a { color: #02a0a2; border-bottom: 1px solid #02a0a2; } #sidebar .nav li:last-child { border: 0; } #sidebar .nav.showroom li > a:before { content: ""; padding-right: 0; font-size: 12px; } #sidebar .nav.showroom li > a { background: #02a0a2; text-align: center; color: white; border: 0; width: 100%; max-width: 207px; } #sidebar .nav.showroom li > a:hover { background: #3EB2B2; } .submit { background: #02a0a2; text-align: center; color: white; border: 0; width: 100%; max-width: 207px; padding: 5px 0 5px 0; text-transform: uppercase; font-size: 16px;} .submit:hover { background: #3EB2B2; } #sidebar .nav > li img { display: block; margin: 20px 0 20px 0; width: 100%; max-width: 207px; max-height: 146px;} #leftnav h1 { font-size: 16px; font-weight: bold; } #leftnav h1 a { color: #02a0a2; } #leftnav h3 { font-weight: bold; } #leftnav h3 a { color: #02a0a2; } #leftnav ul { padding: 4px 0 0 0; } #leftnav ul li { list-style: none; } #leftnav ul a { color: black; text-transform: uppercase; } #leftnav ul a:hover { color: #02a0a2; } /******************************************************************/ /*** NEW TEMPLATE ***/ /******************************************************************/ .new-branding .navbar-default .navbar-toggle .icon-bar { background: #2f5f3a; } .new-branding .navbar-default .navbar-nav > li > a { font-size: 12.31px; line-height: 17.9px; } .new-branding .navbar-default .navbar-nav > li > a span.feature { font-size: 17.9px; line-height: 17.9px; } .new-branding .navbar-default .navbar-nav > li > a:hover, .new-branding .navbar-default .navbar-nav > .active > a, .new-branding .navbar-default .navbar-nav > .active > a:hover, .new-branding .navbar-default .navbar-nav > .active > a:focus { border-color: #2f5f3a; } .new-branding { font-size: 18px; line-height: 26px; } .new-branding #main h1 { font-size: 36px; font-weight: 700; } .new-branding #main #sidebar h1 { font-size: 16px; line-height: 14px; } .new-branding a, .new-branding h1 a, .new-branding #leftnav h1 a, .new-branding #sidebar .nav > li > a:hover, .new-branding #main h1, .new-branding #main h2, .new-branding #main h3, .new-branding #main h3 { color: #2f5f3a; } .new-branding #main h2 { font-size: 22px; } .new-branding #main h3 { font-size: 18px; } .new-branding #sidebar .nav > li > a:hover { border-color: #2f5f3a; } .new-branding #sidebar .nav.showroom li > a { background: #2f5f3a; color: white; } .new-branding #sidebar .nav.showroom li > a:hover { color: white; } .new-branding #footer { font-size: 14px; line-height: 16px; } .new-branding #footer a { color: white; font-size: inherit; } .new-branding #footer .icon { display: inline-block; width: 36px; height: 36px; } .new-branding .mainimg { max-height: none; } @media only screen and (min-width: 995px) { .new-branding .mainimg { max-height: none; } } /******************************************************************/ /*** FOOTER ***/ /******************************************************************/ #footer { background: #464545; color: white; border-top: 8px solid #535252; border-bottom: 8px solid #535252; margin-top: 60px; padding-top: 20px; padding-bottom:20px;} #footer h1 { font-size: 16px; font-weight: bold; text-transform: uppercase; margin-top: 0;} /*#footer h1:first-of-type { margin-bottom: 40px;}!*changed sam oct 30 2018*!*/ #footer .image-container { padding-top: 30px; } #footer a { font-size: 12px; color: #02a0a2; text-decoration: underline; } #footer .row { margin: 0; } #footer .col-xs-6 { border-right: 0; border-bottom: 2px solid #525151; margin: 40px 0 0 0; min-height: 0; width: 100%;} #footer .col-xs-6:first-child { display: none;} /*#footer .col-xs-6:first-child img { margin: 15px 0 15px 0; max-width: 280px;} changed sam oct 30 2018*/ #footer .col-xs-6 a:first-of-type { margin: 15px 0 0 0;} #footer .col-xs-6 img { margin-top: 10px; max-width: 150px;; display: inline;} #footer .col-xs-6 a:last-of-type { margin: 0 0 15px 0;} #footer .col-xs-6:last-child { border-right: 0; padding-right: 0; border-bottom: 0; } #footer address { border-bottom: 1px solid #525151; padding-bottom: 20px; } #footer address:last-child { border-bottom: 0; } #footer #hours { list-style: none; padding:0 0 20px 0; } #footer #hours .dayofweek { display: inline-block; width: 90px; } #footer #appointment { padding:0 0 20px 0; max-width: 250px; } #footer .row2 .col-md-8 { display: none;} #footer .row div.col-md-4 { margin: 30px auto 0 auto; } #footer .row2 div.col-md-4 { padding: 0; margin: 0 0 0 20px; width:auto; min-width: 80px;} #footer .row2 { position: relative; top: 0; } #footer .row2 #brownboots a { color: white; white-space: nowrap; } /******************************************************************/ /*** BLOG ***/ /******************************************************************/ #main-wrapper div.breadcrumbs { display: none; } #main-wrapper hr.featurette-divider { display: none; } #main-wrapper.container { max-width: 600px; } #main-wrapper.container .container { max-width: 600px; } #main-wrapper.container #comments { max-width: 600px; } #main-wrapper .form-allowed-tags { display: none; } #main-wrapper .btn { background: #eaeaea; } #main-wrapper .btn:hover { background: #cccccc; } #main-wrapper label { vertical-align: top; width: 80px;} #main-wrapper h2.comments-title, #main-wrapper #respond h3 { background: #eaeaea; padding: 15px; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; border: 1px solid #bbbbbb; border-bottom: 0; max-width: 80%; position: relative; top: 1px; } #main-wrapper h2.comments-title { width: 400px; margin: 20px 0 0 0; } #main-wrapper #respond h3 { width: 200px; margin: 80px 0 0 0; } #main-wrapper #respond form { display: block; background: #eaeaea; border-radius: 10px; border-top-left-radius: 0; border: 1px solid #bbbbbb; padding:15px;} #main-wrapper .commentlist { background: #eaeaea; padding: 15px; border-radius: 10px; border-top-left-radius: 0; list-style: none; border: 1px solid #bbbbbb; } #main-wrapper input { width: 95%; } #main-wrapper textarea { width: 95%; } #main-wrapper #nav-below { display: none; } /******************************************************************/ /*** CMS ***/ /******************************************************************/ #cms_overall .carousel-indicators { display: block; position: static; float: right; clear: none; background: #cccccc; margin: 0 auto 0 auto; padding: 0; } #cms_overall .carousel-control { display: none!important; } #cms_overall div.globalcmsnav { -moz-box-sizing : content-box!important; } /*#cms_overall * { max-width: 960px; }*/ #cms_overall #main article { padding-right: 0; } /******************************************************************/ /*** WEB FORMS ***/ /******************************************************************/ form.contact { max-width: 430px; width: 100%; } div.field { float: none; padding-bottom: 15px; } div.field h2 { margin: 20px 0 0 0; } div.field label { display: block; padding-bottom: 3px; font-weight: bold; } div.field label.checkbox div.field label.radio { font-weight: normal; } div.field input.text { display: block; width: 190px; height: 27px; margin: 0 6px 0 0; padding: 4px 0 4px 5px; border: 2px solid #e9e8e8; } div.field select { display: block; color: #595959; font-size: 14px; } div.field textarea { display: block; max-width: 400px; width: 100%; height: 150px; padding: 4px 0 4px 5px; border: 2px solid #e9e8e8; } #submit { clear: both; margin-top: 15px; } .required .warn { color: #a50834; } div.warn { max-width: 430px; margin: 0 0 20px 0; padding: 20px 20px 0 20px; border: 1px solid #b6b6b6; background: #edecec; } ul.warn { margin: 0 0 20px 0; padding: 0 0 0 16px; } ul.warn li { margin: 0 0 5px 0; padding-left: 0; } form.contact div.one-third { max-width: 135px; } form.contact div.one-third input.text { max-width: 118px; } form.contact div.half { max-width: 210px; } form.contact div.half input.text { max-width: 188px; } form.contact div.two-thirds { max-width: 300px; } form.contact div.two-thirds input.text { max-width: 278px; } form.contact div.full { max-width: 430px; margin: 0; width: 100%;} form.contact div.full input.text { max-width: 408px; } form.contact div.pad { padding-right: 10px; } form.contact div.last { clear: both; width: 100%; } /******************************************************************/ /*** MAX WIDTH 328 ***/ /******************************************************************/ @media only screen and (max-width: 328px) { .carousel { height: 140px; } .carousel-inner { max-height: 140px;} .carousel-caption { font-size: 2.5em; top: 10%; } .carousel-indicators { bottom: 10%; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top: 20%; } } /******************************************************************/ /*** MIN WIDTH 328 ***/ /******************************************************************/ @media only screen and (min-width: 328px) { .carousel { height: 190px; } .carousel-inner { max-height: 190px;} .carousel-caption { font-size: 3em; top: 20%; } .carousel-indicators { bottom: 20%; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top: 30%; } } /******************************************************************/ /*** MIN WIDTH 428 ***/ /******************************************************************/ @media only screen and (min-width: 428px) { img { float: none!important; } .mainimg .carousel-caption { font-size: 1.07em; top: 23%; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top: 35%; } .carousel { height: 260px; } .carousel-inner { max-height: 260px;} .carousel-caption { font-size: 3.5em; top: 30%; } .carousel-indicators { bottom: 20%; } .mainimg .carousel-caption { font-size: 1.6em; top: 20%; } } /******************************************************************/ /*** MIN WIDTH 568 ***/ /******************************************************************/ @media only screen and (min-width: 568px) { .carousel { height: 320px; } .carousel-inner { max-height: 320px;} .carousel-caption { font-size: 6em; top: 30%; } .mainimg .carousel-caption { font-size: 2.3em; top: 20%; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top: 40%; } .carousel-indicators { bottom: 30%; } } /******************************************************************/ /*** MIN WIDTH 668 ***/ /******************************************************************/ @media only screen and (min-width: 668px) { .carousel { height: 400px; } .carousel-inner { max-height: 400px;} .mainimg .carousel-caption { font-size: 2.3em; top: 30%; } } /******************************************************************/ /*** MIN WIDTH 768 ***/ /******************************************************************/ @media only screen and (min-width: 768px) { .carousel { height: 400px; } .carousel-inner { max-height: 400px;} #main { margin: 50px 0 0 0; } #sidebar { background: none; padding: 0; margin-top: 0; } .navbar-header { width: 32%; padding-right: 5%; } .navbar-header { width: 32%; padding-right: 5%; } .navbar-brand img { margin: 15px auto 0 auto; } .navbar-collapse { width: 68%; border-bottom: 0; background: none; } .navbar-collapse .navbar-nav { display:inline-block; width: 100%; } .navbar > .container { padding: 45px 0 0 0; } .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 0; } .navbar-default .navbar-nav > li { width: 100px; border-bottom: 0 solid #9c9c9e; padding-right:20px; margin-bottom: 20px; } .navbar-default .navbar-nav > li > a { padding: 15px 0 0 10px; } .navbar-default .navbar-nav > li > a span.feature { display: block; } .navbar-default .navbar-nav > li { background: transparent; } #main article { padding-right: 150px; } .carousel-caption { font-size: 10em; top: 23%; } .mainimg .carousel-caption { font-size: 2.6em; top: 40%; } div.field { float: left; } #main table { width: 100%; } #main table td { display: table-cell; float: none; width: 50%; } #sidebar .nav > li img { margin: 20px 0 20px 0; } #main, #footer { top: 0; } #footer .col-xs-6 { border-right: 4px solid #525151; border-bottom: 0; float: left; min-height: 210px; margin-top: 20px; width: 33.333333% } #footer #hours .dayofweek { width: 120px; } #footer .row2 { top: -15px; } } /******************************************************************/ /*** MIN WIDTH 795 ***/ /******************************************************************/ @media only screen and (min-width: 795px) { .carousel { height: 420px; } .carousel-inner { max-height: 420px;} } /******************************************************************/ /*** MIN WIDTH 895 ***/ /******************************************************************/ @media only screen and (min-width: 895px) { .carousel { height: 480px; } .carousel-inner { max-height: 480px;} } /******************************************************************/ /*** MIN WIDTH 995 ***/ /******************************************************************/ @media only screen and (min-width: 995px) { .navbar-nav { margin-top: 50px; } .navbar-nav { background: transparent; } .navbar-nav li { margin-right: 0px; background: transparent; } .navbar-default .navbar-nav > li { width: auto; min-width: 120px; width: auto; padding-right:20px; } .navbar-default .navbar-nav > li > a { padding: 15px 0 0 10px; } .carousel { height: 540px; } .carousel-inner { max-height: 540px;} .carousel-caption { font-size: 10em; top: 32%; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top: 47%; } .mainimg .carousel-caption { font-size: 3.6em; top: 50%; } .mainimg { max-height: 318px; } #footer .col-xs-6:first-child { display: block;} #footer .row2 .col-md-8 { display: block;} } /******************************************************************/ /*** MIN WIDTH 1095 ***/ /******************************************************************/ @media only screen and (min-width: 1095px) { .carousel { height: 580px; } .carousel-inner { max-height: 580px;} } /******************************************************************/ /*** MIN WIDTH 1195 ***/ /******************************************************************/ @media only screen and (min-width: 1195px) { .carousel { height: 650px; } .carousel-inner { max-height: 650px;} .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { top: 45%; } }