html, body, #wrap {height: 100%;}
html { font-size: 16px; }

body {  
  background-color: #eee;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 62.5%; 
  line-height: 1.6em;
}


/*
--------------------------------------------
GENERAL HTML STYLES
--------------------------------------------
*/


h1 { font-size: 1.6em; font-weight: normal; color: black; padding: 18px 0px 18px 0px; }
h2 { font-size: 1.6em; font-weight: normal; color: black; padding: 18px 0px 18px 0px; }
h3 { font-size: 1.1em; font-weight: bold; color: black; padding: 6px 0px 8px 0px; }
h4 { font-size: 1.0em; font-weight: bold; color: black; padding: 6px 0px 8px 0px; } 

p { padding-bottom: 8px; }

ul {margin-bottom: 8px; }
li { padding-bottom: 4px; padding-left: 18px;  }

a { color: #00518a; }
a:hover { color: #667f99; }

blockquote { padding-left: 18px; padding-bottom: 6px;}
strong { font-weight: bold; }
em { font-style: italic; }
img { padding: 0; margin: 0; border: none; }

/*
--------------------------------------------
COMMON STYLES
--------------------------------------------
*/

.hidden { visibility: hidden; }
h2 .hidden { display: none; }

.introduction { font-weight: bold; }
.clear { clear: both; font-size: 1px; overflow: hidden; height: 1px; }
.indent { padding-left: 18px; }

.error { background-color: #fdd; border: 1px solid #660000; padding: 6px 12px; margin-bottom: 12px; }
.error ul { margin-bottom: 6px; }
.error ul li { margin-left: 24px; list-style: decimal;}

.jumptocontent { display: none; }
.contentanchor { display: none; }

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix { height: 1%;} /* fix ie6 */

.centered { text-align: center;}
.fRight { float: right; }
.fLeft { float: left; }

/*
--------------------------------------------
PAGE STRUCTURE STYLES
--------------------------------------------
*/

#page { width: 950px; margin: 12px auto 12px auto; font-size: 1.2em; background-color: white; }

#page-header { clear: both; height: 100px; background-color: white; }

#page-left {float: left; width: 208px; background: white url(../styles/bg_pageleft.gif) 0px 330px repeat-x; }

#page-main { padding: 0; margin: 0; margin-left: 208px; }

#page-main-content { background: white url(../styles/bg_pageleft.gif) 0px 0px repeat-x; }

#page-main-left { float: left; width: 396px; padding: 0px 8px; }

#page-main-right { margin-left: 412px; padding: 0 8px; }

#page-main-full { padding: 0 12px 0 12px;}


/*
---------------------------------------------------------
ADDITIONAL STYLES
---------------------------------------------------------
*/

#logo { width: 300px; padding: 19px 0 0 208px;}

#boxoffice { float: right; width: 360px; padding: 21px 15px 0 0; background-color: transparent; }

.fl-object { padding: 0; margin: 0; width: 742px; height: 371px;  background-color: black; }

.header-images { background-color: #eee; padding: 0; margin: 0; width: 742px; border-bottom: 1px solid #ccc; overflow: auto; }
.header-images img { float: left; width: 247px; height: 247px; background-color: #ccc; }

.event-header { padding: 0; margin: 0; width: 742px; height: 371px; overflow: hidden; }
.event-header img.event-image { position: absolute; height: 371px; width: 371px; }
.event-header .event-details {float: right; background-color: #bbb; 
  width: 356px; height: 355px; padding: 8px 8px 8px 8px; position: relative;}
.event-header .event-details p {padding-left: 4px; }

.event-caption {
  position: relative;
  top: -56px;
  height: 52px;
  width: 363px;
  overflow: hidden;
  background-color: #555;
  color: white;
  padding: 2px 4px;
}
* html .event-caption { top: -72px; }
.event-caption { filter:alpha(opacity=85); opacity: 0.85; -moz-opacity:0.85; }

.light, .light h3 { background-color: #555; color: white; }
.dark, .dark h3 { background-color: #ccc; color: black; }

.event-caption span.date { display: block;  font-size: 0.9em; font-weight: bold; }
.event-caption h3 { margin: 0; padding: 2px 0 0px 0; font-size: 1.25em; }
.event-caption h3 .rating { font-weight: normal; }
.event-caption p { font-size: 0.9em; line-height: 1.3em; padding-bottom: 0; }
.event-caption span.options { font-size: 0.9em; }  
  

* html .fl-object, * html .header-images, * html .event-header { float: left; } /* fix IE6 which otherwise inserts a pixel to the left, breaking the page flow */


ul.event-detail-images, ul.event-detail-images li { padding: 0; margin: 0; list-style: none; }
ul.event-detail-images { overflow: auto; padding-bottom: 6px; padding-left: 8px; }
ul.event-detail-images li { float: left; width: 80px; height: 80px; margin: 4px 16px 8px 16px; }
ul.event-detail-images li img { width: 80px; height: 80px; padding: 0; margin: 0; }

.event-contactbox { display: block; margin-left: -7px; position: absolute; top: 315px;}

span.runningtime { padding-right: 56px; }
a.audiolink img { width: 16px; height: 16px; vertical-align: bottom; }



#latest-news, #calendar { border: 1px solid black; margin: 18px 13px; background-color: white; padding: 6px 8px; }
#latest-news h2, #calendar h2 { padding: 4px 0 8px 0; }

.news-list, .news-list li { padding: 0; margin: 0; list-style: none; }
.news-list .news-item { margin-top: 12px; padding-bottom: 24px; }
.news-list .news-item { float: left; width: 325px; margin: 12px 12px 12px 12px; height: 80px; overflow: hidden; }
.news-list .news-item img { float: left; width: 80px; height: 80px; margin-right: 8px; background-color: #01dcdf; }
.news-list .news-item span.date { display: block;  font-size: 0.9em; font-weight: bold; }
.news-list .news-item h3 { margin: 0; padding: 2px 0 0px 0; color: #01dcdf; font-size: 1em; }
.news-list .news-item h3 a { color: #01dcdf; text-decoration: none; }
.news-list .news-item h3 a:hover { color: #2b76ee; }
.news-list .news-item h3 .rating { color: black; font-weight: normal; }
.news-list .news-item p { font-size: 0.9em; line-height: 1.3em; padding-bottom: 0; }
.news-list .news-item span.options { font-size: 0.9em; }


#latest-news .news-list, #latest-news .news-list .news-item { margin: 0; padding: 0; list-style: 0; }
#latest-news .news-list { padding-bottom: 4px; }
#latest-news .news-list .news-item { float: none; width: auto;height: auto;  padding: 0; margin: 0; }

#latest-news .news-list .news-item img { width: 60px; height: 60px;}
#latest-news .news-list .news-item h3 { /* display: inline; */ }
#latest-news .news-list .news-item p { display: inline;}

.screenings-list li { background: white url(bg_screenings_li.gif) top left no-repeat; padding-left: 23px;   margin-bottom: 2px; margin-left: 4px; }
.screenings-list li a { color: black; text-decoration: none; }  
.screenings-list li a:hover { color: #01dcdf; text-decoration: none; }  

.event-list {width: 95%; }
.event-list, .event-list li { padding: 0; margin: 0; list-style: none; }
.event-list { margin-top: 12px; padding-bottom: 24px; }
.event-list .event-item { float: left; width: 310px; margin: 12px 12px 12px 12px; height: 80px; overflow: hidden; }
.event-list .event-item div { height: 5.2em; overflow: hidden; }
.event-list .event-item img { float: left; width: 80px; height: 80px; margin-right: 8px; background-color: #01dcdf; }
.event-list .event-item span.date { display: block;  font-size: 0.9em; font-weight: bold; }
.event-list .event-item h3 { margin: 0; padding: 2px 0 0px 0; color: #01dcdf; font-size: 1em; }
.event-list .event-item h3 a { color: #01dcdf; text-decoration: none; }
.event-list .event-item h3 a:hover { color: #2b76ee; }
.event-list .event-item h3 .rating { color: black; font-weight: normal; }
.event-list .event-item p { font-size: 0.9em; line-height: 1.3em; padding-bottom: 0; }
.event-list .event-item span.options { font-size: 0.9em; }

.followup-box { padding-top: 8px; margin-left: 8px; text-align: center; }
.openingtimes-box { padding-top: 24px;}
#page-main-full .openingtimes-box { padding-top: 24px; margin-left: 100px; }

.diarytable { margin-left: 5%; width: 90%; }
.diarytable th { border-bottom: 1px solid #bbb; font-weight: bold; }
.diarytable th, .diarytable td { padding: 0.5em 0.5em;  }
.diarytable td { background-color: #fee; border-bottom: 1px solid #ddd; }
.diarytable tr.odd td { background-color: white; }


.pricingtable { margin-left: 24px; width: 300px; }
.pricingtable td { padding: 3px 4px; text-align: center; }
.pricingtable th { padding: 3px 4px; text-align: left; }

/*
---------------------------------------------------------

---------------------------------------------------------
*/


.navbuttons { width: 200px; margin: 12px auto; overflow: auto; padding-bottom: 6px; }
.navbutton { width: 200px; margin: 12px 0 0 0; overflow: auto; padding-bottom: 6px; }

.navbutton-full { width: 100%; margin: 12px 0 0 0; overflow: auto; padding-bottom: 6px; }

.btn-group-right { float: right; background-color: white; display: block; width: 210px; height: 50px;}

a.btn-back { display: block; float: left;
  background: transparent url(../images/back.gif) 0px 12px no-repeat; 
  height: 26px; width: 70px; margin: 0px; padding-top: 12px; text-decoration: none; }
a.btn-next { display: block; float: left;
  background: transparent url(../images/next.gif) 0px 12px no-repeat; 
  height: 26px; width: 70px; margin: 0px; padding-top: 12px; text-decoration: none; margin-left: 12px; }
a.btn-return { display: block; float: left;
  background: transparent url(../images/return.gif) 0px 12px no-repeat; 
  height: 26px; width: 128px; margin: 0px; padding-top: 12px; text-decoration: none; }
a.btn-previous { display: block; float: left;
  background: transparent url(../images/previous.gif) 0px 12px no-repeat; 
  height: 26px; width: 102px; margin: 0px; padding-top: 12px; text-decoration: none; margin-left: 12px; }

.cy a.btn-back { display: block; float: left;
  background: transparent url(../images/back_welsh.gif) 0px 12px no-repeat; 
  height: 26px; width: 74px; margin: 0px; padding-top: 12px; text-decoration: none; }
.cy a.btn-next { display: block; float: left;
  background: transparent url(../images/next_welsh.gif) 0px 12px no-repeat; 
  height: 26px; width: 74px; margin: 0px; padding-top: 12px; text-decoration: none; margin-left: 12px; }
.cy a.btn-return { display: block; float: left;
  background: transparent url(../images/return.gif) 0px 12px no-repeat; 
  height: 26px; width: 128px; margin: 0px; padding-top: 12px; text-decoration: none; }
.cy a.btn-previous { display: block; float: left;
  background: transparent url(../images/previous.gif) 0px 12px no-repeat; 
  height: 26px; width: 102px; margin: 0px; padding-top: 12px; text-decoration: none; margin-left: 12px; }


  

a.btn-back:hover, a.btn-next:hover { background-position: 0px 12px; }



/*
---------------------------------------------------------
CALENDAR STYLES
---------------------------------------------------------
*/

#calendar { font-size: 0.9em; background-color: #dfdfdf; }

.calendar {  }

.calendar-header { margin-left: 8px; }

.calendar .inputimage { vertical-align: bottom; }

.calendar-browser { width:100%; }
.calendar-browser th { text-align: center; font-weight: bold; padding: 8px 0 0 0; line-height: 1em; }
.calendar-browser tr { vertical-align: middle; }
.calendar-browser td { text-align: center; background-color: #7FCAD5; padding: 2px 0 2px 0; }
.calendar-browser a { text-decoration: none; color: black; }
.calendar-browser a:hover { text-decoration: none; font-weight: bold; }

.calendar-selector { text-align: center; }

.calendar-browser td.blank { background-color: #eee; color: #eee; }

.calendar-browser td.past { background-color: white; color: #bbb; }
.calendar-browser td.past a { color: #bbb; }
.calendar-browser td.past a:hover { color: black }

.calendar-browser td.nextmonth { background-color: #558E96; color: black; }
.calendar-browser td.nextmonth a { color: #666; }
.calendar-browser td.nextmonth a:hover { color: white }

.calendar-browser td.selected { background-color: #7f9ed5; color: black; }
.calendar-browser td.selected a { color: black }
.calendar-browser td.selected a:hover { color: black }

/*
---------------------------------------------------------
NAVIGATION STYLES
---------------------------------------------------------
*/
#nav, #nav li { padding: 0; margin: 0; }
#nav { height: 371px; margin-bottom: 18px; background-color: black; }
#nav li { display: block; width: 208px; }
#nav li a { background: black url(bg_menu.gif) 0px 0px no-repeat; display: block; 
  height: 26px; text-decoration: none; line-height: 26px; color: white; }

#nav .nav-home a { background-position: 0px 0px; }
#nav .nav-home a:hover, #nav .nav-home .selected a { background-position: -208px 0px; }

#nav .nav-diary a { background-position: 0px -26px; }
#nav .nav-diary a:hover { background-position: -208px -26px; }

#nav .nav-cinema a { background-position: 0px -52px;  }
#nav .nav-cinema a:hover { background-position: -208px -52px;  }

#nav .nav-performances a { background-position: 0px -78px;  }
#nav .nav-performances a:hover { background-position: -208px -78px;  }

.cy #nav .nav-cinema a { background-position: 0px -78px;  }
.cy #nav .nav-cinema a:hover { background-position: -208px -78px;  }

.cy #nav .nav-performances a { background-position: 0px -52px;  }
.cy #nav .nav-performances a:hover { background-position: -208px -52px;  }

#nav .nav-exhibition a { background-position: 0px -104px;  }
#nav .nav-exhibition a:hover { background-position: -208px -104px;  }

#nav .nav-ontour a { background-position: 0px -130px; }
#nav .nav-ontour a:hover { background-position: -208px -130px; }

#nav .nav-news a { background-position: 0px -156px; }
#nav .nav-news a:hover { background-position: -208px -156px; }

#nav .nav-about a { background-position: 0px -182px; }
#nav .nav-about a:hover { background-position: -208px -182px; }

#nav .nav-visit a { background-position: 0px -208px; }
#nav .nav-visit a:hover { background-position: -208px -208px; }

#nav .nav-participate a { background-position: 0px -234px; }
#nav .nav-participate a:hover { background-position: -208px -234px; }

#nav .nav-support-us a { background-position: 0px -260px; }
#nav .nav-support-us a:hover { background-position: -208px -260px; }

#nav .nav-hiring-taliesin a { background-position: 0px -286px; }
#nav .nav-hiring-taliesin a:hover { background-position: -208px -286px; }

#nav .nav-contact-us a { background-position: 0px -312px; }
#nav .nav-contact-us a:hover { background-position: -208px -312px; }

/*
---------------------------------------------------------
TOP-MENU NAVIGATION STYLES
---------------------------------------------------------
*/

#top-nav, #top-nav li { list-style: none; padding: 0; margin: 0; }

#top-nav { float: right; width: 322px; padding-top:3px; }
#top-nav li { float: left; margin-right: 5px; width: 26px; }
#top-nav li a { display: block;  height: 37px;  width: 26px; 
  text-decoration: none;  background: white url(bg_topnav.gif) 0px 0px no-repeat; }
#top-nav li a span.hidden { display: none; }

#top-nav .top-nav-home a { background-position: 0px 0px; }
#top-nav .top-nav-home a:hover { background-position: 0px -37px; }

#top-nav .top-nav-contact a { background-position: -27px 0px; }
#top-nav .top-nav-contact a:hover { background-position: -27px -37px; }

#top-nav .top-nav-english a { background-position: -56px 0px; width: 36px; }
#top-nav .top-nav-english a:hover { background-position: -56px -37px; }

#top-nav .top-nav-welsh a { background-position: -92px 0px; width: 36px; }
#top-nav .top-nav-welsh a:hover { background-position: -92px -37px; }

#top-nav .top-nav-brochure a { background-position: -128px 0px; margin-left: 10px; width: 36px; }
#top-nav .top-nav-brochure a:hover { background-position: -128px -37px; }

#top-nav .top-nav-search { width: 180px; font-size: 0.8em; }
#top-nav .top-nav-search form { padding-top: 6px;  }
#top-nav .top-nav-search form input { color: #555; }
#top-nav .top-nav-search form label { float: left; width: 40px; }
#top-nav .top-nav-search form .inputtext { float: left; width: 90px; margin-right: 4px; }
#top-nav .top-nav-search form .inputimage { }


/*
---------------------------------------------------------
TAB STYLES
---------------------------------------------------------
*/

.tabbed-content { border: 1px solid #01dcdf; margin-bottom: 12px; padding: 8px;}
.tabbed-content .video { background-color: #ddd; padding: 8px 12px 8px 12px; text-align: center; }

.tab { overflow: auto; height: 1%; }

#tab-header, #tab-header li { list-style: none; padding: 0; margin: 0; }
#tab-header { padding-top:3px; height: 19px; line-height: 19px; overflow: hidden; }
#tab-header li { float: left; margin-right: 1px;}
#tab-header li a { display: block;  height: 19px; text-decoration: none; background-image: url(bg_tabs_welsh.gif); }

#tab-header-overview a { background-position: 0px 0px; width: 68px; }
#tab-header-overview a:hover, #tab-header-overview.selected a { background-position: 0px -19px; }
.cy #tab-header-overview a { background-position: 0px 0px; width: 73px; }
.cy #tab-header-overview a:hover, .cy #tab-header-overview.selected a { background-position: 0px -19px; }


#tab-header-dates a { background-position: -68px 0px; width: 162px; }
#tab-header-dates a:hover, #tab-header-dates.selected a { background-position: -68px -19px; }
.cy #tab-header-dates a { background-position: -73px 0px; width: 162px; }
.cy #tab-header-dates a:hover, .cy #tab-header-dates.selected a { background-position: -73px -19px; }

#tab-header-preview a { background-position: -231px 0px; width: 120px; }
#tab-header-preview a:hover, #tab-header-preview.selected a { background-position: -231px -19px; }
.cy #tab-header-preview a { background-position: -235px 0px; width: 137px; }
.cy #tab-header-preview a:hover, .cy #tab-header-preview.selected a { background-position: -235px -19px; }


#visittab-header, #visittab-header li { list-style: none; padding: 0; margin: 0; }
#visittab-header { padding-top:3px; height: 19px; line-height: 19px; overflow: hidden; }
#visittab-header li { float: left; margin-right: 1px;}
#visittab-header li a { display: block;  height: 19px; text-decoration: none; background-image: url(../styles/pink/bg_visittabs.gif); background-repeat: no-repeat; }

#tab-header-howtofindus a { background-position: 0px 0px; width: 94px; }
#tab-header-howtofindus a:hover, #tab-header-howtofindus.selected a { background-position: 0px -19px; }
.cy #tab-header-howtofindus a { background-position: 0px 0px; width: 95px; }
.cy #tab-header-howtofindus a:hover, #tab-header-howtofindus.selected a { background-position: 0px -19px; }

#tab-header-cafebar a { background-position: -94px 0px; width: 60px; }
#tab-header-cafebar a:hover, #tab-header-howtofindus.selected a { background-position: -94px -19px; }
.cy #tab-header-cafebar a { background-position: -95px 0px; width: 59px; }
.cy #tab-header-cafebar a:hover, #tab-header-howtofindus.selected a { background-position: -95px -19px; }


#tab-header-ticketingpolicies a { background-position: -154px 0px; width: 111px; }
#tab-header-ticketingpolicies a:hover, #tab-header-howtofindus.selected a { background-position: -154px -19px; }
.cy #tab-header-ticketingpolicies a { background-position: -154px 0px; width: 151px; }
.cy #tab-header-ticketingpolicies a:hover, #tab-header-howtofindus.selected a { background-position: -154px -19px; }


#tab-header-specialneeds a { background-position: -265px 0px; width: 151px; }
#tab-header-specialneeds a:hover, #tab-header-howtofindus.selected a { background-position: -265px -19px; }
.cy #tab-header-specialneeds a { background-position: -305px 0px; width: 149px; }
.cy #tab-header-specialneeds a:hover, #tab-header-howtofindus.selected a { background-position: -305px -19px; }

#tab-header-faqs a { background-position: -416px 0px; width: 48px; }
#tab-header-faqs a:hover, #tab-header-howtofindus.selected a { background-position: -416px -19px; }
.cy #tab-header-faqs a { background-position: -454px 0px; width: 135px; }
.cy #tab-header-faqs a:hover, #tab-header-howtofindus.selected a { background-position: -454px -19px; }

/*
---------------------------------------------------------
FORM STYLES
---------------------------------------------------------
*/

table.form { width: 85%; margin: 8px 0 12px 5%; background-color: #eee; border: 1px solid #ccc; }
table.form tr, table.form td { vertical-align: top; }
table.form td { padding: 4px 12px; }

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

#page-footer { clear: both; 
  border-top: 1px solid #333; border-bottom: 1px solid #333; background-color: #020202; color: #bbb; 
  line-height: 20px; text-align: left; padding: 0px 16px; font-size: 0.9em; }   
#page-footer p { padding: 0; }
#page-footer a { color: white; text-decoration: none; }
#page-footer a:hover { color: #ddd; text-decoration: underline; }