/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2009/05/18
   Last updated by:  Matt Wilcox
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset | based on http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   ----------------------------------------------------------------------------------------------------------------------- */
   
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0; padding: 0; border: 0; outline: 0;
     font-size: 100%; vertical-align: baseline; background: transparent; }
   body {
     line-height: 1; }
   ol, ul {
     list-style: none; }
   blockquote, q {
     quotes: none; }

   /* remember to define focus styles! */
   :focus {
     outline: 0; }

   /* remember to highlight inserts somehow! */
   ins {
     text-decoration: none; }
   del {
     text-decoration: line-through; }

   /* tables still need 'cellspacing="0"' in the markup */
   table {
     border-collapse: collapse; border-spacing: 0; }

/* =typography | based on http://alistapart.com/articles/settingtypeontheweb/
                          http://24ways.org/2006/compose-to-a-vertical-rhythm/
                          
    NOTE: found that margin-top applied to everything is be a pain - it often messes up layout and requires jumping through
          hoops to fix, so have stopped doing this as a default and now add top margin manually when required instead.
    NOTE: using px for type is bad for people using IE6, but good for my brain. IE6 is dying, so I think that's OK. Feel free
          to tut if you're a purist. I'm a pragmatist.
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 75%/1.5 Helvetica, Ariel, Verdana, sans-serif; }
   html > body {
     font-size : 12px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-bottom : 1.5em; }
   h1,
   .home h2 { font-size : 24px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h2 { font-size : 20px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 18px; line-height: 18px; margin-bottom: 18px;
     font-weight : normal; }
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html {
     background : #E6D3B6 url(../images/html.jpg) 50% 0 repeat-y;
     color : #38373a; }
   body {
     background : transparent url(../images/body.jpg) 50% 0 no-repeat; }

/* =h1 */
   #site_context h1 {
     margin : 0; }
   
   .contact h1,
   .shows h1 {
     position : absolute; left : -999em;
     overflow : hidden; }
   
/* =h2 */
   #nav_main h2,
   #content_supp form h2,
   #site_info h2,
   #supported-by h2,
   .home #theatre h2,
   .home #cinema h2 {
     position : absolute; left : -999em;
     overflow : hidden; }
     
   .studio .text h2 {
     font-family : Georgia, "Times New Roman", serif; font-size : 28px; margin-bottom : 1em; }
     
/* =h3 */
   #content_supp form h3 {
     position : absolute; left : -999em;
     overflow : hidden; }
     
   .home .show h3 {
     margin-bottom : 4px;
     font-family : Georgia, "Times New Roman", serif; }
     
   .shows h3.h_showings,
   .shows h3.h_categories {
     position : absolute; left : -999em;
     overflow : hidden; }
     
/* =h4 */
   h4 {  }

/* =p */
   p.accessibility {
     position : absolute;
     margin : -3.5em 0 0 0;
     z-index : 2; }
     
   blockquote p:before {
     content : "\201c"; }
   blockquote p:after {
     content : "\201d"; }
   blockquote p.author {
     border-top : 1px dotted #666; }
   blockquote p.author:before,
   blockquote p.author:after {
     content : ""; }
     
   .attributed p {
     margin-bottom : 0; }
     
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
     
   #page_context p {
     margin : 0; display : none; }
     
   #content_supp form p {
     position : absolute; top : 110px; left : 0;
     width : 260px;
     font-size : 10px; }
     
   #site_info p {
     display : inline; }
   
   .home .show p {
     line-height : 14px; }
   .home p.meta {
     font-family : Georgia, "Times New Roman", serif; }
     
   .shows p.tagline {
     font-size : 12px; margin-top : -24px; }
     
   p.pagination {
     text-align : center; }
     
/* =blockquote */
   blockquote {
     clear : both; }

/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; }
   
/* =address */
   address {  }

/* =dl =dt =dd */
   dl {  }
   dt {
     margin-bottom : 0;
     font-weight : bold; font-style : italic; }
   dd {
     margin-top : 0;
     border-left : .3em solid #ddd; padding : .5em 0 0 .7em; }
   
/* =ul */
   #content ul {
     margin-left : 1em;
     list-style : disc outside; }
   #nav_main ul {
     margin : 0; }
   
   #site_info ul {
     display : inline; }
     
   .shows #content .media ul {
     margin : -6px 0 24px -12px; }
   
/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
   #nav_main li {
     display : inline; margin : 0; }
     
   #site_info li {
     display : inline; margin-left : 1em; }
   #site_info li.credit {
     position : absolute; right : 0; }
     
   .shows .media li {
     display : inline; list-style-type : none; margin-left : 12px; }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
     
   .home .show img {
     float : left; margin : 9px 24px 0 12px; }
   .home .show img.frame {
     float : none; position : absolute; left : -10px; top : -10px;
     margin : 0; }


   .studio .media img,
   .about #content_sub img {
     margin : 9px 24px 0 12px; }
   .studio .media img.frame,
   .about #content_sub img.frame {
     position : absolute; left : -10px; top : -10px;
     margin : 0; }
   .studio .media img.thumb_frame,
   .about #content_sub img.thumb_frame {
     position : absolute; left : 2px; top : 3px;
     margin : 0; }
   
   .shows .media img {
     margin : 9px 24px 24px 12px; }
   .shows .media img.frame {
     position : absolute; left : 2px; top : -10px;
     margin : 0; }
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #893131; text-decoration : none; }
   a:visited { color : #893131; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { background-color : #FFEAD2; color : #333; }
   a:active  { background-color : #FFEAD2; color : #000; outline : none; }
   
   #site_context h1 a,
   #page_context p a {
     position : absolute; top : 111px; left : 17px;
     display : block; width : 253px; height : 198px;
     text-indent : -999em; overflow : hidden; }
     
   #site_info a {
     color : #B68157; }
   #site_info a:hover,
   #site_info a:focus {
     color : #E5D4C0; }
   #site_info a:active,
   #site_info a:focus {
     color : #E5D4C0; background : transparent; text-decoration : underline; }
     
   #supported-by a {
     position : absolute; top : 125px; left : 115px;
     display : block; width : 135px; height : 85px;
     text-indent : -999em; overflow : hidden; }
   #supported-by .item_2 a {
     top : 65px; left : 300px;
     width : 120px; height : 70px; }
   #supported-by .item_3 a {
     top : 146px; left : 300px;
     height : 60px; width : 170px; }
   #supported-by a:hover {
     background-color : transparent; }
   #supported-by a:focus {
     background-color : transparent; outline : 1px solid #000; }
     
   #nav_main li a {
     float : left; position : relative;
     display : block; width : 112px; height : 82px; }
   #nav_main li.item_2 a {
     width : 129px; }
   #nav_main li.item_3 a {
     width : 108px; }
   #nav_main li.item_4 a {
     width : 95px; }
   #nav_main li.item_5 a {
     width : 111px; }
   #nav_main a.language {
     /*position : absolute; top : -158px; left : 167px;
     display : block; width : 56px; height : 107px;
     background : url(../images/lang-switch.jpg) 0 0 no-repeat; text-indent : -999em; overflow : hidden;*/
     
     position : absolute; top : -120px; right : 360px; }
   #nav_main a.language:hover,
   #nav_main a.language:focus {
     background-position : 0 -107px; }
   .cy #nav_main a.language {
     background-position : -56px 0; }
   .cy #nav_main a.language:hover,
   .cy #nav_main a.language:focus {
     background-position : -56px -107px; }
     
   .show a.book {
     display : block; width : 89px; height : 44px;
     background : url(../images/book.gif) 0 0 no-repeat; text-indent : -999em; overflow : hidden; }
   body.cy .show a.book {
     background-image : url(../images/book-cy.gif); }
   .show a.book:hover {
     background-position : 0 -44px; }
   .home .show a.book {
     position : absolute; bottom : 34px; left : 360px; }
     
/* =table */
   table {
     width : 100%; border : 2px solid #CAAC88; -moz-border-radius : 9px 9px 3px 3px; -webkit-border-radius : 9px 9px 3px 3px; }
     
   .shows table {
     width : 275px; }

/* =caption */
   caption {  }

/* =thead */
   thead {
     text-align : left; background : #CAAC88; }

/* =tfoot */
   tfoot {
     background-color : #ddd; }
   
/* =tbody */
   tbody {  }
   
/* =tr */
   tbody tr:hover { background-color : #F1DBBA; color : #894339; text-shadow : 0 0 3px #fff; }
   
/* =th */
   th {
     font-weight : bold; padding : 3px 6px; }

/* =td*/
   tbody td {
     border-top : 1px solid #CAAC88; padding : 3px 6px; }

/* =form */
   form {
     position : relative;
     width : 100%;
     overflow : hidden; }
     
   #nav_main form {
     margin : 0; }
     
   #content_supp form {
     position : absolute; top : 0; left : 0;
     display : block; width : 470px;
     overflow : visible; }
     
/* =fieldset */
   #content_supp fieldset {
     position : absolute; left : 284px; top : 116px;
     display : block; width : 240px; }
   #semantically_redundant.jquery #content_supp fieldset {
     width : 180px; }

/* =legend */
   legend {
     margin : 0; }
   
   #nav_main legend {
     display : none; }
   
/* =blockquote */
   blockquote {
     border-left : 5px solid #666; padding-left : 5px; }

/* =label */
   label {
     position : relative; /* so we can absolutely position errors */
     display : block;
     overflow : hidden; /* so no collapsing float issues */ }
     
   #content_supp label {
     float : left; width : 100px;
     margin-bottom : 11px; margin-right : 10px; }
   #semantically_redundant.jquery #content_supp label {
     float : none; width : 178px; margin-right : 0;
     margin-bottom : 13px; }
   
   .fs_your-details label {
     float : left;
     width : 290px; }
     
   body.contact #freeform label {
     /*-moz-transform : rotate(1deg);*/ }
   body.contact label.message {
     margin-left : 20px; width : 490px; }
   body.contact label.message span {
     position : absolute; left : -999em; overflow : hidden; }
   body.contact input.submit {
     margin-left : 20px; }
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #FFEAD2; }
     
   label input {
     width : 97%; }
   .boolean input {
     width : auto; margin-right : .5em; }
     
   #content_supp label input {
     border-color : #fff; height : 15px; }
     
   .fs_your-details input {
     padding : 4px 2px; }
   
/* =textarea */
    textarea {
      width : 99%; height : 8em; }
    #c_message {
      padding : 4px 4px; width : 98%;
      font : 85%/1.5 Helvetica, Ariel, Verdana, sans-serif; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #FFEAD2; }
     
/* =div */
   #container,
   #site_info {
     position : relative;
     width : 960px; margin : 0 auto; }
   #page_context,
   #site_context  {
     height : 320px; }
   #nav_main {
     position : absolute; top : 210px; right : 0;
     display : block; width : 555px; height : 82px; margin : 0;
     background : url(../images/nav_main-en.jpg) 0 0 no-repeat; }
   #semantically_redundant {
     clear : both; position : relative;
     display : block; width : 100%; height: 349px; margin : 0;
     background : url(../images/footer-no-jquery.jpg) 50% 100% no-repeat; overflow : hidden; }
   #semantically_redundant.jquery {
     background-image : url(../images/footer.jpg); }
   .cy #semantically_redundant {
     clear : both; position : relative;
     display : block; width : 100%; height: 349px; margin : 0;
     background : url(../images/footer_cy.jpg) 50% 100% no-repeat; overflow : hidden; }
   #content_supp {
     position : relative;
     width : 960px; height : 290px; margin : 0 auto; }
   #supported-by {
     position : absolute; left : 490px; }
   #site_info {
     color : #B68157; text-shadow : 0 1px #333, 0 -1px #000, 0 0 3px #000; font-family : Georgia, "Times New Roman", Helvetica, Arial; }
     
   .home #intro {
     width : 900px; height : 310px; margin-left : 40px;
     background : url(../images/home.jpg) 0 0 no-repeat; text-indent : -999em; overflow : hidden; }
   .home.cy #intro {
     background-image : url(../images/home-cy.jpg); }
   .home #theatre {
     float : left;
     width : 470px; padding-top : 80px;
     background : url(../images/latest-theatre-shows.gif) 0 0 no-repeat; }
   body.home.cy #theatre {
     background-image : url(../images/latest-theatre-shows-cy.gif); }
   .home #cinema {
     float : right;
     width : 470px; padding-top : 80px;
     background : url(../images/cinema-screenings.gif) 0 0 no-repeat; }
   body.home.cy #cinema {
     background-image : url(../images/cinema-screenings-cy.gif) }
   .home .show,
   .shows .show {
     position : relative;
     min-height : 220px; }
     
   .studio #intro {
     height : 445px;
     background : url(../images/studio-top.jpg) 0 0 no-repeat; text-indent : -999em; overflow : hidden; }
   .studio.cy #intro {
     background-image : url(../images/studio-top-cy.jpg); }
   .studio .media .div-frame,
   .about #content_sub .div-frame,
 	 .div-thumb-frame{
     position : relative; }
		.div-thumb-frame {
			float:left;
			margin-bottom:0;
		}
	 .supp_body {
		clear:both;
		padding: 10px 16px 0 16px;
	}
   .studio .media,
   .shows .media,
   .contact .details,
   .about #content_sub {
     float : left;
     width : 340px; margin : 0 0 0 12px; }
   .studio .text,
   .shows .text,
   .contact form,
	 .lost #content_main,
   .about #content_main,
	 .page #content_main {
     float : right;
     width : 580px; margin : 0 24px 0 0;
     font-family : Georgia, "Times New Roman", serif; font-size : 16px; }
     
   .shows .show {
     border-bottom : 1px solid #E1B471;
     overflow : hidden;}
     
   div.cat_cimema .intro {
     padding-left : 35px;
     background : url(../images/icon-cinema.gif) 0 7px no-repeat; }
   div.cat_show .intro {
     padding-left : 35px;
     background : url(../images/icon-theatre.gif) 0 5px no-repeat; }
     
   body.contact #freeform {
     width : 540px; height : 308px; padding : 20px 20px 0 20px;
     background : url(../images/form-contact.jpg) 0 0 no-repeat; }
   body.contact .fs_your-details label {
     width : 270px; }
   .hiddenFields {
     display : none; }
     
   body.contact .fs_your-details {
     margin-bottom : 0; }
     
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
     
   #nav_main a span {
     position : absolute; top : 0; left : 0;
     display : block; width : 129px; height : 82px;
     background : url(../images/nav_main-en.jpg) 0 0 no-repeat; }
   .cy #nav_main a span {
     background-image : url(../images/nav_main-cy.jpg); }
   #nav_main .item_2 a span {
     background-position : -112px 0; }
   #nav_main .item_3 a span {
     background-position : -241px 0; }
   #nav_main .item_4 a span {
     background-position : -349px 0; }
   #nav_main .item_5 a span {
     background-position : -444px 0; }
     
   #nav_main a:hover span,
   #nav_main a:focus span {
     position : absolute; top : 0; left : 0;
     display : block; width : 129px; height : 82px;
     background-position : 0 -82px; }
   #nav_main .item_2 a:hover span,
   #nav_main .item_2 a:focus span {
     background-position : -112px -82px; }
   #nav_main .item_3 a:hover span,
   #nav_main .item_3 a:focus span {
     background-position : -241px -82px; }
   #nav_main .item_4 a:hover span,
   #nav_main .item_4 a:focus span {
     background-position : -349px -82px; }
   #nav_main .item_5 a:hover span,
   #nav_main .item_5 a:focus span {
     background-position : -444px -82px; }
     
   .home #nav_main .item_1 a span {
     background-position : 0 -164px; cursor : default; }
   .about #nav_main .item_2 a span {
     background-position : -112px -164px; cursor : default; }
   .shows #nav_main .item_3 a span {
     background-position : -241px -164px; cursor : default; }
   .studio #nav_main .item_4 a span {
     background-position : -349px -164px; cursor : default; }
   .contact #nav_main .item_5 a span {
     background-position : -444px -164px; cursor : default; }
     
   p.pagination span {
     font-family : Georgia, "Times New Roman", Helvetica, Arial; font-size : 2em; -moz-transform : rotate(3deg); -webkit-transform : rotate(3deg); }
   
/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }
     
   /* full width portions */
   .one-third {
     width : 300px; text-align : justify; /* text align to show column bounds */ }
   .two-thirds {
     width : 630px; text-align : justify; /* text align to show column bounds */ }
   .half {
     width : 465px; text-align : justify; /* text align to show column bounds */ }
     
   /* portions inside a two-third parent portion */
   .two-thirds .one-third {
     width : 190px; }
   .two-thirds .two-thirds {
     width : 410px; }
   
/* =display-classes */
   .attributed {
     padding : 9px; border : 1px solid #eee;
     background-color : #f6f6f6; }
     
   .contact iframe {
     width : 956px; height : 446px;
     border : 2px solid #53371e; }