/*!
Website Name: St. John's Foot Clinic
Version: 1.0
Author: 
Author URI: 
 */

body {
	font-family:      'Open Sans', sans-serif;
	background-color: var(--body-background-colour);
	}

nav {
	background:        var(--site-background);
	background-repeat: repeat;
	background-color:  var(--nav-background-colour);
	max-width:         100%;
	overflow:          hidden;
	}

nav ul {
	list-style:  none;
	margin-left: 60px;
	}

nav ul li {
	display:      inline-block;
	margin:       20px;
	padding-left: 10px;
	}

nav ul li a {
	color:           var(--nav_ul_li_a-colour);
	text-decoration: none; 
}

nav li:hover {
	font-weight:    bold;
	text-shadow:    rgb(3, 3, 3) 1px 1px 1px;
	text-transform: uppercase;
	}

#home {
	background-color:        var(--home-background-colour);
	padding:                 30px 20px 30px 20px;
	color:                   var(--home-colour);
	-webkit-text-fill-color: white;
    -webkit-text-stroke:     1px white;
    filter:                   alpha(opacity=1.0);
	-moz-opacity:            1.0;
	opacity:                 1.0;
	}

#home a:hover {
	font-weight: none;
	}

#push_button {
	border-left:  0px solid black;
	padding-left: 10px;
	text-align:   center;
	}

a:active {
	position: relative;
	top:      1px;
	}


p:last-child:after {
	/* Put something at the end of the paragraph */
	}

#page_container {
	max-width:     95%;
	margin:        0 auto;
	margin-bottom: 10px;
	}

header {
	max-width:        100%;
	margin-bottom:    10px;
	overflow:         hidden;
	border:           0px solid #000000;
	padding:          10px;
	box-shadow:       1px 1px 1px 1px #888888;
	background-color: #ffffff;
/* Add some padding when the topnav is fixed */
    padding-top:      60px;
	}

.logo {
	max-width:        30%;
	float:            left;
	margin-left:      50px;
	}

.header_contact {
	font-size:      1.3em;
	text-transform: uppercase;
	color:          var(--header_contact-colour);
	font-weight:    bold;
	text-align:     center;	
	}

.header_contact_header {
	color:       rgba(0, 0, 0, 0.6);
	font-size:   35px;
	padding:     10px;
	text-shadow: rgba(0, 0, 0, 0.2) 2px 6px 5px, rgba(255, 255, 255, 0.4) 0px -4px 30px;
	}

.header_contact p {
	font-size:      0.8em;
	text-transform: none;
	margin-left:    60px;
	}


.header_contact_container {
	max-width:    70%;
	float:        right;
	margin-right: 150px;
	position:     relative;
	}

.top_container {
	overflow: hidden;
	}

.main_container {
	margin-top:         10px;
	width:              100%;
	min-height:         60px;
	background-color:   var(--main_container-background-colour);
	border-color:       #ffffff;
	-moz-box-shadow:    inset 0 0 6px var(--main_container-box-shadow);
	-webkit-box-shadow: inset 0 0 6px var(--main_container-box-shadow);
	box-shadow:         inset 0 0 6px var(--main_container-box-shadow);
	border-radius:      5px;	
	overflow:           hidden;
	}

.welcome_text {
	padding: 10px;
	width:   43%;
	float:   left;
	color:   var(--welcome_text-colour);
	}

.welcome_text h1 {
	font-size:     2em;
	margin-bottom: 5px;
	margin-left:   20px;
	}

.welcome_text p {
	line-height: 20px;
	margin-left: 20px;
	color:       var(--welcome_text_p-colour);
	padding:     0 10px 10px 10px;
	}

.container {
	margin-top: 30px;
	overflow:   visible;
	}

.slider {
	padding:      10px;
	width:        50%;
	float:        right;
	min-height:   250px;
	margin-right: 20px;
	/* overflow visible to show #slides box-shadow */
	overflow:     visible;
	}

#slides {
	background-color: var(--slides_background-colour);
	display:          none;
	}

.slidesjs-navigation {
	display:      inline;
	float:        left;
	margin-right: 5px;
	}

.slidesjs-pagination li {
	display: inline;
	}

.slidesjs-pagination a {
	margin-left: 5px;
	}

#slides .slidesjs-next {
	margin-right:     5px;	
	position:         absolute;
	right:            0px;
	width:            42;
	height:           42;
	top:              42%;	
	background-image: url(/img/arrow-slide-right.png);	
	z-index:          3000;
	text-indent:      -9999px;
	}

#slides .slidesjs-previous {
	margin-right:     5px;	
	position:         absolute;
	right:            0px;
	width:            42;
	height:           42;
	top:              42%;	
	background-image: url(/img/arrow-slide-right.png);	
	z-index:          3000;
	text-indent:      -9999px;
	}

#slides .slidesjs-stop {
	margin-right:     5px;	
	position:         absolute;
	right:            0px;
	width:            42;
	height:           42;
	top:              42%;	
	background-image: url(/img/arrow-slide-right.png);	
	z-index:          3000;
	text-indent:      -9999px;
	}

#slides .slidesjs-pagination-item {
	float:       right;
	text-indent: -9999px;
	}

#slides .slidesjs-container {
/*
	border:        2px solid var(--slides_slidesjs-container-border);
*/
	max-width:     610px;
	border-radius: 20px;
	box-shadow:    20px 20px 10px #e0e0e0;
	}

main {
	width:            100%;
	overflow:         hidden;
	margin-top:       10px;
	line-height:      25px;
	background-color: var(--main-background-colour);
	border-radius:    10px;	
	display:          block;
	}

main p {
	margin-top :5px;
	}

.main_left p {
	margin-bottom: 15px;
	}
	
.main_left {
	float:         left;
	width:         27%;
	border:        0px dashed var(--main_left-border);
	padding:       10px;
	border-radius: 10px;
	}

.main_left h2 {
	color:        var(--main_left_h1-colour);
	}

.main_left_home {
	float:            left;
	width:            25%;
	border:           1px dashed var(--main_left_home-border);
	margin:           10px;
	padding:          10px;
	border-radius:    10px;
	background-color: var(--main_left_home-background-colour);
	}

.main_left p {
	font-size: 1.0em;
	}

.main_middle {
	width:      35%;
	float:      left;
	margin-top: 10px;
	}

.main_middle h2 {
	color: var(--main_middle_h2-colour);
	}

.main_middle_about {
	width:      70%;
	float:      left;
	margin-top: 10px;
	}

.main_middle_about h2 {
	color: var(--main_middle_about_h2-colour);
	}
	
.main_middle_about_main {
	width:       95%;
	margin:      0 auto;
	padding-top: 10px;
	}

.main_middle_about_main h2 {
	color: var(--main_middle_about_main_h2-colour);
	}


.main_right {
	width:        35%;
	float:        right;
	margin-top:   10px;
	margin-right: 10px;
	}

.main_right h2 {
	color: var(--main_right_h2-colour);
	}

p {
	margin: 10px;
	}

h2 {
	font-size:          20px;
	background-color:   var(--h2-background-colour);
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow:    0 8px 6px -6px black;
	box-shadow:         0 8px 6px -6px black;
	margin-bottom:      10px;
	padding:            10px;
	text-align:         center;
	}

h3 {
	padding-bottom: 10px;
	}


#name {
	}

#email {
	}

#submit {
	background-color: var(--submit-background-colour);
	}

/** Table styles **/

table {
	display: table;    
	}

thead {
	display:        table-header-group;
	vertical-align: middle;
	border-color:   inherit;
	}

tbody {
	display:        table-row-group;
	vertical-align: middle;
	border-color:   inherit;
	}

tfoot {
	display:        table-footer-group;
	vertical-align: middle;
	border-color:   inherit;
	}

table > tr {
	vertical-align: middle;
	}

col {
	display: table-column;
	}

colgroup {
	display: table-column-group;
	}

tr {
	display:        table-row;
	vertical-align: inherit;
	border-color:   inherit;
	}

td, th {
	display:        table-cell;
	vertical-align: inherit;
	padding:        2px 10px 2px 2px;
	}

th {
	font-weight: bold;
	}

/** Treatments **/

.treatments {
	margin-bottom: 20px;
	}

.treatments li {
	text-align:  center;
	line-height: 35px;
	}

.treatments li ul {
	}

.treatments li:hover {
	font-size:  20px;
	background: var(--treatments_li_hover-background);
	}

/** About page **/

.about_image {
	float:                       right;
	margin:                      20px;
	border-radius:               10px;
	box-shadow:                  10px 10px 5px #e0e0e0;
	padding-right:               0px;
}

/** Woking pages **/

.map {
	margin: 10px 20px 10px 20px;
	}


/** blockquote styles **/
.bq2 { 
	width:      100%; 
	overflow:   hidden; 
	border:     1px solid #dde5ed; 
	background: rgb(208,29,22); 
	color:      #002C5F;
	}

.bq2 .source { 
	display:       block; 
	width:         100%; 
	margin-bottom: 5px; 
	font-weight:   bold; 
	font-size:     13px; 
	text-shadow:   0px 1px 0px var(--bq2_source-text-shadow); 
	padding:       6px 11px; 
	background:    var(--bq2_source-background); 
	border-top:    1px solid var(--bq2_source-border-top); 
	border-bottom: 1px solid var(--bq2_source-border-bottom);
	}

.bq2 p { 
	line-height:   19px; 
	margin-bottom: 10px; 
	font-style:    italic; 
	padding-left:  15px; 
	}

.address {
	text-align: center;
	}


.list_main {
	}

.list_main ul {  
	list-style-type: circle;
	margin-left:     10px;
	padding:         10px;
	}

.list_main ul li { 
	line-height:    30px; 
	padding-bottom: 10px;
	}

.appointment   {
	background:           var(--appointment-background);
	background-image:     -webkit-linear-gradient(top, var(--appointment-background), var(--appointment-background));
	background-image:     -moz-linear-gradient(top,    var(--appointment-background), var(--appointment-background));
	background-image:      -ms-linear-gradient(top,    var(--appointment-background), var(--appointment-background));
	background-image:      -o-linear-gradient(top,     var(--appointment-background), var(--appointment-background));
	background-image:      linear-gradient(to bottom,  var(--appointment-background), var(--appointment-background));
	-webkit-border-radius: 5;
	-moz-border-radius:    5;
	border-radius:         5px;
	color:                 var(--appointment-colour);
	font-size:             20px;
	padding:               10px 20px 10px 20px;
	text-decoration:       none;
	width:                 25%;
	text-align:            center;
	box-shadow:            1px 1px 1px 1px var(--appointment-box-shadow);
	}

.appointment a {
	text-decoration: none;
	color:           var(--appointment_a-colour);
	}

.appointment:hover {
	background:       var(--appointment_hover-background);
	background-image: -webkit-linear-gradient(top, var(--appointment_hover-background), var(--appointment_hover-background));
	background-image: -moz-linear-gradient(top,    var(--appointment_hover-background), var(--appointment_hover-background));
	background-image: -ms-linear-gradient(top,     var(--appointment_hover-background), var(--appointment_hover-background));
	background-image: -o-linear-gradient(top,      var(--appointment_hover-background), var(--appointment_hover-background));
	background-image: linear-gradient(to bottom,   var(--appointment_hover-background), var(--appointment_hover-background));
	text-decoration:  none;
	}

.newsflash   {
	background:            var(--newsflash-background);
	background-image:      -webkit-linear-gradient(top, var(--newsflash-background), var(--newsflash-background));
	background-image:      -moz-linear-gradient(top,    var(--newsflash-background), var(--newsflash-background));
	background-image:      -ms-linear-gradient(top,     var(--newsflash-background), var(--newsflash-background));
	background-image:      -o-linear-gradient(top,      var(--newsflash-background), var(--newsflash-background));
	background-image:      linear-gradient(to bottom,   var(--newsflash-background), var(--newsflash-background));
	-webkit-border-radius: 5;
	-moz-border-radius:    5;
	border-radius:         5px;
	color:                 var(--newsflash-colour);
	font-size:             20px;
	padding:               0px 0px 0px 0px;
	text-decoration:       none;
	width:                 25%;
	text-align:            center;
	overflow:              hidden;
	white-space:           nowrap;
	}

.newsflash p {
	padding:           0px 0px 0px 0px;
	text-decoration:   none;
	color:             var(--newsflash_p-colour);
	/* Apply animation to this element */	
	-moz-animation:    newsflash 25s linear infinite;
	-webkit-animation: newsflash 25s linear infinite;
	animation:         newsflash 25s linear infinite;
	}
	
.newsflash a {
	text-decoration: none;
	}
	
.newsflash a:hover {
	text-decoration: none;
	}

/* Move it (define the animation) */
@-moz-keyframes newsflash {
	0%   { -moz-transform: translateX(100%); }
	100% { -moz-transform: translateX(-100%); }
	}
	
@-webkit-keyframes newsflash {
	0%   { -webkit-transform: translateX(100%); }
	100% { -webkit-transform: translateX(-100%); }
	}
	
@keyframes newsflash {
	0%   { 
		-moz-transform: translateX(100%); /* Browser bug fix */
		-webkit-transform: translateX(100%); /* Browser bug fix */
		transform: translateX(100%); 		
		}
	100% { 
		-moz-transform: translateX(-100%); /* Browser bug fix */
		-webkit-transform: translateX(-100%); /* Browser bug fix */
		transform: translateX(-100%); 
		}
	}

.newsflash:hover {
	background:       var(--newsflash_hover-background);
	background-image: -webkit-linear-gradient(top, var(--newsflash_hover-background), var(--newsflash_hover-background));
	background-image: -moz-linear-gradient(top,    var(--newsflash_hover-background), var(--newsflash_hover-background));
	background-image: -ms-linear-gradient(top,     var(--newsflash_hover-background), var(--newsflash_hover-background));
	background-image: -o-linear-gradient(top,      var(--newsflash_hover-background), var(--newsflash_hover-background));
	background-image: linear-gradient(to bottom,   var(--newsflash_hover-background), var(--newsflash_hover-background));
	text-decoration:  none;
	}

.btn {
	background:           var(--btn-background);
	background-image:     -webkit-linear-gradient(top, var(--btn-background), var(--btn-background));
	background-image:     -moz-linear-gradient(top,    var(--btn-background), var(--btn-background));
	background-image:      -ms-linear-gradient(top,     var(--btn-background), var(--btn-background));
	background-image:      -o-linear-gradient(top,      var(--btn-background), var(--btn-background));
	background-image:      linear-gradient(to bottom,   var(--btn-background), var(--btn-background));
	-webkit-border-radius: 5;
	-moz-border-radius:    5;
	border-radius:         5px;
	color:                 var(--btn-colour);
	font-size:             15px;
	padding:               10px 20px 10px 20px;
	text-decoration:       none;
	width:                 35%;
	float:                 center;
	text-align:            center;
	margin:                0 auto;
	}

.btn:hover {
	background:         var(--btn_hover-background);
	background-image:   -webkit-linear-gradient(top, var(--btn_hover-background), var(--btn_hover-background));
	background-image:   -moz-linear-gradient(top,    var(--btn_hover-background), var(--btn_hover-background));
	background-image:   -ms-linear-gradient(top,     var(--btn_hover-background), var(--btn_hover-background));
	background-image:   -o-linear-gradient(top,      var(--btn_hover-background), var(--btn_hover-background));
	background-image:   linear-gradient(to bottom,   var(--btn_hover-background), var(--btn_hover-background));
	text-decoration:    none;
	}

.btn a {
	text-decoration: none;
	color:           var(--btn_a-colour);
	}


/* Contact page */

.contact_links a {
	text-decoration: none;
	padding-left:    5px;
	}

.contact_links a:hover {
	font-weight: bold;
	}

#form {
	background-color: var(--form-background-colour);
	min-width:        300px;
	max-width:        600px;
	margin:           auto;
	font-family:      'Open Sans', sans-serif;
	font-size:        16px;
	box-shadow:       3px 3px 3px var(--form-box-shadow);
	padding:          40px;
	border:           4px solid var(--form-border);
	border-radius:    5px;
	}


#form div {
	margin-top:5px;
	}

#form input, textarea, button {
	width:   100%;
	border:  2px solid var(--form_input_textarea_button-border);
	padding: 3px 5px;
	}

#form label {
	font-weight: bold;
	color:       var(--form-label);
	}



#form button {
	margin-left:       310px;
	border-radius:     7px;
	width:             50%;
	background:        var(--form_button-background);
	background-repeat: repeat;
	color:             var(--form_button-colour);
	cursor:            pointer;
	padding:           10px;
	}

#form button:hover {
	color:            var(--form_button_hover-colour);
	background-color: var(--form_button_hover-background-colour);
	font-weight:      bold;
	}


.required {
	color: var(--required-colour);
	}

.contact_area {
	margin-top:    40px;
	margin-bottom: 40px;
}


.qualification_images {
	margin-top: 100px;
	}

.qual1 {
	padding-right: 15px;
	float:         right;
	}

.qual2 {
	padding-left: 15px;
	float:        left;
	}


.contact_thanks {
	margin:     0 auto;
	text-align: center;
	padding:    40px;
	}

img {
	float:         left;
	padding-right: 5px;
	}

footer {
	background: var(--footer-background);
	max-width:  100%;
	padding:    20px;	
	position:   relative;
	clear:      both;
	}


.copy_left {
	text-align:  left;
	position:    relative;	
	left:        50px;
	color:       var(copy_left-colour);
	line-height: 25px;
	font-size:   16px;
	}

.copy_right {
	text-align: right;
	position:   absolute;
	right:      100px;
	bottom:     10px;
	color:      var(copy_right-colour);
	}

.copy_right a {
	color: var(copy_right_a-colour);
	}

.testimonial_text {
	margin-top:    40px;		
	margin-bottom: 5px;
	}
	
.testimonial_name {
	text-align:    right;
	font-style:    italic;
	margin-bottom: 20px;
	}
	
#cookie-law { 
//    max-width:           940px;
    background:            var(--cookie-law-background); 
    margin:                10px auto 0; 
    border-radius:         17px;
    -webkit-border-radius: 17px;
    -moz-border-radius:    17px;
}
 
#cookie-law p { 
    padding:               10px; 
    font-size:             1.2em; 
    font-weight:           bold; 
    text-align:            center; 
    color:                 var(--cookie-law_p-colour);  
    margin:                0;
}

.contact_thank_you {
	margin: 						0 auto;
	text-align: 					center;
	padding: 						40px;
	color:                          var(--site-text2);
	background-color:               var(--site-colour6);}

.contact_error {
	margin: 						0 auto;
	text-align: 					center;
	padding: 						40px;
	color:                          var(--site-text2);
	background-color:               var(--site-colour6);
}