/* @override http://www.trustforlondon.org.uk/css/screen.css */
  /*
 * Trust for London new site 2010
 * http://www.trustforlondon.org.uk
 * screen.css
 */

/* @group Base
------------------------------------------------------------ */
  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, 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-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}
  :focus {outline:0}

  html {background:#fff; color:#000}
  body {line-height:1; font-family:"HelveticaNeue", "Helvetica 55", Helvetica, Arial; font-size:100%; margin:0 auto; width:944px; position:relative}
  a#skip {position:absolute; left:-1000em; width:20em;}

  /* @group Headings
  ------------------------------------------------------------ */
    h1, h2, h3, h4, h5, h6 {font-weight:regular; line-height:1.4em; color:rgb(0,120,174); clear:left}
  /* @end */

  /* @group Text Formatting
  ------------------------------------------------------------ */
    p {font-size:0.8em; line-height:1.4em;margin-bottom:10px}
    strong {font-weight:bold}
    em {font-style:italic}
    ul {margin-left:15px;}
    li {font-size:0.8em; line-height:1.4em;margin-bottom:10px}
  /* @end */

  /* @group Quotes
  ------------------------------------------------------------ */
    blockquote:before, blockquote:after, q:before, q:after {content:""}
    blockquote, q {quotes:"" ""}
  /* @end */

  /* @group Links
  ------------------------------------------------------------ */
    a {color:rgb(0,120,174); text-decoration:none;}
    a:visited {color:rgb(0,120,174)}
    a:hover {color:#000;-webkit-transition:color 0.3s ease-in-out}
    a:active {}
  /* @end */

  /* @group Lists
  ------------------------------------------------------------ */
    ol {list-style:decimal}
    ul {list-style:disc}
    ol, ul {}
  /* @end */

  /* @group Tables
  ------------------------------------------------------------ */
    /* Tables need 'cellspacing="0"' on markup */
    table {border-collapse:collapse; border-spacing:0; margin:0}
      caption, th, td {text-align:left; font-weight:normal; padding:7px 3px; font-size:0.8em; line-height:1.2em}
      th {border-bottom:solid 2px #ccc; font-weight:bold;font-size:0.8em;}
      td {font-size:0.8em;}
  /* @end */

  /* @group Forms
  ------------------------------------------------------------ */
    form {border-collapse:separate; border-spacing:0}
      legend {text-align:left; font-weight:normal}
  /* @end */
/* @end */

/* @group Helper
------------------------------------------------------------ */
  .clearfix:after {content:"."; display:block; clear:both; height:0; visibility:hidden}

  .rss {padding-left:30px; background:transparent url(../img/ui/rss.png) no-repeat 5px 5px}

  /* @group Image Replacement
  ------------------------------------------------------------ */
  .img-replace {position:relative; display:block}
    .img-replace span {position:absolute; left:0; top:0; width:100%; height:100%; z-index:100; display:block; background-repeat:no-repeat; backgound-position:0 0}
    a.img-replace span, .img-replace a span {cursor:pointer}
  /* @end */

/* @end */

/* @group Forms
------------------------------------------------------------ */
  
/* @end */


  /* @group Structure
------------------------------------------------------------ */
  /* @group Header
  ------------------------------------------------------------ */
    #header {position:relative; height:175px; border-left:1px solid rgb(180,180,180); border-right:1px solid rgb(180,180,180); background:url(../img/header-background.png) 0 0 no-repeat}

    /* @group Branding
    ------------------------------------------------------------ */
      #header h1 {position:absolute; left:700px; top:10px}
        #header h1 a {width:220px; height:100px;display:block; text-indent:-9999px}
          #header h1 a span {}

    /* @end */
    
    /* @group Search
  	------------------------------------------------------------ */
    #header form {margin-left:20px; padding-top:25px;}
    	#header form label {display:none;}
    	#search-btn {background-color:rgb(0,120,174); cursor:pointer; border:none; color:#ffffff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;}
    	#search-btn:Hover {background-color:#ffffff; cursor:pointer; border:none; color:#000000; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px; -webkit-transition-property:color, background; -webkit-transition-duration:0.2s, 0.2s; -webkit-transition-timing-function:ease-in, ease-in;}

  	/* @end */
    
    /* @group Breadcrumb
    ------------------------------------------------------------ */
    ul#breadcrumb {list-style-type:none; font-size:0.9em; line-height:1.2em; margin-left:20px; color:#fff;margin-top:80px}
      ul#breadcrumb li, ul#breadcrumb a {float:left; display:inline; margin:0}
      ul#breadcrumb li {}
        ul#breadcrumb li a {color:#fff; text-decoration:none}
        ul#breadcrumb li a:hover {}
    /* @end */

  /* @end */

  /* @group Content
  ------------------------------------------------------------ */
  #content {border-left:1px solid rgb(180,180,180); border-right:1px solid rgb(180,180,180);clear:both;}
  
    /* @group Nav
    ------------------------------------------------------------ */
    #nav {width:211px; float:left; margin-left:20px;padding-bottom:20px;}
      #nav ul {list-style:none;}
        #nav li {list-style:none;font-weight:normal;font-size:0.8em;line-height:1.2em;margin:0;display:block;}
          #nav li a {background:transparent;display:block;padding:7px;padding-left:10px;text-decoration:none;color:#000;}
          #nav li a:hover {background:rgb(0,120,174); color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px; -webkit-transition-property:color, background; -webkit-transition-duration:0.2s, 0.2s; -webkit-transition-timing-function:ease-in, ease-in;}
         #nav li li {font-size:1em;line-height:1.2em;}
         #nav li li li {font-size:1em;line-height:1.2em; margin-bottom:0px;}
        
        #nav li.active, #nav li.subactive, #nav li.subsubactive {font-weight:bold;color:rgb(229,241,247);}
        
        
          #nav li.active {background:rgb(0,120,174); color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;}
          #nav li.active a {color:#fff;background:transparent;padding-bottom:5px;}
          #nav li.active ul {margin-left:0;margin-top:0;padding-bottom:5px;padding-top:10px;background:rgb(229,241,247); margin-bottom:15px;}
          
          	#nav li.active ul li a {color:#000;padding:0;display:block;padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:3px;margin-bottom:5px;}
          	/* not sure if I needboth versions here	#nav li.active ul li a::before {content:"\2013\0020";display:inline;} */
          		#nav li.active ul li a:before {content:"\2013\0020";display:inline;}
          		#nav li.active ul li.subactive a {color:rgb(0,120,174);}
          			#nav li.active ul li.subactive a:hover {color:#fff;}
          		#nav li.active ul li a:hover {background:rgb(0,120,174); color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;}
          	
          #nav li.active ul li.subactive ul {margin-left:0;margin-top:0;margin-bottom:0; padding-top:0;background:rgb(229,241,247);}
          	#nav li.active ul li ul li a {color:#000;padding-left:30px;margin-bottom:0;}
          		#nav li.active ul li ul li a:before {content:"";}
          		#nav li.active ul li.subactive ul li a {color:#000;}
          		#nav li.active ul li.subactive ul li.subsubactive a {color:rgb(0,120,174);}
          			#nav li.active ul li.subactive ul li.subsubactive a:hover {color:#fff}
    
    /* @end */ 
    
    /* @group Primary
    ------------------------------------------------------------ */
    #primary {width:519px; float:left; margin-left:20px; padding-bottom:20px}
      #primary h1 {font-size:1.6em; margin-bottom:20px;}
      #primary h2 {font-size:1.1em; margin-top:25px; margin-bottom:3px;}
      #primary h3 {font-size:0.9em; margin-top:15px;}
      #primary h4 {font-size:0.9em; margin-top:15px;color:#000;}
      #primary table.logo {margin-top:20px;}
      	#primary table.logo th {display:none;}
      	#primary table.logo td {border-top:1px solid rgb(180,180,180);border-bottom:1px solid rgb(180,180,180);padding-left:5px;padding-right:10px;}
      		#primary table.logo td a {display:block;margin-bottom:0px;padding-bottom:0;}
      		#primary table.logo td img {margin-bottom:10px;}
      	#primary p.backtotop {font-size:0.7em;margin-bottom:20px;;}
    
    /* @end */ 
    
    /* @group Secondary
    ------------------------------------------------------------ */
    
      #secondary { width:134px; float:left;  margin-left:20px; padding-top:50px; }
      
      /* Widgets */
      #secondary .widget { background:rgb(229,241,247); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:10px 10px 1px; margin:0 0 10px; }
      #secondary .widget h3 { margin:0 0 10px; }
      #secondary .widget h3 a { text-decoration:none; }
      #secondary .widget h4 { margin: 0 0 10px; }
      #secondary .widget ul { list-style: none; margin: 0 0 10px; }
      #secondary .widget ul li { margin: 0 0 5px; }
      #secondary .widget ul li a { text-decoration: underline; }

      /* Background Colours for widgets */
      #secondary .green { background:rgb(85,118,48); color:#fff; }
      #secondary .purple { background:rgb(110,38,123); color:#fff; }
      #secondary .red { background:rgb(205,32,44); color:#fff; }
      #secondary .red h3, #secondary .red h4 { color: #fff; }

      /* Widget Link Colours */
      #secondary .red a, #secondary .red h3 a, #secondary .green a, #secondary .green h3 a, #secondary .purple a, #secondary .purple h3 a { color:#fff; }
      #secondary .red h3 a:hover, #secondary .purple h3 a:hover, #secondary .green h3 a:hover { color:#000; -webkit-transition:color 0.3s ease-in-out; }
      
      /* Linked Entries */
      .linked_entries ul { margin:4px 0 20px; }
      .linked_entries ul li { list-style:none; margin:0; }
      .linked_entries ul li a { display:block; border-top:1px solid #E5F1F7; padding:5px 0; }
      
      /* Video Widget */
      .video_widget { background:#004961; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; position: relative; }
      .video_widget h3 { padding:9px 35px 2px; font-size:14px; color:#fff; background: url(../img/video_icon.png) no-repeat 8px 6px; height: 22px; }
      .video_widget .content .thumb { width:160px; height:100px; background:#fff; position:relative; overflow: hidden; }
      .video_widget .content .play_icon { width:35px; height:35px; background:url(../img/video_play.png) no-repeat; display:block; position:absolute; top:33px; left:60px; }
      .video_widget .content h4 { font-size:11px; padding:7px 0; height:31px; }
      .video_widget .content h4 a { color:#fff; }
      .video_widget .content h4 a:hover { color:#4CA0C6; }
      
      /* Video Scrollable */
      .video_widget .video_scroll { position:relative; overflow:hidden; width:160px; height:145px; margin:0 0 10px 25px; }
      .video_widget .video_scroll .video_item_wrap { position:absolute; width:2000em; }
      .video_widget .video_scroll .content { float:left; width:160px; }
      .video_widget .browse { display: block; background: #4CA0C6; position: absolute; top: 33px; height: 100px; }
      .video_widget .browse span { width: 13px; height: 16px; display: block; background: url(../img/video_arrows.png) no-repeat; position: absolute; top: 6px; left: 6px; cursor: pointer; }
      .video_widget .prev { left: 0; width: 25px; }
      .video_widget .prev span { background-position: -13px 0; }
      .video_widget .prev span:hover { background-position: -13px -16px; }
      .video_widget .next { right: 0; width: 26px; }
      .video_widget .next span { background-position: 0 0; }
      .video_widget .next span:hover { background-position: 0 -16px; }
      
    /* @end */
      


  /* @end */
  /* @group Footer
  ------------------------------------------------------------ */
    #footer {padding-top:15px; padding-bottom:10px; background-color:rgb(76,160,198); -moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px; clear:both;}
      #footer p {font-size:0.7em; line-height:1.2em; margin-left:20px; color:#fff;}
      #footer a {color:#fff}
      #footer a:hover {color:#000000;}
    p#credit {margin-top:10px; margin-left:20px; font-size:0.7em;line-height:1.2em;color:rgb(200,200,200);}
      p#credit a {color:rgb(200,200,200);}
      p#credit a:hover {}




  /* @end */

  
  
  /* @end */

/* @group Specifics
------------------------------------------------------------ */

  /* @group Home
  ------------------------------------------------------------ */
  
  body.home #primary {width:442px;}
    body.home #primary h1 {display:block; background:rgb(0,120,174); color:#fff; padding-left:10px;padding-top:5px;margin-bottom:0;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
  	body.home #primary img {margin-bottom:10px;}
  	body.home #primary #primary1st {width:211px; float:left; background:rgb(0,120,174);-moz-border-radius:5px; -webkit-border-radius:5px;border-radius:5px;}
  		body.home #primary #primary1st p {color:#fff;padding:10px;padding-bottom:5px;}
  	body.home #primary #primary2nd {width:211px; float:right;}
  		body.home #primary #primary2nd h2 {margin-top:0;margin-bottom:10px;}
  		body.home #primary #primary2nd h3 {color:#000; font-size:0.8em;font-weight:normal;margin-top:0;margin-bottom:10px;}
  			body.home #primary #primary2nd h3 a {text-decoration:none;}
  		body.home #primary #primary2nd p a {color:#000;}
  			body.home #primary #primary2nd p a:hover {color:rgb(0,120,174);}
  			
    body.home #secondary {width:211px;padding-top:0;}
  	
  	/* Home Image Scrollable */
  	#home_image_scrollable { position:relative; overflow:hidden; width:442px; height:245px; margin:0 0 10px 0; }
  	#home_image_scrollable #item_wrap { position:absolute; width:2000em; }
  	#home_image_scrollable .panel { float:left; }

  /* @end */
  
  /* @group Entry Listing
  ------------------------------------------------------------ */
  
    /* box for stying around scrollable */
    #highlighted_outer { width:100%; border-top:1px solid rgb(180,180,180); border-bottom:1px solid rgb(180,180,180); position:relative; }
  
    /* Highlighted Scrollable Mandatory Divs */
    #highlighted_scrollable { position:relative; overflow:hidden; width:462px; height:330px; padding-top:15px; margin:0 0 0 30px; }
    #highlighted_item_wrap { position:absolute; width:2000em; }
    .highlighted_panel { float:left; }
    
    /* Highlighted entry styling */
    .highlighted_entry { float:left; width:134px; margin:0 10px; }
    .highlighted_entry h2 { font-size:0.8em!important; margin-top:5px!important; color:#000; font-weight:bold; }
    	.highlighted_entry h2 a {color:#000;text-decoration:none;}
    .highlighted_thumb { width:134px; height:200px}
      .highlighted_thumb img {width:134px}
    .highlighted_body { display:none; }
    
    /* scrollable arrows */
    .arrows { background:url(../img/arrows.png) no-repeat; position:absolute; width:18px; height:18px; cursor:pointer; display:block; }
    #scroll_left_arrow { top:15px; left:0; }
    #scroll_left_arrow:hover { background-position:0 -18px; }
    #scroll_right_arrow { top:15px; right:0; background-position:-18px 0; }
    #scroll_right_arrow:hover { background-position:-18px -18px; }
  
  /* @end */
 
   /* @group People grid layout
  ------------------------------------------------------------ */
  #primary .people {width:134px; height:260px; float:left; border-top:1px solid rgb(180,180,180); margin-bottom:20px;margin-right:20px;}
  	#primary .people h2, #primary .people p {margin-right:20px;}
  		#primary .people h2 {margin:0;font-size:0.9em;}
  		#primary .people p {display:none;}
  	#primary .people .people-image {width:134px; height:150px; display:block; overflow:hidden; background:rgb(230,230,230); margin-bottom:10px;}
  	 #primary .people .people-image img {width:134px;}
   
  /* @end */


   /* @group Category
  ------------------------------------------------------------ */
  body.category #primary img.entryimage, body.entry #primary img.entryimage {float:left; margin-right:15px; margin-bottom:5px;max-width:519px}
   
  /* @end */
  
  
  /* @group Entry
  ------------------------------------------------------------ */
  body.publications_research .entryimage { width:150px; float:left; margin-right:15px; margin-bottom:5px;}
   
  /* @end */
  
  
  
  
  
  /* @group Landing Page
  ------------------------------------------------------------ */
   body.landing {width:440px;}
   	body.landing #content {border:none; margin-top:50px;}
   		body.landing #content h1 {color:#000; margin-bottom:50px; text-align:center;}
   	    body.landing #content h1 strong {font-size:1.4em;}
   	    body.landing #content h1 span {display:none;}
   		body.landing #content img {margin-bottom:90px;}
   		body.landing #content p.intro {float:left; width:210px; font-size:1em;}
   		body.landing #content ul {float:left; width:210px; margin-bottom:30px;}
   			body.landing #content ul li {list-style:none; font-size:1em;}
   		body.landing #content p.copyright {clear:both; font-size:0.7em; color:rgb(150,150,150);}
   
   
  /* @end */
  
  
  
  .archive { margin:10px 0; }
  .archives h3 { color:#000; margin:0 0 10px; }

/* @group Sitemap
------------------------------------------------------------ */

  body.sitemap #primary {  }
  body.sitemap #primary h2 { margin: 0; padding: 0; font-size: 1.2em; }
  body.sitemap #primary h2 a { color: #000; }
  body.sitemap #primary ul { margin: 0; }
  body.sitemap #primary ul li { margin: 0 0 15px; list-style: none; }
  body.sitemap #primary ul li a { display: block; border-bottom: 1px solid #eee; padding: 4px 6px; }
  body.sitemap #primary ul li a:hover { background: #E5F1F7; border-color: #cbe3ef; }
  body.sitemap #primary ul li ul { margin: 0 0 0 10px; }
  body.sitemap #primary ul li ul li { font-size: 1em; border: none; margin: 0; }
  body.sitemap #primary ul li ul li a {  }
  body.sitemap #secondary { padding: 0; }
 
/* @end */



/* @group Blog
------------------------------------------------------------ */

  #entry_meta{background:rgb(229,241,247); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:5px 10px 1px; margin:0 0 10px;}
    #entry_meta p{margin-bottom:4px;color:#0078AE}
  body.blog .widget ul{list-style:none;margin-left:0px;}
    body.blog .widget ul li{margin-bottom:6px;border-top: 1px solid #78BEDE;padding-top:4px;}


/* @end */