html { background-color: #fff; margin: 0; padding: 0; }
html#form {background-color: transparent; }
body { background-color: #fff; color: #333; font-size: .85em; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; margin: 0; padding: 0; }
html#form body {background-color: transparent; }

a { color: #333; outline: none; text-decoration: underline; }
a:link,
a:visited,
a:active, 
a:hover { /*color: #333;*/ }
a:hover { /*background-color: #c7d1d6;*/ }

header, 
footer, 
hgroup,
nav, 
section { display: block; }

mark { background-color: #a6dbed; padding-left: 5px; padding-right: 5px; }

.float-left { float: left; }
.float-right { float: right; }

.clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { color: #000; margin: 0.3em 0 0.1em 0; padding: 0; }

h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.15em; }
h4,
h5, 
h6 { font-size: 1em; }

h5 a:link, 
h5 a:visited, 
h5 a:active { padding: 0; text-decoration: none; }


/* main layout
----------------------------------------------------------*/

#header {}
#body { background-color: #efeeef; clear: both; padding-bottom: 35px;}

.content-wrapper { padding: 20px 100px; }


/* site title
----------------------------------------------------------*/
.site-title { color: #c8c8c8; font-family: Rockwell, Consolas, "Courier New", Courier, monospace; font-size: 2.3em; margin: 0; }
.site-title a, 
.site-title a:hover, 
.site-title a:active { background: none; color: #c8c8c8; outline: none; text-decoration: none; }


/* login
----------------------------------------------------------*/
#login { display: block; font-size: .85em; margin: 0 0 10px; text-align: right; }
#login a { background-color: #d3dce0; margin-left: 10px; margin-right: 3px; padding: 2px 3px; text-decoration: none; }
#login a.email { background: none; margin: 0; padding: 0; text-decoration: underline; }
#login ul { margin: 0; }
#login li { display: inline; list-style: none; }


/* menu
----------------------------------------------------------*/
ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; }
ul#menu li { display: inline; list-style: none; padding: 0 15px 0 0; }
ul#menu li a { background: none; color: #999; text-decoration: none; }
ul#menu li a:hover { color: #333; text-decoration: none; }


/* page elements
----------------------------------------------------------*/
/* featured */
.featured { background-color: #fff; }
.featured .content-wrapper { font-size: 1.25em; background-color: #7ac0da; color: #3e5667; box-sizing: border-box;}
.featured .content-wrapper div { display: inline-block; width: 45%; vertical-align: top; }
.featured h1, 
.featured h2 { color: #fff; }
.featured h2 {}
.featured p { font-size: 1.1em; }

/* ordered list */
ol.round { list-style-type: none; padding-left: 0; }
ol.round li { margin: 25px 0; padding-left: 45px; }
ol.round li.zero { background: url(".~/Images/orderedList0.png") no-repeat; }
ol.round li.one { background: url(".~/Images/orderedList1.png") no-repeat; }
ol.round li.two { background: url(".~/Images/orderedList2.png") no-repeat; }
ol.round li.three { background: url(".~/Images/orderedList3.png") no-repeat; }
ol.round li.four { background: url(".~/Images/orderedList4.png") no-repeat; }
ol.round li.five { background: url(".~/Images/orderedList5.png") no-repeat; }
ol.round li.six { background: url(".~/Images/orderedList6.png") no-repeat; }
ol.round li.seven { background: url(".~/Images/orderedList7.png") no-repeat; }
ol.round li.eight { background: url(".~/Images/orderedList8.png") no-repeat; }
ol.round li.nine { background: url(".~/Images/orderedList9.png") no-repeat; }

/* content */
article { float: left; width: 70%; }
aside { float: right; width: 25%; }
aside ul { list-style: none; padding: 0; }
aside ul li { background: url(".~/Images/bullet.png") no-repeat 0 50%; padding: 2px 0 2px 20px; }
.label { font-weight: 700; }

/* login page */
#loginForm { border-right: solid 2px #c8c8c8; float: left; width: 55%; }
#loginForm .validation-error { display: block; margin-left: 15px; }
#loginForm .validation-summary-errors ul { margin: 0; padding: 0; }
#loginForm .validation-summary-errors li { display: inline; list-style: none; margin: 0; }
#loginForm input { width: 250px; }
#loginForm input[type="checkbox"],
#loginForm input[type="submit"],
#loginForm input[type="button"],
#loginForm button { width: auto; }
#socialLoginForm { margin-left: 40px; float: left; width: 40%; }
#socialLoginForm h2 { margin-bottom: 5px; }
#socialLoginList button { margin-bottom: 12px; }
#logoutForm { display: inline; }

/* contact */
.contact h3 { font-size: 1.2em; }
.contact p { margin: 5px 0 0 10px; }
.contact iframe { border: 1px solid #333; margin: 5px 0 0 10px; }

/* forms */
fieldset { border: none; margin: 0; padding: 0; }
fieldset legend { display: none; }
fieldset ol { padding: 0; list-style: none; }
fieldset ol li { padding-bottom: 5px; }
label { display: inline-block; font-size: 1.2em; font-weight: 600; }
label.checkbox { display: inline; }
input,
textarea { border: 1px solid #e2e2e2; background: #fff; color: #333; font-size: 1.2em; margin: 5px 0 6px 0; padding: 5px; width: 300px; }
textarea { font-family: inherit; width: 500px; }
input:focus, 
textarea:focus { border: 1px solid #7ac0da; }
input[type="checkbox"] { background: transparent; border: inherit; width: auto; }
input[type="submit"],
input[type="reset"],
input[type="button"],
button { border: 0px solid #787878; cursor: pointer; font-size: 1.2em; font-weight: 600; padding: 20px; margin-right: 8px; width: auto; border-radius: 5px;}
input[type="submit"] {background: #29ad3c; color: #fff;  padding: 20px 60px;}
input[type="submit"]:hover {background: #379645;}
td input[type="submit"],
td input[type="button"],
td button { font-size: 1em; padding: 4px; margin-right: 4px; }

/* info and errors */
.message-info { border: 1px solid; clear: both; padding: 10px 20px; }
.message-error { clear: both; color: #e80c4d; font-size: 1.1em; font-weight: bold; margin: 20px 0 10px 0; }
.message-success { color: #7ac0da; font-size: 1.3em; font-weight: bold; margin: 20px 0 10px 0; }
.error { color: #e80c4d; }

/* styles for validation helpers */
.field-validation-error { color: #e80c4d; font-weight: bold; }
.field-validation-valid { display: none; }
input.input-validation-error { border: 1px solid #e80c4d; }
input[type="checkbox"].input-validation-error { border: 0 none; }
.validation-summary-errors { color: #e80c4d; font-weight: bold; font-size: 1.1em; }
.validation-summary-valid { display: none; }


/* tables
----------------------------------------------------------*/
table { border-spacing: 1px; margin-top: 0; border: 0 none; }
th { font-size: 1.2em; text-align: left; border: none 0px; padding: 5px 15px 5px 5px; background: #7ac0da; white-space: nowrap;}
th a { display: block; position: relative; }
th a:link, 
th a:visited, 
th a:active, th a:hover { color: #333; font-weight: 600; text-decoration: none; padding: 0; }
th a:hover { color: #000; }
th.asc a, th.desc a { margin-right: .75em; }
th.asc a:after, th.desc a:after { display: block; position: absolute; right: 0em; top: 0; font-size: 0.75em; }
th.asc a:after { content: '▲'; }
th.desc a:after { content: '▼'; }
td { padding: 2px 5px 2px 5px; border-bottom: 0px solid #e2e2e2; white-space: nowrap; vertical-align: top;}
tr.pager td { padding: 0 0.25em 0 0; }

table.shophoursruler,
table.shophoursday { border-spacing: 0; margin: 0; padding: 0; box-sizing: border-box;}
table.shophoursruler td,
table.shophoursday td { padding: 0; border: 0; text-align: center; height: 20px; vertical-align: middle;}

table.shophoursruler { position: relative; top: 0px; }

table.shophoursruler td { border-left: 1px solid #fff; color: #fff; font-size: 10px; width: 60px;}
table.shophoursday {background: #333; margin-top: -20px;}

table.overview tr:hover {background: #d3dce0;}


/* Shop details
----------------------------------------------------------*/
#shopinfo #location,
#shopinfo #shopinfodetails,
#shopinfo #equipmentinfo,
#shopinfo #shopimages,
#shopinfo #openinghours { width: 75%; margin: 0 auto 2em auto; }
#shopinfo #location {width: 100%; text-align: right;}
#shopinfo #shopinfodetails div {display: inline-block; margin: 0 100px 0 0; vertical-align: top;}


/* Google maps
----------------------------------------------------------*/
#map {width: 100%; height: 250px;}

/* Content
----------------------------------------------------------*/
.content { }

.content a.nextstep {display: inline-block; padding: 10px 25px; background: #29ad3c; color: #fff; text-decoration: none; font-weight: bold; letter-spacing: 1px; font-size: 18px;}
.content a.nextstep:hover {background: #078018;}

.content .byColumn { display: flex; margin-top: 50px;}
.content .byColumn div {flex-grow: 1; padding: 50px; }
.content .byColumn div.leftcolumn { flex-basis: 20%;  min-width: 350px; border: 1px solid #999; flex-grow: 0.25;}
.content .byColumn div.leftcolumn form div { background: #d3dce0; padding: 15px; margin-top: 5px;}

.content .byColumn img { width: 200px;}
.content .byColumn img.pop { width: 100%;}
.content .byColumn p.status {background: #a6dbed; padding: 15px;}

.content .buttons { display: flex; flex-wrap: wrap; margin-bottom: 50px; max-width: 800px; margin: 0 auto;}
.content .buttons .button {margin: 10px; flex-grow: 1; background: #29ad3c; flex-basis: 0%;}
.content .buttons .button:hover {background: #078018;}
.content .buttons .button:nth-child(1)  {flex-basis: 100%; }
.content .buttons .button a { display: block; padding: 85px 35px 35px 35px; color: #fff; /*white-space: nowrap;*/  font-size: 24px; text-decoration: none; font-weight: bold; letter-spacing: 1px;}
.content .buttons .button a span {font-size: 11px; line-height: 14px; display: inline-block;}


/* Form 
----------------------------------------------------------*/
html#form div.form {width: 100%; max-width: 650px; margin: 0 auto;}
html#form div.form p {color: #9c7900;}
html#form div.form h2 {font-size: 1.5em; color: #9c7900; font-family: "Helvetica Neue", Helvetica,Arial,sans-serif; margin-top: 40px;}
html#form div.form label { font-size: 1.35em; line-height: 1em; color: #e2e2e2; font-family: "Helvetica Neue", Helvetica,Arial,sans-serif; font-weight: normal; vertical-align: top; margin-top: 15px; width: 210px; padding-right: 25px;}
html#form div.form label span {font-size: 0.7em; display: inline-block; font-style: italic; color: #999;}
html#form div.form input,
html#form div.form select {padding: 8px 15px; border: 0; background: #7a7a7a; color: #fff; width: 60%; font-family: unset; font-size: 1.25em; margin: 0 0 10px 0;}
html#form div.form select {padding: 11px 15px;}
html#form div.form select.small,
html#form div.form input.small {width: 40%;}
html#form div.form input[type=submit] {margin-top: 25px; padding: 15px 50px; background: #9c7900; font-size: 1.25em; color: #fff; margin-left: 235px; color: #fff; letter-spacing: 2px;}

/* Footer
----------------------------------------------------------*/
#footer {color: #999; font-size: 0.8em;}


@media screen and (max-width: 479px) {

	html#form .content-wrapper { padding: 10px; }
	
	html#form div.form label { width: 100%; padding-right: 0; padding-bottom: 10px;}
	html#form div.form input,
	html#form div.form select {width: 100%;}
	html#form div.form select.small,
	html#form div.form input.small {width: 100%;}
	html#form div.form input[type=submit] {margin-left: 0;}

}
@media screen and (max-width: 767px) {

	html#form .content-wrapper { padding: 10px; }

}