/* Table of Contents
==================================================
#Site Styles
#Multiple Location pop up page styles
#Main/Internal Page Styles
#Contact Form styles
#Media Queries
*/
/* #Site Styles
================================================== */
a {
text-decoration: none;
}
h1 {
font: normal normal normal 21px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #999; /* customizable */
margin: 10px 0 5px 15px;
}
h2 {
font: bold normal normal 15px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #4f4e4e;
margin: 10px 0 5px 15px;
}
ul {
margin: 5px 0 15px 15px;
}
.wrapper {
margin: 0 auto;
float: left;
position: relative;
padding: 0;
width: 100%
}
.logo {
margin: 0 auto;
display: block;
padding: 5px 0;
}
/* ---- Multiple Location Selection Page ---*/
.popup-bg {
background: #333 url(../images/bg-location.png) no-repeat top center; /*customizable*/
min-height: 60%;
position: relative;
display: block;
padding: 12px 0;
}
.popup-container {
display: block;
margin: 12px auto;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity:.95;
}
.popup {
display: block;
margin: 0 auto;
border: 4px solid #aca9a9;
background-color: #fff;
-webkit-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.35);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.35);
max-width: 350px;
padding: 10px 0 25px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity:100;
}
.popup-title {
font: normal normal normal 16px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #939293;
padding: 9px 0 0 13px;
}
.button-label-location {
font: normal normal normal 16px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 22px 0 20px 8px;
letter-spacing: .1em;
color: #464646;
display: block;
height: auto;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
margin: 0;
background-image: url(/images/btn-arrow.png) middle right;
}
a:hover.button-label-location {
background-color: #f0f0f0;
color: #000;
}
.button-arrow-location {
float: right;
padding: 0 10px 0 0;
margin: -18px 0 0 0;
height: 25px;
width: 25px;
}
/* ---- Internal Pages ---*/
.menu {
background: #ccc url(../images/menu-bg.png) repeat-x 0 0;
overflow: hidden;
}
.menu-button-1, .menu-button-2, .menu-button-3, .menu-button-4 {
height: 78px;
display: block;
float: left;
margin: 1px;
min-width: 73px;
max-width: 148px;
}
.menu-button-1:hover, .menu-button-2:hover, .menu-button-3:hover, .menu-button-4:hover {
background-color: #999;
}
.menu-button-1 img, .menu-button-2 img, .menu-button-3 img, .menu-button-4 img{
margin: 0 auto;
padding: 2px 5px 0 6px;
}
.button-label {
color: #fff;
clear: both;
font: 10px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
text-align: center;
}
.menu-button-large {
background: #ccc url(../images/btn-bg-large.png) repeat-x 0 0;
}
.button-label-large {
font: normal normal normal 18px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
padding: 10px 0 10px 8px;
letter-spacing: .1em;
color: #474646;
display: block;
}
.button-arrow {
float: right;
padding: 0 10px 0 0;
margin: -4px 0 0 0;
height: 25px;
width: 25px;
}
.photo {
float: left;
width: 100%;
}
.address-bar {
float: left;
}
.social {
padding: 12px 4px;
float: right;
}
div#social_icons {
clear:right;
float: right;
padding-top:15px;
}
div#address_div {
min-width: 130px;
}
a.address {
float: right;
font: normal normal normal 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
padding: 0px 10px 5px 10px;
text-align:right;
border-left: 1px solid #ccc;
margin-top: 10px;
}
p.phone {
float: right;
font: normal normal normal 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
padding: 5px 0px 4px;
margin: 5px 12px 0 0;
}
p.phone a {
color: #fff;
}
footer {
margin: 5px 0 0 0;
}
.footer-nav {
float: left;
}
.footer-button-1, .footer-button-2 {
height: 78px;
display: block;
float: right;
margin: 10px 5px;
min-width: 73px;
}
.rsw-logo {
float: left;
margin: 8px 5px 0 5px;
}
.footer-button-1 img, .footer-button-2 img, .footer-button-3 img, .footer-button-4 img{
margin: 0 auto;
padding: 2px 5px 5px 6px;
}
.button-label-footer {
color: #0e3793;
clear: both;
font: 12px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
text-align: center;
}
.bottom {
margin: 10px 0 0 10px;
float: left;
display: inline;
padding-left:5px;
}
.left {
float: left;
}
img {
display: block;
border: 0;
max-width: 100%;
height: auto;
}
div#hours {
margin: 0 auto;
padding: 10px 0 10px 10px;
text-align: left;
color: #fff;
font-size: 11px;
float: left;
line-height:17px;
}
div#days_col {
width: 40px;
float: left;
margin: 0;
font-size: 11px;
color: #fff;
line-height:17px;
}
div#hours_col {
float: left;
}
div#other_hours {
text-align:center;
width: 120px;
}
/* #Contact Form
================================================== */
.form-wrapper {
max-width:500px;
width:100%;
margin:0 auto;
position:relative;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form input[type="number"],
#contact-form textarea,
#contact-form button[type="submit"] {
font:400 12px/12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding:25px;
}
#contact-form h3 {
color:#c0c0c0;
display:block;
font:400 18px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 10px 0 0 -10px;
}
#contact-form h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
#contact-form label span {
cursor:pointer;
color:#333;
display:block;
margin: 15px 0 0;
font-weight:400;
font-size: 14px;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form input[type="number"],
#contact-form textarea {
width:100%;
box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
border:1px solid #CCC;
background:#FFF;
margin:0 -10px 5px;
padding:10px 5px;
border-radius:5px;
}
#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact-form textarea {
height:100px;
max-width:100%;
}
#contact-form button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
#contact-form button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
#contact-form input:focus,
#contact-form textarea:focus {
outline:0;
border:1px solid #999;
}
#contact-form input[type=radio] {
float: left;
margin-right: 10px;
clear: both;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 959px) and (max-width: 1800px) {
.wrapper {
width: 600px;
}
.logo {
display: block;
padding: 5px 0;
margin: 0 auto;
}
.menu-button-1, .menu-button-2, .menu-button-3, .menu-button-4 {
min-width: 148px;
}
.button-label {
font: 13px/14px Arial, Verdana, sans-serif;
}
.button-arrow {
}
.menu-button-large {
clear: both;
width: 600px;
}
.address-bar {
clear: both;
}
.photo {
clear: both;
width: 600px;
}
.menu, .address-bar {
width: 600px !important;
margin-left: 0 !important;
clear: both;
}
footer {
clear: both;
max-width: 600px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.logo {
display: block;
padding: 5px 0;
margin: 0 auto;
}
.menu-button-1, .menu-button-2, .menu-button-3, .menu-button-4 {
min-width: 24%;
}
.button-label {
font: 13px/14px Arial, Verdana, sans-serif;
}
.menu-button-large {
clear: both;
}
.address-bar {
clear: both;
padding: 12px 0 0 0;
}
.photo {
clear: both;
margin: 0 auto;
display: block;
}
.menu, .address-bar {
width: 100% !important;
margin-left: 0 !important;
}
footer {
clear: both;
max-width: 600px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {
margin: 0 auto;
display: block;
}
.logo {
margin: 2px 0 2px 8px;
display: block;
margin: 0 auto;
}
.menu-button-1, .menu-button-2, .menu-button-3, .menu-button-4 {
min-width: 24%;
}
.menu {
width: 100% !important;
margin-left: 0 !important;
padding-left: 6px;
}
.address-bar, .menu-button-large {
width: 100% !important;
margin-left: 0 !important;
}
.button-label {
font: 13px/14px Arial, Verdana, sans-serif;
}
footer {
clear: both;
width: 100% !important;
}
.rsw-logo {
display: block;
margin: 0 auto;
clear: both;
padding: 0px;
float:none;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
.menu {
margin: 0 auto !important;
display: block;
padding-left: 6px;
}
.address-bar {
width: 100%;
}
.menu-button-1, .menu-button-2, .menu-button-3, .menu-button-4 {
min-width: 74px;
width: 24%;
}
p.phone {
float: right;
font: normal normal normal 18px/18px Arial, Verdana, sans-serif;
color: #fff;
border-right: none;
clear:right;
}
a.address {
border-left: none;
}
div#hours {
padding: 10px 0 0 10px;
}
div#social_icons {
padding-top: 0px;
}
div#address_div {
width: 180px;
float:right;
}
}
/** APPOINTMENT REQUEST **/
.form_1
{
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #828282;
}
.form_1_top
{
background-color:#828282;
height:11px;
}
.form_1_format input[type=text], .form_1_format input[type=date], .form_1_format input[type=time], .form_1_format
input[type=email], .form_1_format input[type=number], .form_1_format input[type=tel]
{
width:100%;
height:37px;
-moz-border-radius:5px;
border-radius:5px;
border:none;
background-color:#CDCDCD;
margin-bottom:12px;
font-family:gothic;
font-size:13px;
color:#394248;
padding-left:8px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.form_1 select
{
width:115% /* this percentage effectively extends the drop down button out of view */;
background-color:transparent /* this hides the select's background making any styling visible from the div */;
background-image:none;
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}
.form_1 .select_styled
{
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
background: url(../images/fancybox-select_btn.png) no-repeat bottom right;
width:100%;
height:37px;
-moz-border-radius:5px;
border-radius:5px;
background-color:#828282;
margin-bottom:12px;
font-family:gothic;
font-size:13px;
color:#FFFFFF;
padding-left:5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.form_1 h2
{
font-family:gothic_bold;
font-size:16px;
color:#394248;
font-weight:normal;
margin: 0px !important;
}
#type_of_appointment_tbl
{
width:100%;
max-width:356px;
margin:35px auto;
font-family:gothic !important;
color:#394248;
font-size:13px !important;
}
#type_of_appointment_tbl label
{
padding-left:22px;
}
#type_of_appointment_tbl td:first-child
{
width:50%;
font-family: gothic;
font-size: 13px;
}
.small_notes
{
font-family:gothic_bold;
font-size:11px;
color:#394248;
}
.form_1 textarea
{
width:100%;
-moz-border-radius:5px;
border-radius:5px;
border:none;
background-color:#CDCDCD;
margin-bottom:12px;
font-family:gothic;
font-size:13px;
color:#394248;
padding-left:5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.form_1_submit
{
background-position:right top;
background-repeat:no-repeat;
height:37px;
padding: 0px 20px;
border: none;
color:#FFFFFF;
font-family:gothic_bold;
font-size:20px;
cursor:pointer;
background-color:#828282;
-moz-border-radius:5px;
border-radius:5px;
border:none;
}
.one_whole
{
width:95%;
position:relative;
margin:0px auto;
}
input[type=radio].css-checkbox
{
display:none;
}
input[type=radio].css-checkbox + label.css-label
{
padding-left:18px;
height:18px;
display:inline-block;
line-height:22px;
background-repeat:no-repeat;
background-position: 0 0;
vertical-align:middle;
cursor:pointer;
}
input[type=radio].css-checkbox:checked + label.css-label
{
background-position: 0 -18px;
}
label.css-label
{
background-image:url(../images/fancybox-radio_btn.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@font-face
{
font-family: gothic;
src: url("../images/gothic.eot") /* EOT file for IE */
}
@font-face
{
font-family: gothic;
src: url("../images/gothic.TTF") /* TTF file for CSS3 browsers */
}
@font-face
{
font-family: gothic_bold;
src: url("../images/gothicb.eot") /* EOT file for IE */
}
@font-face
{
font-family: gothic_bold;
src: url("../images/gothicb.TTF") /* TTF file for CSS3 browsers */
}
::-webkit-input-placeholder { /* WebKit browsers */
color:inherit;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:inherit;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:inherit;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:inherit;
}