@font-face {
    font-family: 'Mazda Type';
    src: url('/media/fonts/Mazda Type/Regular.eot');
    src: url('/media/fonts/Mazda Type/Regular.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/Mazda Type/Regular.woff2') format('woff2'),
        url('/media/fonts/Mazda Type/Regular.woff') format('woff'),
        url('/media/fonts/Mazda Type/Regular.ttf') format('truetype'),
        url('/media/fonts/Mazda Type/Regular.svg#MazdaType-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mazda Type';
    src: url('/media/fonts/Mazda Type/Italic.eot');
    src: url('/media/fonts/Mazda Type/Italic.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/Mazda Type/Italic.woff2') format('woff2'),
        url('/media/fonts/Mazda Type/Italic.woff') format('woff'),
        url('/media/fonts/Mazda Type/Italic.ttf') format('truetype'),
        url('/media/fonts/Mazda Type/Italic.svg#MazdaType-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Mazda Type';
    src: url('/media/fonts/Mazda Type/Medium.eot');
    src: url('/media/fonts/Mazda Type/Medium.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/Mazda Type/Medium.woff2') format('woff2'),
        url('/media/fonts/Mazda Type/Medium.woff') format('woff'),
        url('/media/fonts/Mazda Type/Medium.ttf') format('truetype'),
        url('/media/fonts/Mazda Type/Medium.svg#MazdaType-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Mazda Type';
    src: url('/media/fonts/Mazda Type/MediumItalic.eot');
    src: url('/media/fonts/Mazda Type/MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/Mazda Type/MediumItalic.woff2') format('woff2'),
        url('/media/fonts/Mazda Type/MediumItalic.woff') format('woff'),
        url('/media/fonts/Mazda Type/MediumItalic.ttf') format('truetype'),
        url('/media/fonts/Mazda Type/MediumItalic.svg#MazdaType-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Mazda Type';
    src: url('/media/fonts/Mazda Type/Bold.eot');
    src: url('/media/fonts/Mazda Type/Bold.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/Mazda Type/Bold.woff2') format('woff2'),
        url('/media/fonts/Mazda Type/Bold.woff') format('woff'),
        url('/media/fonts/Mazda Type/Bold.ttf') format('truetype'),
        url('/media/fonts/Mazda Type/Bold.svg#MazdaType-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Mazda Type';
    src: url('/media/fonts/Mazda Type/BoldItalic.eot');
    src: url('/media/fonts/Mazda Type/BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/media/fonts/Mazda Type/BoldItalic.woff2') format('woff2'),
        url('/media/fonts/Mazda Type/BoldItalic.woff') format('woff'),
        url('/media/fonts/Mazda Type/BoldItalic.ttf') format('truetype'),
        url('/media/fonts/Mazda Type/BoldItalic.svg#MazdaType-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

html {
    font-size: 15px;
}

body {
    font-family: 'Mazda Type', Arial, Helvetica, sans-serif;
    background-color: #4c4c4c;
    color: #fff;
    padding: 0 60px;
}

input,
textarea {
    font-family: 'Mazda Type', Arial, Helvetica, sans-serif;
}

body,
table,
.button a,
.button a:visited,
.button input,
.recordset h4,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    font-size: 15px;
}

h1 {
    font-weight: 500;
    font-size: 28px;
}

h2 {
    font-weight: bold;
    font-size: 22px;
}

h3 {
    font-weight: bold;
    font-size: 16px;
}

.error,
.error_message,
.no_records,
.grandtotal,
.discount,
.pagination {
    font-size: 16px;
}

.notes,
form #notes textarea,
#dealers_map h3 {
    font-size: 16px;
}

a:link,
a:visited {
    color: inherit;
    text-decoration: underline;
}

#maintable {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: auto;
    background-color: #000;
    position: relative;
}

#admin_user {
    position: absolute;
    top: 20px;
    left: 35px;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-collapse: separate;
}

#site_title,
#logo,
#footer,
#breadcrumb {
    display: none;
}


#page_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

#header,
#subheader {
    margin-bottom: 20px;
}

#homelink {
    display: block;
    margin: 0 20px 0 auto;
    float: none;
    background-image: url('/media/images/logo_vertical.png');
    width: 100px;
    height: 93px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.nav ul {
	max-width: 80%;
	text-align: right;
	margin: 0 0 0 auto;
}

.nav li {
    float: none;
    display: inline-block;
}

.nav a {
    width: initial;
}

.button {
    float: none;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 5px;
}

.button a,
.button a:visited,
.button input {
    float: none;
    background-color: #000;
    color: #fff;
    text-align: center;
    width: auto;
    min-width: 100px;
    padding: 8px;
    padding: calc(8px + .3em);
    border-radius: 5px;
    text-transform: uppercase;
    line-height: 1;
	text-decoration: none;
	height: auto;
}

.recordset {
    background-color: initial;
}

.button:hover a,
.button a:hover,
.button:hover input,
.button input:hover {
    background-color: inherit;
}

.fieldset label {
    line-height: 1.5;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    border: none;
    padding: 7px 4px;
}

select {
    padding: 6px 35px 6px 6px;
    font-family: 'Mazda Type', Arial, Helvetica, sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

#content table {
    border-bottom: none;
}

#content form table {
    position: relative;
    margin-left: 0;
    border-spacing: 0 10px;
    border-collapse: separate;
}

#content form table td {
    padding: 0;
    position: relative;
}

#content form table tr td:first-child,
body#public #content form table tr td:first-child {
    vertical-align: middle;
    white-space: nowrap;
}

/* #content form table tr td:nth-child(2), */
body#public #content form table tr td:nth-child(2) {
    width: 100%;
}

#content form table tr td:only-child,
body#public #content form table tr td:only-child {
    background-color: transparent;
}

#content form table td>label:only-child,
#public #content form table td>label:only-child {
    margin: 0;
    padding: 8px;
}

#content tr.even {
    background-color: #444;
}

#content form input,
#content form textarea {
    border-radius: 5px;
    margin: 0;
}

#content form textarea {
    padding: 5px;
}

#content form table td>input:first-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.vtip {
    display: none;
}

#loginpage h1,
#loginpage #login_form,
#loginpage #login_form ul {
    text-align: center;
}

#loginpage #login_form ul {
    margin: 16px auto;
}

#loginpage #login_form label,
#loginpage #forgot label,
#loginpage #my_details label {
    display: inline-block;
    float: none;
    padding: 6px 8px;
    text-align: left;
}

#loginpage #my_details label {
    width: 140px;
}

#loginpage #login_form input[type="text"],
#loginpage #forgot input[type="text"],
#loginpage #my_details input[type="text"],
#loginpage #login_form input[type="password"],
#loginpage #forgot input[type="password"],
#loginpage #my_details input[type="password"],
#loginpage #my_details select {
    padding: 8px;
    border-radius: 5px;
    line-height: 18px;
}

#loginpage form#forgot[action*="do_password_reset"] label {
    width: 140px;
}

#loginpage #my_details input[type="text"],
#loginpage #my_details input[type="password"],
#loginpage #my_details select {
    flex-grow: 1;
}

#loginpage #my_details select {
    width: auto;
}

#loginpage .ok_button {
    border: 1px solid #fff;
    border-radius: 5px;
    text-align: center;
}

#loginpage .ok_button:before {
    content: attr(title);
    text-transform: uppercase;
    transform: translateY(calc(21px - 50%));
    display: inline-block;
}

#login_links {
    text-align: center;
    margin-top: 60px;
    font-size: 13px;
}

#login_links .forgot,
#login_links .register {
    float: none;
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-left: 20px;
    cursor: pointer;
}

#login_links>.forgot {
    margin-left: 0;
}

#login_links .forgot>a,
#login_links .register>a {
    color: #fff;
    padding: 12px;
    display: inline-block;
}

#login_links .forgot>a:hover,
#login_links .register>a:hover {
    text-decoration: none;
}

#loginpage form#forgot,
#loginpage form#forgot>.recordset,
#loginpage form#my_details,
#loginpage form#my_details>.recordset {
    width: 500px;
    text-align: center;
}

#loginpage form#forgot>.recordset {
    margin-right: 0;
}

#loginpage form#forgot h4 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

#loginpage form#forgot ul {
    margin-top: 10px;
}

#loginpage form#forgot ul li,
#loginpage form#my_details ul li {
    display: flex;
    justify-content: center;
}

#loginpage form#forgot ul li>label,
#loginpage form#my_details ul li>label {
    line-height: 1.5;
    white-space: nowrap;
}

#loginpage form#forgot ul li>label:after,
#loginpage form#my_details ul li>label:after {
    content: ':';
}

#loginpage form#forgot .button,
#loginpage form#my_details .button {
    float: none !important;
}

body#message {
    background-color: #4c4c4c;
    color: #fff;
    padding: 0 60px;
    height: 100%;
}

body#message>.success,
body#message #column2>.success,
body#message #content>.success,
body#message>.warning,
body#message #column2>.warning,
body#message #content>.warning {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: auto;
    background-color: #000;
    padding-top: 400px;
    background-position: center 200px;
    text-align: center;
}

body#message>.success .text,
body#message #column2>.success .text,
body#message #content>.success .text,
body#message>.warning .text,
body#message #column2>.warning .text,
body#message #content>.warning .text {
    color: #fff;
}

body#message .button {
    width: auto;
}

#message .warning {
    background-image: url(/media/images/warning.gif);
}

#message .success {
    background-image: url(/media/images/success.gif);
}

@media screen and (max-device-width: 480px) {
    body#message .text {
        -webkit-text-size-adjust: none;
        font-size: 23px !important;
    }
}

#login ul input,
.search_query input {
    background-image: none;
}

#login label {
    line-height: 23px;
}

#search form {
    position: relative;
}

#search form .search_button {
    position: absolute;
    left: 155px;
    padding: 8px;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 5px;
}

#search form .search_button a {
    display: block;
    text-decoration: none;
}

#search form .search_query {
    position: absolute;
    float: none;
    margin: 0;
}

#boxes_container {
    max-width: 700px;
    margin: 0 auto;
}

#column2 #boxes .box a {
    text-decoration: none;
}

#boxes {
    text-align: center;
}

#boxes .box {
    width: 146px;
    height: 146px;
    display: inline-block;
    margin: 10px;
    background-color: transparent;
    border: 2px solid white;

    position: relative;
}

#boxes .box h3 {
    position: relative;
    height: 146px;
    width: 146px;
    margin: 0;
}

#boxes .box h3 a {
    position: absolute;
    bottom: 5px;
    left: 3px;
    width: 140px;

    font-size: 22px;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
}

#boxes .box h3 a:link,
#boxes .box h3 a:visited {
    color: white;
}

#boxes .box a.normal,
#boxes .box a.ticked {
    position: absolute;
    top: 0;
    left: 0;
    height: 146px;
    width: 146px;
}

#boxes .box a span {
    display: none;
}

#boxes .box a img {
    display: none;
}

#boxes .box a[data-total]:not([data-total="0"]):after {
    content: attr(data-total);

    position: absolute;
    display: block;
    right: 0;
    bottom: 0;

    padding: 8px;

    background-color: transparent;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}

#edit_content .button {
    border: none;
}

#edit_content .button a {
    min-width: auto;
}

.ms-options-wrap>.ms-options {
    background-color: #444;
}

.ms-options-wrap>.ms-options>ul li.selected label {
    background-color: #888;
}

.ms-options-wrap>.ms-options>ul label.focused,
.ms-options-wrap>.ms-options>ul label:hover {
    background-color: #aaa;
}

#calendar_page {
    padding: 0;
}

#calendar_page #calendar {
    margin: 0 auto;
}

#calendar_page #calendar th {
    background-color: #444;
}

#calendar_page #calendar a:hover {
    background-color: #888;
}

#calendar_page #calendar a {
    height: 24px;
}

/* S2 product list and basket (also needed on Event Booking) */
#content table#s2_product_list tr td input {
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#content table#s2_product_list tr td.s2_quantity_col,
#content table#s2_product_list tr td.s2_price_col {
    text-align: center;
}

#content table#s2_product_list tr td.s2_price_col {
    display: none;
}

#content table#s2_product_list tr td {
    vertical-align: middle;
}

#content table#s2_product_list tr th.last {
	text-align: left;
}

#content table#s2_product_list tr th.last:not(:nth-child(2)) {
    display: none;
}

#content table#s2_product_list tr td.s2_quantity_col input {
    width: 100px;
}

#content table#s2_product_list td.s2_quantity_col {
    width: 150px;
}

#s2_product_list h2 {
	font-size: 18px;
}

#s2_product_list>tbody:first-child>tr:not(:first-child)>td:nth-child(4),
#s2_product_list>tbody:first-child>tr:not(:first-child)>td:nth-child(5) {
    padding-left: 6px;
	padding-right: 6px;
}

#s2_product_list .s2_product_short_description [data-module] {
	margin-top: 1em;
}

#s2_product_list .s2_product_short_description [data-module="event_booking"] table.event-module-booked-dates tbody td {
	background-color: transparent;
	color: #FFFFFF;
}