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



body{
width:100%;
height:100%;
margin:0;
padding:0;
background:#ffffff;
color:#333333;
font-family:sans-serif;
font-size:100%;
text-align: center;
}


/* ----- PARAGRAPHS ----- */

p{
color:#333333;
font-size:1em;
margin: 0.5em 0 0.3em 0;
}

#main_content p{
color:#333333;
font-size:1em;
color: #333333;
font-size: 1em;
}


#rightbar p{
color:#333333;
font-size:1em;
margin: 0.5em 0 0.3em 0;
}




/* ----- IMAGES ----- */

.l_img{
float:left;
margin:0px 20px 10px 0px;
border: none;
clear:left;
background-image: url"../imgs/build/img_place.gif";
background-repeat: no-repeat;
background-position: center;
}
.r_img{
float:right;
margin: 0px 0px 10px 20px;
padding:0px 10px 0px 0px;
border: none;
clear:right;
background-image: url"../imgs/build/img_place.gif";
background-repeat: no-repeat;
background-position: center;
}
*html.r_img{
float:right;
margin: 0px 0px 0px 10px;
padding:0px 10px 0px 0px;
border: none;
clear:right;
background-image: url"../imgs/build/img_place.gif";
background-repeat: no-repeat;
background-position: center;
}

.l_icon{
float:left;
margin:-2px 10px 0px 0px;
border: none;
}

.l_img_article{
float:left;
margin:0px 10px 10px 0px;
padding:10px 0 0px 0;
border: none;
clear:left;
background-image: url"../imgs/build/img_place.gif";
background-repeat: no-repeat;
background-position: center;
}
.r_img_article{
float:right;
margin: 0px 0px 10px 10px;
padding:10px 0 0px 0;
border: none;
clear:right;
background-image: url"../imgs/build/img_place.gif";
background-repeat: no-repeat;
background-position: center;
}


.side_img{
float:right;
margin: 0px 10px 10px 20px;
border: none;
clear:right;
background-image: url"../imgs/build/img_place.gif";
background-repeat: no-repeat;
background-position: center;
}

img a{
border:none;
text-decoration:;
}
img a:hover{
border:none;
}



/* ----- LINKS ----- */
a{
color:inherit;
text-decoration:underline;
font-weight: bold;
}

a:visited, a:active, a:focus{
color:inherit;
text-decoration: none;
border: 0px;
}

a:hover{
color:inherit;
text-decoration: none;
opacity: 0.7;
font-weight: bold;
}

.morelink{
margin:-4px 0 0px 0;
color:inherit; }

/*-------- LISTS ----------*/
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}

li{
list-style: none;
text-indent: inherit;

}

/* ----- HEADINGS ----- */

h1{
font-size:1.8em;
font-weight: bold;

margin:0;
}
h2{
font-size:1.5em;
font-weight:bold;

margin:0px 0px 0px 0px;
}
h3{
font-size:1.2em;
font-weight:normal;

margin:0px 0px 0px 0px;
}
h4{
font-size:1em;
font-weight:normal;
margin:0 0 0 0;
}
.h4{
font-size:1em;
font-weight:normal;
margin:0px;

}
h5{
font-size:1em;
font-weight:normal;
margin:0;
}


#container{
min-height: 100%;
margin: 30px 40px 30px 40px;
text-align:left;
position: relative;
}






#top_banner{
width:100%;
height:160px;
margin:0 0 2em 0;
}

#top_logo{
height:auto;
width:100px;
float: left;
}
.logo{
border:0;
width: 100%;}



#main_navbar{
font-size: 1em;
margin:30px 0 0 30px;
float:left;}


ul.main_nav{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
overflow: hidden;
}

.main_nav.icon {
  display: none;
}

.main_nav li{
display: inline;
list-style-type: none;
}
.main_nav a { 
padding:0;
margin:0px 0 0px 10px;
}
.main_nav a:link, #main_nav a:visited{
color: #333333;
text-decoration: none;
}
.main_nav a:hover{
color: #333333;
text-decoration: underline;
    
    
}


/*-- end of main nav --*/




#socialinks{
float: right;
}
.social{
width: 25px;
height: auto;
display: inline;
}
#socialinks a{
opacity: 0.8;
}
#socialinks a:hover{
opacity: 1;
}


#top_navbar{
float: right;
font-size: 0.9em;
text-align: right;
}

ul#top_nav{
float:right;
margin: 0px 5px 1.5em 0;
padding-left: 0;
white-space: nowrap;
color: #ffcc99;
}
#top_nav li{
display: inline;
list-style-type: none;
margin:0px 0 0px 10px;
}
#top_nav a{
padding:0;
margin:0; 
}

#top_nav a:link, #top_nav a:visited{
color: #333333;
text-decoration: none;
}
#top_nav a:hover{
color: #333333;
text-decoration: underline;
}

/*-- end of top nav --*/

#searchbox button {
    background-color: transparent;
    border: 0;
}

#searchbox{
display: inline;
margin:20px 0px 0px 0px;
height:1em;
}
.form_textbox{
height:2em;
border: none;
border-bottom: 1px solid #000;
color: #000;
margin:0px 0 0 0;
padding:0 0 0 0;
}

input:focus;
{background-color:#669999;
border:none;}

.form_imgbut{
vertical-align: top;
margin: 0px 0px 0px 0px;
margin:0px 0 0 0;
padding:0.25em;
}



#rightbar{
float:right;
width:30%;
min-height:100%;
margin:0;
text-align:left;
clear: right;
}

#address{
margin:0;
}

#opening{
margin: 1em 0 0 0;
    font-size: 0.9rem;
}

#infotext{
margin: 1em 0 0 0;
}

#top_content{
width:100%;
min-height:220px;
margin:0;
padding:0px;
text-align:left;
}


#main_content{
width:65%;
margin:0px;
text-align:left;
float:left;
}



.introtext{
    margin: 0 0 2em 0;
      color:#0099cc;

}

/* -- articles / news box --*/

.article{margin: 3em 0 0 0;
    }

#newsbox{
}


/*------g39 titles etc------*/

.synopsis_txt_g39{   
margin: 0.2em 0 0 0;
    color:#0099cc;
}

.title_g39{
font-weight: bold;
color:#0099cc;}

.title_g39 a{
    text-decoration: none;
    color:#0099cc;
}

.date_g39{
    margin: 0.2em 0 0 0;
    color:#0099cc;
}

/*------warp itles etc-------*/
.synopsis_txt_warp{   
margin: 0.2em 0 0 0;
    color:#FF3300;
}

.title_warp{
font-weight: bold;
 color:#FF3300;}

.title_warp a{
    text-decoration: none;
     color:#FF3300;
}

.date_warp{
    margin: 0.2em 0 0 0;
     color:#FF3300;
}


.topnews_head_img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin: 0.5em 0 0 0;
}


.sidebar_img{
    width: 100%;
    max-height:300px;
    object-fit: cover;
    margin: 0.5em 0 0 0;
}

/* -------------SEAR RESULTS PAGE -----------------------*/
.search_res{
padding:0 0 0 0;
margin:0px 0 0px 0;
border-bottom: 1px solid #f5f9f9;
}

/* ------------------- PROGRAMME PAGE -------------------*/


#programme_body{
margin:20px 0 0 0px;
padding:0px;
text-align:left;
}


#exhibition_menu {
clear: right;
width:300px;
margin:600px 0 0 0;
padding:10px;
background-color: #f5f9f9;
}


.gallery_tmb {
float: left;
margin:0px;
padding:0px;
border:1px solid #ccc; 
width:80px; 
height:80px;
}


#exhibition_gallery {
width: 300px;
float:right;
margin:115px 0px 10px 80px;
background-color: #fff;
text-align:left;
}

#right_menu{
padding:10px;
position: relative;
background-color: #fff5f5;
}


#footnotes ul{
text-decoration: none;
}
#footnotes li{
display: block;
}

/* ------------------------ARTISTS PAGE ------------------------*/

#artist_pagination {
	position:relative;
	top:20px;
	display:block;
	text-align:left;
	height:40px;
	font-weight:normal;
	margin:10px 0 0 0;
    width: 50%;
}


#artist_pagination a:link, #artist_pagination a:visited{
	font-size:1em;
	padding:4px;
	text-decoration:none;
	font-weight:normal;
	height:2em;
}

#artist_pagination a:hover {
}

#artist_pagination .active_artist_link {
	margin-right:2px;
	font-size: 1.5em;
	text-decoration:none;
	cursor:default;
}

#artist_pagination .disabled_artist_pagination {
	margin-right:4px;
	text-decoration:none;
	cursor:default;
}

#artist_body{
margin:0px 0 0 0;
width:580px;
padding:0px;
text-align:left;
}
#artist_grid{
position: relative;
left:0px;
top:0;
clear:left;
float:left;
width:90%;
}


.art_tmb{
float:left;
border:0;
padding:0;
}

.no_border{
border:0;}

#artist_menu{
width:100%
height:inherit;
padding:10px;
position: relative;
background-color: #fff5f5;
}


/* ----------------- ARTIST THUMBNAIL GALLERY -------------------- */

#art_gallerybox{
    width:100%;
    height: 300px;
    margin-top:35px;
}



img {border:0;}

.art_img{
margin:4px 0 0 0;
}



#art_img_tmb {
border:0;}
	
#art_img_tmb li {
	 opacity: .5; 
	 float: left; 
	 display: block;
	 width: 80px; 
	 height: 80px; 
	 background-position: 50% 50%;
	 cursor: pointer;
	 border:0px;
     outline: 1px solid #fff; 
	 margin-right: 10px; 
	 margin-bottom: 10px; 
	 }
	
#art_img_tmb li:a {border:0px;}

	
#art_img_tmb li.active, #art_img_tmb li:hover {border:0;opacity: .99 /* safari bug */ }

/* ----------------------ABOUT--------------------------*/

#about_gallerybox{position: relative; width:400px; margin-left:20px; margin-right:0px; height: 200px;}
*html #about_gallerybox{position: relative; width:400px; margin-left:20px; height: 200px;}

img {border:0;}

.about_img{
margin:4px 0 0 30px;
}

#img_tmb {
border:0;}
	
#img_tmb li {
	 opacity: .5; 
	 float: left; 
	 display: block;
	 width: 80px; 
	 height: 80px; 
	 background-position: 50% 50%;
	 cursor: pointer;
	 border:0px;
     outline: 1px solid #fff; 
	 margin-left: 10px; 
	 margin-bottom: 10px; 
	 }
	
#img_tmb li:a {border:0px;}

	
#img_tmb li.active, #img_tmb li:hover {border:0;opacity: .99 /* safari bug */ }

/* ----------------------SHOP------------------------- */
#shop_content{
width:900px;
margin:20px 0px 30px 30px;
padding:0 0 0 0;
text-align:left;
}

.shop_item {
margin:0 0px 0 0px;
padding:20px 0 20px 0px;
border-bottom: solid 1px #edf3f3;
}

.shop_tmbs{
float:left;
margin:20px 0 0 0;
}

.shop_tmb{
float:left;
margin:0 5px 5px 0;
}

.shop_desc{
margin:0 0 0 300px;
}

#shop_basket{
width:200px;
height:inherit;
padding:10px;
margin: 0 0 0 80px;
background-image: url("../imgs/build/dot_header_bkgd.gif");
position: relative;
top:90px;
right:0;
}
#basket{
text-align: right;
padding:5px;
width:relative;
background-color: #fff;
}

.basket_item{
line-height: 1.2em;}
.basket_qant{
margin:0 0 0 1em;
line-height: 1.5em;}
.basket_desc{
line-height: 1.5em;}
.basket_item_price{
color: #ff6633;
}

.postage{
line-height: 1.5em;
color: #9bbbbc;
}
.current_postage{
line-height: 1.5em;
color: #5e8182
}

.basket_icon{
margin: 0 0 0 0;}

.basket_total{
font-size: 1em;
line-height: 1.5em;
color: #ff6633;
}

.shopform_imgbut{
position: relative;
left:80px;
height: 22px;
margin:0;
padding:4px;
}

.shopform_textbox{
height:20px;
background-color: #dfefef;
border: 1px solid #fff;
color: #5e8182;
margin:-5px 0 0 0;
padding:3px 0 0 4px;
}

.shopform_submit{
vertical-align: top;
color: #fff;
background-color:transparent;
border: none;
margin: 0px 78px 0px 0px;
height:22px;
z-index:24;
}
* html .shopform_submit{
font-size:0.9em;
vertical-align: top;
color: #fff;
background-color:transparent;
border: none;
margin: 0px 0px 0px -178px;
height:22px;
z-index:24;
}

/* --------------------- INFO PAGE ---------------------------- */

.info_address{
color:#5e8182;
}
	



/* ---------------------NEW TOOL TIPS for images on ARTIST page ---------------------*/

/*
  style the list which contains the links
*/
ul#cmd {
  list-style:none;
  top:0;
}

/* 
  this could be applied to the links, but IE needs this on <li>
*/
ul#cmd li {
  margin:10px 10px 14px 0px;
  border:0;
  
}

/*
  static link styling
*/
ul#cmd a {
  position:relative; /* to create a new positioning baseline */
  float:left;
  display:inline;
  border: 1px solid #fff;
  width:80px;
  height:80px;
  margin:0;
  padding:0;
  text-decoration : none;
  cursor : pointer;
}

/*
  styles for the span (kept opff screen until needed
*/
ul#cmd a span {
  position : absolute;
  top : -9000px;
  left : -9000px;
  display : inline;
  width:40em;
  border:0 0 0 0;
  background-image: url("../imgs/build/arrow-up.png");
  cursor : pointer; /* needed for opera */
}

/* 
  hover/focus styles of link
*/
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {
  border: 1px solid #5e8182;
  outline: none;
font-weight: normal;
font-style: italic;
font-size: 0.8em;

}

/*
  re-postion the pre-styled span on hover/focus
*/
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
  top : 85px;
  left :0px;
  padding:0 0 0 14px;
  background-image: url("../imgs/build/arrow-up.png");
  background-position: left;
background-repeat: no-repeat;
float:left;
clear:right;

}

/*-------------css TOOL TIPS----------------*/

a.info {
    position:relative; /*this is the key*/
    z-index:24;
    text-decoration:none;
    margin: 6px 0 6px 0 ;
    }

a.info:hover{
	z-index:25; 
	text-decoration:none ;
	}

a.info span{
	display: none;
}

a.info:hover span{ /*the span will display just on :hover state*/
	
    display:block;
    padding:6px;
    position:absolute;
    top:0em; left:14em; width:12em;
    text-align: center;
    text-decoration:none;
    }
    




/* -------------------- collapsing menu --------------*/
/* Actual menu CSS starts here */
ul#menu {
 	 list-style-type: none;
 	 margin: 0;
 	 padding: 0;
}

ul#menu ul {
  	display: none;
  	list-style: none;
  	margin: 0;
  	padding:3px 0 3px 0;
    
}

ul#menu li, ul#menu a {
	display:block;
  	text-decoration:none;
  	outline: none;
    padding:3px 0 3px 0;
  	}

ul#menu li {
  	background:transparent;
}


ul#menu ul li {
 	border-bottom: none;
 	outline: none;

}

ul#menu ul li a:hover {
  	border-bottom: none;
     padding:3px 0 3px 0;
}

ul#menu ul a{
	background:transparent; 
	text-decoration:none;
}

ul#menu a {
  	text-decoration: none;
  	outline: none;
    font-weight: normal;
}

ul#menu a:hover {
    border-bottom: 1px solid #669999;
     padding:3px 0 2px 0;
}

ul#menu a.active {
     border-bottom: 1px solid #669999;
}

menu_top {
	}

.artist_loc{
	clear:left;
	font-size:0.8em;
}

/* ----------CONTACT FORM -------------*/

div.contactbox{
	margin-top:5em;
}

div.contactbox label{
	display:block;
	margin-bottom:10px;
	height:20px;
	color: #5e8182;
}

label{
	display:block;
	margin-bottom:10px;
	height:20px;
	color: #5e8182;
}

div.contactbox span{
	display:inline;
	float:left;
	width:200px;
	padding-right:6px;
	margin-top:5px;
	text-align:right;
	font-weight:bold;
	color: #5e8182;
}

.spacer{
	margin-top:0px;
	margin-left:80px; 
	margin-bottom:16px;
}

.cform_textbox{
height:20px;
background-color: #dfefef;
border: 1px solid #fff;
color: #5e8182;
margin:0px 0 0 20px;
padding:3px 0 0 4px;
}
.cform_select{height:20px;
background-color: #dfefef;
border: 1px solid #fff;
color: #5e8182;
margin:-16px 0 0 225px;
padding:3px 0 4 4px;
}
.signup_imgbut{
height: 22px;
margin:30px 70px 0 0px;
padding:4px;
}
.cform_imgbut{
height: 22px;
margin:20px 0px 0 220px;
padding:4px;
}
.cform_submit{
vertical-align: top;
color: #fff;
background-color:transparent;
border: none;
margin: 0px 0px 0px 14px;
height:22px;
z-index:24;
}
* html .cform_submit{
vertical-align: top;
color: #fff;
background-color:transparent;
border: none;
margin: 0px 0px 0px -70px;
height:22px;
z-index:24;
}

.radio {
	display:inline;
	margin-top:-4px;
	margin-right:20px;
	margin-left:10px;
	text-align:right;
	font-weight:bold;
}


/* -------FOOTER -------*/

/*--old footer---*/
#leftfoot{float:left;}
#rightfoot{float:right; width:50%;}
.button{ border: none;}



#foot_container{
clear:both;
width:100%;
position: relative;
bottom:0;
padding:2em 0 0 0;
}
#footer{
width:100%;
/*background: rgba(102, 153, 153, 0.1) ;*/
border-top: 1px solid #669999;
text-align: left;
}
#foot_content{
padding:40px;
}



#top_foot{
    margin: 30px 0 0 0;
}

#footcol_1{
    float: left;
    width: 30%;
}

#footcol_2{    
    float: left;
      width: 30%;
}

#footcol_3{   
    float: right;
      width: 36%;
}

#bottom_foot{
   padding: 1em 0 0em 0;
    clear: left;
}


#footmeta{   
    float: left;
      width: 40%;
    font-size: 0.8em;
}

#footaddress{
    margin: 1em 0 0 0;
}
#foot_logos{
float: left;
width: 60%;

}
.foot_logo{
float:right;
margin:10px;
height: 50px;
width: auto;
}
.foot_text{
}
#foot_navbar{
font-size: 1em;
margin:2em 0px 10px 0px;
}
ul#foot_nav{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
column-count: 2;
column-gap: 10px;
}

#foot_nav li{
display:block;
list-style-type: none;
margin:0px 0px 0.3em 0px;
}
#foot_nav a {
padding:0;
}
#foot_nav a:link, #lang_nav a:visited{
text-decoration: none;
}
#foot_nav a:hover{
text-decoration: underline;
}

/*-- end of footer nav --*/




/*----------------------------- MOBILE STYLES ----------------------------*/

@media only screen and (max-width: 900px)
{
    
    
    #main_content{
width:100%;
margin:0px;
text-align:left;
float:left;
}
    
.logo{
width: 100%;
    }

#top_content{
width:100%;
min-height:220px;
margin:0;
padding:0px;
text-align:left;
}

#top_banner{
width:100%;
margin:0 0 5em 0;
}
    
    #top_navbar{
        float: inherit;
    }
  

   
#rightbar{
width:100%;
clear: left;
margin: 2em 0 0 0;
border-top: 1px solid;
}

#address{
margin:2em 0 0 0;
}

#opening{
margin: 1em 0 0 0;
    font-size: 0.9rem;
}

#infotext{
margin: 1em 0 0 0;
}

    
  .mainnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
    
#main_navbar{
    font-size: 1em;
    margin: 0px 0 0 0px;
    float: left;
    clear: left;}
 

#myMainnav{
    font-size: 1.3em;
    margin: 2em 0 2em 0;
    float: left;
    clear: both;
    display: block;
    display: grid;
}

    /*------MOBILE FOOTER--------*/
    

#footcol_1{
    float: left;
    width: 100%;
}

#footcol_2{    
    float: left;
      width: 100%;
    margin: 0 0 2em 0;
}

#footcol_3{   
    float: left;
      width: 100%;
    margin: 0 0 2em 0;
}

#bottom_foot{
   padding: 1em 0 0em 0;
    clear: left;
    
}

#footmeta{   
    float: left;
      width: 100%;
    font-size: 0.8em;
}

#footaddress{
    margin: 1em 0 0 0;
}
#foot_logos{
float: left;
width: 100%;

}
.foot_logo{
float:left;
margin:10px;
}
   
    /*------MOBILE ARTISTS PAGE--------*/
    
    
#artist_menu{
width:100%;
height:inherit;
padding:10px;
position: relative;
}  
    
#artist_pagination{
        clear: both;
    }

 
}
    
/*----------------------------- END OF MOBILE STYLES ----------------------------*/


.img_caption{
clear:left;
margin:1em 0 1em 0;
font-style: italic;
letter-spacing: 0.03em;
    
}
.img_caption a:link, .img_caption a:visited{}
.img_caption a:hover{}

.footnotes{
clear:left;
margin:1em 0 0px 0;
}
.footnotes a:link, .footnotes a:visited{}
.footnotes a:hover{}

.footnotes li {list-style: none;
display:inline;
content: ","; 
}
/*-.footnotes li a, .footnotes li a:link, .footnotes li a:visited {color:#ff6633; text-decoration: none;}
.footnotes li a:hover{color:#ffab33; text-decoration: underline; }




/* --------------------------- PROGRAMME GALLERY STYLES ------------------*/





#gallerybox{position: absolute; top:300px; width:280px; margin-left:0px; height: 500px;}
*html #gallerybox{position: absolute; top:350px; width:280px; margin-left:0px; height: 500px;}
#jgal {list-style: none; width: 280px;  }
#jgal li {opacity: .5; float: left; display: block; width: 80px; height: 80px; background-position: 50% 50%; cursor: pointer; border: 0px solid #fff; outline: 1px solid #fff; margin-right: 10px; margin-bottom: 10px; }
#jgal li img {position:relative; display: none; }
#jgal li.active img { display: block; position:absolute; top:-30px; left:-620px; }
#jgal li.active, #jgal li:hover { outline-color: #9bbbbc; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

<!--[if lt IE 8]>
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }

<![endif]-->

<!--[if lt IE 8]>
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
	<![endif]-->