/* the following with thanks: https://www.shecodes.io/athena/34209-how-to-create-root-variables-for-colors-in-css */
:root
{
	--background_colour: #d6dbdf;	/* a light grey */
	--text_colour: black;
	--caring_text_colour: black;
	--font_style: normal;
}

body 
{
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;  
	background-color: var(--background_colour);	
	font-size: 100%;
	color: var(--text_colour);		
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	/* font-family: 'Times New Roman', Times, serif; */
	/* background-image: url("../works_of_art/large/p_0000245A.jpg"); */
	/* background-repeat: repeat; */
}	

/* the wrapper 'contains' the whole website display */
#wrapper
{
	margin: auto;	/* centres the web page */
  	max-width: 1000px;	/* will scale automatically if smaller than this */
	width: 100%;	/* will use up whatever width is available to a max of 1000px */  
	/* border: 2px solid var(--text_colour); */
}

/* Header styles */
#heading_bar_x
{
	display: inline-block;
	width: 99%;
}

p.float_left_x
{	/* the top heading */
	display: inline-block;
	color: var(--text_colour);
	width: 85%;
	font-size: 2em;
	font-weight: bold;
	font-style: var(--font_style);	/* *************** */
	text-align: center;
	height: 0.05em;
}

.shopping_cart_top_right
{
	display: inline-block;
	width: 14%;
	text-align: center;
	position: relative; top: 0.4em;
}

.header_second_heading
{
	color: var(--text_colour);
	font-size: 1.5em;
	font-weight: bold;
	font-style: var(--font_style);	/* *************** */
	text-align: center;
	position: relative; top: -1.0em;
}

.header_third_heading
{
	color: var(--text_colour);
	font-size: 1.3em;
	font-weight: bold;
	font-style: var(--font_style);	/* *************** */
	text-align: center;
	position: relative; top: -1.0em;
}

h1, h2, h3, h4, h5, #bottom_text
{
	font-style: normal;/* ********************************************* */
	text-align: center;
	color: var(--text_colour);	/* ******************************************* */
}

.prints_h4
{
	position: relative; 
	top: -0.5em;
	margin-left: 5px;
	margin-right: 5px;
}

#UC_header2, #Con_header2
{
	display: inline;
	color: white;
}

#UC_header2 img
{
	width: 35%;  /* makes the image scalable */
	margin-left: 10%;	
}

#Con_header2 img
{
	width: 35%;  /* makes the image scalable */
	margin-left: 10%;	
}

a:link
{
	color: var(--link_colour);
	font-style: var(--font_style);	/* *************** */
}

a:visited
{
	color: var(--text_colour);
	font-style: var(--font_style);	/* *************** */
}

#header3
{
	clear:both;
	padding: 0;
	background-color: black;	
}

#header img
{
	width: 95%;  /* makes the image scalable */
	margin-left: 2.5%;
}

#menu_bar
{  
	display: inline-block;
	width: 88%;	/* originally 77% ****************************************************** */
	margin: auto;	/* centres the menu bar */
}

#menu_bar p
{
	float: right;
	margin-right: 1%;
}

#menu_bar a img,
#bottom_text a img
{
	text-decoration: none;
	outline: none;
	border: 0;
	/*width: 3%;  works in IE but not in FFox or Chrome */
}

.about_button
{
	padding: 1px;
	border: 1px solid var(--text_colour);	/* *************** */
	vertical-align: middle;
	/* margin-top: -0.2em; */
	margin-bottom: -0.5em;
}

.about_button_fb
{
	padding: 1px;
	vertical-align: middle;
	/* margin-top: -0.2em; */
	margin-bottom: -0.5em;
}

#menu_bar_2
{  /* this does centre the menu bar */
	display: inline-block;
	width: 85%;	/* originally 77% ****************************************************** */
	margin-right: auto;
	margin-left: auto;
	margin-top: -0.5em;
	margin-bottom: -0.5em;
	position: relative; top: -1.8em;
}

#menu_bar_2 p
{
	float: right;
	margin-right: 1%;
}

#menu_bar_2 a img
{
	text-decoration: none;
	outline: none;
	border: 0;
	/*width: 3%;  works in IE but not in FFox or Chrome */
}

br.clear_it 
{	/* from: https://css-tricks.com/the-how-and-why-of-clearing-floats/  */
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0;
}

#news_link
{
	color: orange;	
}

td
{
	width: 25%;  /* this works OK - 25% will give 4 table cells across for all browsers except safari!!!!!!!!!*/
	/* note: this gets over-ridden by the adjust_font_sizes function in janesfineart.js to fix the problem with the safari browser*/
}

.table_entry_text
{
	vertical-align: bottom;  /* ********************************************************************************* */
	font-style: var(--font_style);	/* *************** */
	font-weight: 700;
	 	
}

.centre_text
{
	text-align: center;
	font-size: 0.85em;
	color: var(--text_colour);	/* *************** */
}

.table_image_td
{
	vertical-align: top;  /* the top alignment of the images */
	
}

.table_entry_image
{
	width: 80%;  /* this does control the size of the image. The image will display at the % of the width of the table td cells. */
	
}

.table_entry_image a
{
	color: white;  /* to prevent a blue 'link' line around the image */
}

.table_entry_image img
{
	width: 100%;  /* this makes the image scaleable */
	margin-top: 1%; /* to give a small gap between the text above and the image */
	padding-bottom: 5%; /* to give some space between the rows */
}

.about_Jane img 
{
	width: 40%;
	clear: left;
	float: left;
	padding-right: 25px;
	padding-bottom: 1%;
	margin-left: 2%;
}

.about_Jane p
{
	padding-right: 2%;
	padding-left: 2%;	
}

.about_Jane li
{
	margin-left: 2%;
}

.about_heading
{
	text-align: center;
	/* margin-left: 10%;	 */
}

.CV
{
	margin-left: 10%;
	color: var(--text_colour);	
}

.CV_text
{
	color: var(--text_colour);	
}

.underligned
{
	text-decoration: underline;	
}

#beach_portraits

{
	clear: both;	
}

.bp_head
{
	font-size: 1.5em;
	color: black;
	position: relative; top: -0.5em;
	margin-left: 2%;	
}

.bp_text
{
	margin-left: 2%;
	position: relative; top: -1.0em;
	color: black;	
}

.beach_portraits_pic
{
	float: right;
	width: 30%; 
	padding-left: 2%;
	padding-right: 2%;	
}

.courses_heading
{
	position: relative; top: -0.75em;
	color: white;	
}

.sub_head
{
	font-weight: bold;
}

.courses_pic_1
{
	float: right;
	width: 40%; 
	padding-left: 2%;
	padding-right: 4%;
	position: relative; top: -1.0em;		
}

.courses_pic_2
{
	float: right;
	width: 23%; 
	padding-left: 2%;
	padding-right: 4%;	
}

.courses_bigpic
{
	padding-left: 2%;
	padding-right: 2%;		
}

.courses_text_1
{
	margin-left: 4%;
	margin-right: 4%;
	font-size: 1.05em;
	color: white;		
}

.break_1
{
	clear: both;
}

.courses_text_2
{
	margin-left: 4%;
	margin-right: 4%;
	font-size: 1.05em;
	position: relative; top: -1.0em;
	color: white;
}

.scalable_image img {
	width: 100%;  /* makes the image scalable */
	position: relative; top: -1.0em;
}

#prices img
{
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;	
}

.testimonial
{
	margin-left: 2%;
	margin-right: 2%;
	position: relative; top: -0.5em;	
}

.in_line {
	clear: both;
	padding-left: 10%;
}

.enroll_heading
{
	text-align: center;
	font-size: 2.0em;
	position: relative;
	top: -0.5em;	
}

#pass_1_box
{
	margin-left: 1em;
	margin-right: 1em;	
}

.maintext
{
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: var(--text_colour);
}

.maintext_right 
{
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: var(--text_colour);
	text-align: right;
}

.v_align_top 
{
	vertical-align: top;
}

label 
{
	display: block;
	width: 15%;
	float: left;
	margin: 2px 4px 0px 4px;
	text-align: right;
	font-size: 1.1em;
}

#courses_enroll input
{
	font-size: 1.0em;	
}

.help_message_underneath_input
{
	font-style: italic;
	font-size: 1.1em;
	margin-left: 16%;
}

.small_lineheight 
{
	font-size: 0;
	height: 10px;
}

.clear_left 
{
	clear: left;
}

#courses_enroll label.error
{
	text-align: left;
	font-size: 0.8em;
	color: blue;
    font-weight: bold;
	display: block;
	width: 60%;
    margin-left: 11%;
}

#paypal_box
{
	margin-left: 35%;
}

#paypal_box_2
{
	margin-left: 30%;
}

.OK_enroll_message
{
	font-weight: bold;
	margin-left: 25%;
	color: blue;	
}

#scrollable_box
{
	overflow-y: auto;
	height: 500px;
	margin-left: 3%;
	margin-right: 3%;	
}

.testimonials_image
{
	width: 99%;	
}

.testimonials_sub_heading
{
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	position: relative;
	top: -0.5em;
	color: white;	
}

.red_message
{
	color: red;	
}

.blue_message
{
	color: blue;
}

.aqua_message
{
	color: aqua;	
}

.navy_message
{
	color: navy;	
}

.print_types_table
{
	margin-left: 1.3%;
}

.print_types_table td, 
.print_types_table th 
{
	border: 1px black solid;
	font-size: normal;
	vertical-align: top;
}

.print_types_table tr
{
	color: black;
}

.print_field_set
{
	margin: 0 0.5% 0 0.5%;
	color: black;
	border-color: black;
}

.print_legend
{
	font-size: 1.05em;
	color: black;
}

#select_prints
{
	font-weight: bold;	
}

.shopping_cart_message
{
	position: relative;
	top: -0.8em;	
	color: #2c22a1;
	font-weight: bold;
}

.shopping_cart_table
{
	margin-left: 1.0%;
}

.shopping_cart_table td, 
.shopping_cart_table th 
{
	border: 1px black solid;
	font-size: normal;
	vertical-align: top;
}

.shopping_cart_table tr
{
	color: black;
}

.shopping_cart_field_set
{
	margin: 0 0.5% 0 0.5%;
	color: black;
	border-color: black;
}

.shopping_cart_legend
{
	font-size: 1.05em;
	color: black;
}

p.check_cart_total
{
	color: black;
	width: 85%;
	font-size: 1.5;
	font-weight: bold;
	text-align: right;
	height: 0.05em;
}

.button 
{
	padding: 5px;
	font-size: 1.2em;
	border: 2px solid black;
	font-weight: bold;
	text-decoration: none;
}

p.checkout_total
{
	color: black;
	width: 96.5%;
	font-size: 1.5;
	font-weight: bold;
	text-align: right;
	height: 0.05em;
}

.red_dot 
{
  height: 8px;
  width: 8px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

.stop_iframe_button
{
	font-weight: bold;
	border: 2px solid aqua;
	cursor: pointer;
	margin-left: 32.5%;
	color: black;
	
}

#container
{
	/* display: inline-block; */
	float: left;
}

#left_side_container
{
	float: left;
	width: 45%;
	
}

#right_side_container
{
	float: left;
	width: 53%;
}

.solwata
{
	width: 93%;
	margin-left: 3%;
	margin-top: 2em;
	
}

/* ****************************************************************************** */
.general_box
{
	margin: 0 2% 0 2%;
	/* display: inline-block; */
	float: left;
}

.left_box
{
	width: 49.0%;
	float: left;
	/* margin-top: 1.0%; */
	margin-left: 0.9%;
	border: 1px solid black;
}

.right_box
{
	width: 49.0%;
	float: left;
	/* margin-top: 1.0%; */
	border: 1px solid black;
}

.in_box_image
{
	width: 95%;
	margin-left: 2%;
}

.image_header
{
	color: var(--text_colour);
	text-align: center;
	font-weight: bold;
}