/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2008/06/18
   Last updated by:  Matt Wilcox
                     mattw@viewcreativegroup.com
   ----------------------------------------------------------------------------------------------------------------------- */

/* =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/
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 87.5%/1.2857em Helvetica, Ariel, Verdana, sans-serif; }
   html > body {
     font-size : 14px; }
   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-top : 1.5em; margin-bottom : 1.5em; }
   h1 { font-size : 1.5em; line-height: 1em; margin-top: 0; margin-bottom: 1em; font-weight : normal; }
   h2 { font-size:1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 1em; line-height: 1em; margin-top: 1.5em; margin-bottom: 0.5em;
     font-weight : bold; }
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html {
     background : #000 url(../images/html.jpg) 0 0 repeat-y; color : #fff; letter-spacing : -.01em; }
   body {
     background : url(../images/body.jpg) 0 100% no-repeat; }
     
   /*body.course_details {
     background-image:none; }*/

/* =h1 */
   .home h1,
   #site_context p {
     position : absolute; top : 0; left : 0;
     display : block; margin : 0; border-bottom : 1px solid #000; height : 192px; width : 100%; 
     font-size : 1em; background : url(../images/h1.jpg) 100% 100% no-repeat; }

   /* faux header trick */
   #content #content_main h1 {
     font-size:33px; line-height: 42px; margin: 0; font-weight : normal; }
   #content #content_main h1.hack_2 {
     display : inline;
     background-color : #FDB719; padding : 0 20px; margin-left : 0; }
   #content #content_main h1.hack_1 {
     position : absolute; top : 0px; left : 20px;
     display : inline; margin-left : 0;
     color : #222; }
   
/* =h2 */
   #content_main h2,
   #content_supp h2 {
     margin-top : 26px; }
   #nav_main h2 {
     display : none; }
   #site_info h2 {
     display : none; }
   
   .home #content_main h2,
   #content_main h1 {
     margin-left : 20px; }
     
   /* faux header trick */
   #content #content_main h2.hack_2 {
     display : inline;
     background-color : #FDB719; padding : 0 20px; margin-left : 0; }
   #content #content_main h2.hack_1 {
     position : absolute; top : -26px; left : 20px;
     display : inline; margin-left : 0;
     color : #222; }
     
   .home #content h2 {
     font-size : 32px; line-height : 42px; color : #fdb714; }
   .home #case-studies h2 {
     position : relative;
     width : 460px; height : 49px; margin : 0;
     font-size : 1em; line-height : 1em; }
   .home #content_supp h2 {
     position : relative;
     display : block; width : 220px; height : 49px; margin : 0;
     font-size : 1em; line-height : 1em; }
     
/* =h3 */
   .home #content_supp div div h3 {
     margin-bottom : 0;
     font-size : 16px; }
     
/* =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 : 0;
     text-align : center; font-size : .857em; color : #999; }
     
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
     
   #site_info p {
     margin : 0 20px;
     font-size : 12px; color : #333; }
   #site_info form p {
     display : none; }
     
   p#lang_switch {
     position : absolute; top : 6px; right : 24px; }
     
   #page_context p {
     position : absolute; top : 0; left : 0;
     display : block; margin : 0; border-bottom : 1px solid #000; height : 192px; width : 100%; 
     font-size : 1em; background : url(../images/h1.jpg) 100% 100% no-repeat; }
     
   .home #case-studies .media p {
     margin-top : 0; }
   .home #content_supp div div p.meta {
     margin-top : 0; color : #999; }
   .home #content_supp div div p.more {
     border-top : 1px dotted #666; padding-top : 1em; }
     
/* =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 {
     display : block; width : 200px; margin : 0; }
   .welsh #nav_main ul {
     width : 300px; }
     
   .home #content_supp ul {
     position : relative;
     display : block; width : 440px; height : 268px;
    list-style-type : none; margin-top:87px }
   
/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
   #nav_main li {
     display : block; height : 22px; margin : 0 0 2px 0; padding : 0;
     list-style : outside none; }
     
   .home #content_supp ul li {
     list-style-type : none; margin:0; padding:0 }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
     
   .attributed a:hover img,
   .attributed a:focus img {
     border-color : #e5cb8f; }
   .attributed a img {
     border : 1px solid #222; margin-bottom : 0; }
     
   .home #case-studies .media img,
   .home a.hp-vt img {
     display : block; margin-bottom : 0; }
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #fdb714; text-decoration : none; }
   a:visited { color : #fdb714; text-decoration : none; }
   a:hover   { text-decoration : none; background-color : #fdb714; color : #000; }
   a:focus   { background-color : #fdb714; color : #000; }
   a:active  { background-color : #ff6; color : #000; outline : none; }
   /*:target   { background-color : #ff6; }*/
   
   p.accessibility a {
     margin : 0; padding : 0; line-height : 1em; }
   p.accessibility a:focus {
     position : absolute; left : 1em;
     margin-top : 2.5em;
     background-color : #ffff99; }
     
   #site_context a,
   #page_context a {
     position : absolute; top : 0; left : 0;
     display : block; width : 301px; height : 187px; }
   
   #nav_main li a {
     width : auto; padding : 3px 10px 3px 20px;
     line-height : 22px; background-color : #222; color : #fdb714; }
   #nav_main li a:hover,
   #nav_main li a:focus {
     display : block; padding : 0 10px 0 20px;
     background-color : #fdb714; color : #222222; text-align : right; text-decoration : none; }
     
   p#lang_switch a {
     margin : 0; padding : 6px; -moz-border-radius : 6px; -webkit-border-radius : 6px;
     background-color : rgba(0,0,0,.75); }
   p#lang_switch a:hover,
   p#lang_switch a:active {
     background-color : #FDB719; color : #222; }

     
   #site_info a {
     color : #000; }
     
   .attributed p a {
     color : #e5cb8f; }
     
   .home #content_supp ul li a {    
     display : block; width : 350px; padding:15px 5px;
     color:#ffc21b; font-size:250%; text-transform:lowercase; 
	 font-family:Verdana, Arial, Helvetica, sans-serif;	 	 
	}
	
	.home #content_supp ul li#facilities a:hover {
		background:#fdb719 url(../images/facilities-but-bg2.png) no-repeat right top;
	}
	
	.home #content_supp ul li#training a:hover {
		background:#fdb719 url(../images/training-but-bg.png) no-repeat right top;
	}
	
	.home #content_supp ul li#casestudies a:hover {
		background:#fdb719 url(../images/casestudies-but-bg.png) no-repeat right top;
	}
   
   .home #content_supp ul li a:hover {
	 color:#343338;
	} 
     
/* =table */
   table {
     width : 100%; border : 1px solid #ddd; }

/* =caption */
   caption {  }

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

/* =tfoot */
   tfoot {
     background-color : #ddd; }
   
/* =tbody */
   tbody {  }
   
/* =tr */
   tbody tr:hover { background-color : #f6f6f6; }
   
/* =th */
   th {
     font-weight : bold; padding : 2px; }

/* =td*/
   td {
     border : 1px dotted #ddd; padding : 2px; }

/* =form */
   form {
     position : relative;
     width : 100%;
     overflow : hidden; }
     
   #nav_main form,
   .contact #content_main form,
   .contact #content_main form div {
     margin : 0; }
     
   #site_info form {
     position : absolute; top : 60px; right : 20px;
     width : 740px; height : 62px; margin : 0; padding : 0;
     background : url(../images/subscribe.jpg) 0 0 no-repeat; }
   .welsh #site_info form {
     background-image : url(../images/subscribe_cy.jpg); }
   
/* =fieldset */
   #site_info form fieldset {
     margin : 0; padding : 0; }

/* =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 */ }
     
   #site_info form fieldset label.newsletter_name {
     float : left; width : 130px; padding-left : 280px; padding-right : 10px; }
   #site_info form fieldset label.newsletter_email {
     float : left; width : 190px; }
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #ffd; }
     
   label input {
     width : 97%; }
   .boolean input {
     width : auto; margin-right : .5em; }
     
   #site_info form fieldset input.submit {
     margin : 1.4em 0 0 10px; }
   
/* =textarea */
    textarea {
      width : 99%; height : 8em; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container {
     position : relative;
     width : 980px; margin : 0; }
   #page_context,
   #site_context  {
     height : 423px; margin : 0; border-bottom : 1px solid #000;
     background : url(../images/site_context.jpg) 0 100% no-repeat; }
   #nav_main {
     position : absolute; top : 202px; left : 0;
     margin : 0; }
   #content {
     margin-top : 0;
     overflow : hidden; }
   #content_main {
     float : left;
     width : 460px; margin-top : 0; padding-bottom : 60px; }
   #content_main > div {
     padding-left : 20px; }
   #content_main div.hack {
     padding-left : 0; position : relative; }
   #content_supp {
     float : right;
     width : 460px; padding-right : 20px; margin-top : 0; }
   #site_info {
     clear : both; position : relative; margin : 0; height : 194px; }
   #site_info .menai {
     background : url(../images/colegmenai.png); width : 74px; height : 50px; position : absolute; top: 54px; left: 29px;
     margin : 0; }
	#site_info .ftc {
     background : url(../images/FTClogo.png); width : 74px; height : 36px; position : absolute; top: 56px; left: 115px;
     margin : 0; }
	#site_info .fdp {
     background : url(../images/fdplogo.jpg); width : 160px; height : 59px; position : absolute; top: 120px; left: 29px;
     margin : 0; }
   #site_info .address {
     position : absolute; bottom : 10px; left : 200px;
     margin : 0; }     
   .home #case-studies {
     background : url(../images/case-studies.jpg) 0 100% no-repeat; overflow : hidden; }
   .home #case-studies .content {
     float : right; position : relative; top : -39px;
     width : 205px; padding-right : 15px; margin : 0;
     font-size : 12px; }
   .home #case-studies .media {
     float : left;
     width : 210px; margin : 0;
     text-align : right; }
   .home #content_supp #news {
     float : left;
     width : 220px; margin-top : 0;
     background : url(../images/events.jpg) 0 100% no-repeat; }
   .home #content_supp #events {
     float : right;
     width : 220px; margin-top : 0;
     background : url(../images/news.jpg) 0 100% no-repeat; }
   .home #content_supp div div {
     margin : 0 20px;
     font-size : 12px; }
     
   .facilities #content_main,
   .training #content_main,
   .research_development #content_main,
   .research_development_details #content_main,
   .case_studies #content_main,
   .news #content_main,
   .events #content_main,
   #content_main   {
     width : 660px; }
	 
	.home #content_main {
	width:460px;
	}
	
   .facilities #content_supp,
   .case_study_details #content_supp,
   .training #content_supp,
   .training_details #content_supp,
   .research_development #content_supp,
   .research_development_details #content_supp,
   .case_studies #content_supp,
   .news #content_supp,
   .events #content_supp,
   .events_details #content_supp,
   .news_details #content_supp,
   .dairy_hall #content_supp,
   .meat_hall #content_supp, 
   .preperation_food_hall #content_supp, 
   .laboratory #content_supp,  
   .training1 #content_supp,
   .test_kitchen #content_supp  {
     width : 240px; padding-left : 20px; border-left : 1px solid #000; }
     
	#events {
		float:left;
		width:280px;
		margin-top:0;
		margin-bottom:50px;
	}
	
	#news {
		float:right;
		width:280px;
		margin-top:0;
	}
	
	#programme {
		clear:both;
	}

     
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
     
   #site_context a span,
   #page_context a span {
     position : absolute; top : 0; left : 0;
     display : block; width : 301px; height : 187px;
     background : transparent url(../images/site_context-a.png) 0 0 no-repeat; }
   .welsh #site_context a span,
   .welsh #page_context a span {
     position : absolute; top : 0; left : 0;
     display : block; width : 301px; height : 187px;
     background : transparent url(../images/site-context-welsh.png) 0 0 no-repeat; }
   #site_context a:hover span,
   #page_context a:hover span,
   #site_context a:focus span,
   #page_context a:focus span {
     background-position : 0 -187px; }
   .welsh #site_context a:hover span,
   .welsh #page_context a:hover span,
   .welsh #site_context a:focus span,
   .welsh #page_context a:focus span {
     background-position : 0 -182px; }
     
   .home #case-studies h2 span {
     position : absolute; top : 0; left : 0;
     display : block; width : 460px; height : 49px;
     background : transparent url(../images/case-studies-top.jpg) 0 0 no-repeat; }
   .home #content_supp #news h2 span {
     position : relative; position : absolute; top : 0; left : 0;
     display : block; width : 220px; height : 49px; margin : 0;
     background : transparent url(../images/news-top.jpg) 0 0 no-repeat; }
   .home #content_supp #events h2 span {
     position : relative; position : absolute; top : 0; left : 0;
     display : block; width : 220px; height : 49px; margin : 0;
     background : transparent url(../images/events-top.jpg) 0 0 no-repeat; }
   
/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .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 */ }
   label.one-third {
     width : 190px; }
   label.two-thirds {
     width : 410px; }
   
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }
   .attributed {
     padding : 9px; border : 1px solid #222; margin-top : 0;
     background-color : #444; }
     
   .hide { display : none; }

.ui-tabs-hide { display: none; }
div.subnav { margin-top : 0; }
div#content_main, div#content, .subnav li { margin-top : 0; }
#site_context { margin-bottom : 0; }
.subnav ul { margin-top : 0; overflow : hidden; /*border-bottom : 1px dotted #c0c08f;*/ font-size : 11px; height:100%; overflow:auto }

#content .subnav li { padding : 0; background-image : none; float : left; padding : .5em 1em .5em 0; margin : 0; }
   #content .subnav li:after {
     content : "|"; margin-left : .5em; }
   #content .subnav li:last-child {
     margin : 0; }
   #content .subnav li:last-child:after {
     content : ""; margin : 0; }
#content .subnav li a:focus { background-color : transparent; text-decoration : underline; color : #c0c08f; }

.news img, .news_cy img {
	float:left;
	margin:0 20px 10px 20px;
	border:1px solid #666;
	background:#333;
	padding:4px;
}
#video {width:360px; height:290px; margin-top:348px; margin-left:20px; border:solid 5px #FDB719;}