/* ========================================
    
    File: preview.css
    Site: preview.com
    Author: Rob Dove (preview.co.uk)
    Copyright: 2009 preview.co.uk
 
   ======================================== */

    @import url("reset.css");
    
/* Guidelines
        font-sizes
            12pt = 1em
            14pt = 1.4em
            16pt = 1.34em
            18pt = 1.5em
            47pt = 4em;
            86pt = 7.2em
            
        colours
            main = #666666
            pink = #CC0066
            blue = #009DDD
            dark grey = #999999
            light grey = #CCCCCC
*/
    

/* ----------------------------------------
    1. Body
   ---------------------------------------- */

    /* The font-size percentage is of 16px. (0.75 * 16px = 12px) */
     
    body {
        background: #F3F3F3 url(images/linebg.jpg) top center repeat-y;
        font-family:  Arial, Verdana, Helvetica, sans-serif;
        font-size: 75%;
        color:#666666;
    }

/* ----------------------------------------
    2. Type
   ---------------------------------------- */
    h1, h2, h3 { margin:0;padding:0;font-weight:normal;}
    
    p, ul li, ol li, form, h3, h5 {line-height:1.2em;}

    h1 { color:#CCCECC; font-size:3.4em; }     /*86pt*/
    h2 { font-size:1.5em; color:#CC0066; margin:0 0 0.1em 0;line-height:1.1em}    /*18pt*/
    h3 { font-size:1.2em; color:#666666;margin:0.6em 0 0.1em 0;font-weight:bold;}
    h5 { font-size:1em; font-weight:bold; color:#CC0066; margin:0 0 0.2em 0; }
    h2.home { color:#999999; font-size:3.8em;margin:0 0 10px 0;}

    #footersocial h2 {
        margin-bottom:0.2em;
    }
    #footer h2 { color:#666666; margin:0 0 0.2em 0;}

    .col4 h2 {
        width:82%;
    }
    
    h2.lrg {
        font-size:1.7em;
        padding-bottom:0.2em;
        margin-top:-0.1em;
    }
    
    p, #content ul, #content ol { margin:0 0 0.5em 0;}
    
    #content ol, #content_colLeft ul { margin:0.5em 2em;}
    
    a { color:#009DDD; }
    a:hover, .current { color:#CC0066; }
    
    #colRight ul.nolist {
        list-style:none;
        margin-top:1em;
    }
    #colRight ul.nolist li {
        padding-bottom:0.6em;
    }
    
    #content_colRight ul, .content_colRight ul {
        list-style:none;
        color:#999999;
        margin-left:0 !important;
    }
    
    hr {
        background-color:#CCCECC;
        height:1px;
        border:0;
        margin-bottom:1em;
    }
    blockquote {
        text-indent: -0.4em;
    }
    
    ul, ul ul, ul ul ul, ul ul ul {
        list-style-type:disc;
    }
    
    .col2 {
        width:47%;
        float:left;
        padding:0 1%;

    }
    .col2 p {
        margin-bottom:10px;
    }
    
    .col2 h2 {
        font-size:1.7em;
    }
    
    .presslink {
        background:#009DDD;
        padding:10px 5px;
        color:#ffffff;
    }
    .presslink a {
        color:#ffffff;
        font-weight:bold;
        font-size:1.4em;
    }
    .pressimageitem {
        width:100%;
        border:1px solid #CCCECC;
        margin-bottom:15px;
        padding:5px 0 10px 0;
        text-align:center;
    }
    
    
    .col4_wrap {
        border-bottom:1px dashed #CCCECC;
        padding:10px 0;
        clear:both;
    }
    
    .col4, .colmiddle {
        display:inline-block;
        width:23%;
        margin-right:2%;
        vertical-align:top;
    }
    .bordertop {
        border-top:1px dashed #CCCECC;
        padding-top:10px;
    }
    .colmiddle {
        width:49%;  
    }
    .related_proj {
        display:inline-block;
        margin-right:3px;
    }
    
    ul.twocol li {
        width:49%;
        float:left;
        margin:4px 1px;
    }
    
    ul.indent {
        margin-left:1.5em !important;
    }
    

/* ----------------------------------------
    3. Classes
   ---------------------------------------- */  
    
    .clearall { clear:both;}
    .clearright { clear:right; }
    .floatright { float:right !important;}
    .floatleft { float:left; }
    .alignright { text-align:right;}
    .aligncenter { text-align:center;}
    .invisible {position:absolute; left:-9999px; top:-9999px;}
    .strong { font-weight:bold;}
    .lowlight { color:#999999; margin-bottom:0;}
    .highlight{ color:#CC0066; }
    .lrg_grey { font-size:2.6em; color:#CCCECC;margin-bottom:0;}
    .noright { margin-right:0 !important;}
    .border { border:1px solid #CCCECC;}
    .noborder, ul.polls li.first { border:0 !important; }
    .notop { margin-top:0;padding-top:0;}
    .negmarg { margin-bottom:-20px;}
    a.rsslink {
        background:url('images/rss.gif') no-repeat bottom left;
        padding-left:25px;
    }
    .nopad { padding:0;}
    .extratop { padding-top:10px;}
    ul.newslinks li {
        margin-bottom:1em;
    }
    .newsimage, #map_canvas {
        margin-bottom:10px;
    }
    #map_canvas {
        border:1px solid #CCCECC;
    }
    ul.polls {
        padding:0;
        margin:0 !important;
    }
    ul.polls li {
        list-style:none;
        padding:12px 0;
        border-top:1px dashed #333333;
    }

    input.votebutton {
        cursor:pointer;
        float:right;
        margin:-2px 20px 0 0;
    }
    input.votebutton:hover {
        background:url(images/vote_over.jpg) no-repeat;
    }
  
    #pageimages img {
        margin-bottom:16px;
        margin-right:15px;
    }
    #pageimages2 img {
        margin-bottom:8px;
    }
    #pageimages img.right,  #pageimages img.none  {
        margin-right:0;
    }
    #pageimages img.border {
        border:1px solid #CCCECC;
    }
    
    .quotebox {
        width:298px;
        float:left;
        margin:10px 2%;
        background-color:#E9F3F9;
    }    
    .quotebox .qhead{
        background:url(images/quotehead.gif) no-repeat top center;
        height:10px;
        width:100%;
    }
    .quotebox .qfoot{
        background:url(images/quotefoot.gif) no-repeat top center;
        height:25px;
        width:100%;
    }
    .quotebox .qcontent, .quoteboxsml .qcontent {
        padding:0 15px;
    }
    
    .quoteboxsml {
        width:200px;
        float:left;
        margin:10px 2%;
        background-color:#E9F3F9;
    }    
    .quoteboxsml .qhead{
        background:url(images/quoteheadsml.gif) no-repeat top center;
        height:10px;
        width:100%;
    }
    .quoteboxsml .qfoot{
        background:url(images/quotefootsml.gif) no-repeat top center;
        height:25px;
        width:100%;
    }
    
    .quoteboxW {
        width:438px;
        float:left;
        margin:10px 0;
        background-color:#E9F3F9;
    }    
    .quoteboxW .qhead{
        background:url(images/quoteheadW.jpg) no-repeat top center;
        height:6px;
        width:100%;
    }
    .quoteboxW .qfoot{
        background:url(images/quotefootW.jpg) no-repeat bottom center;
        height:21px;
        width:100%;
    }
    .quoteboxW .qcontent {
        padding:5px 15px 0px 15px;
    }
    .quoteboxW .qcontent p {
        margin-bottom:0;
    }
    
    /*tagclouds*/
    ul.tagcloud {
        text-align:left;
        font-weight:bold;
    }
    .tagcloud li {
        display:inline-block;
        padding:0 5px 0 0 !important;
        margin:0 0 !important;
        border:0 !important;
    }
    .tagcloud2 li {
        padding:0;
        margin:0 0 !important;
    }
    
    .tagcloud li a {
        color:#AAAAAA;
        
    }
    .tagcloud li a:hover {
        color:#CC0099;
    }
    
    li.size_0 {
        display:none !important;
    }
    .size_1 {
        font-size:0.7em;
    }
    .size_2 {
        font-size:0.8em;
    }
    .size_3 {
        font-size:0.9em;
        font-weight:normal;
    }
    .size_4 {
        font-size:1em;
        font-weight:normal;
    }
    .size_5 {
        font-size:1.1em;
        font-weight:normal;
    }
    .size_6 {
        font-size:1.2em;
        font-weight:normal;
    }
    .size_7 {
        font-size:1.3em;
        font-weight:normal;
    }
    .size_8 {
        font-size:1.4em;
        font-weight:normal;
    }
    .size_9 {
        font-size:1.5em;
        font-weight:normal;
    }
    .size_10 {
        font-size:1.6em;
        font-weight:normal;
    }
    .size_11 {
        font-size:1.7em;
        font-weight:normal;
    }
    .size_12 {
        font-size:1.8em;
        font-weight:normal;
    }
    .size_13 {
        font-size:1.9em;
        font-weight:normal;
    }
    .size_14 {
        font-size:2em;
        font-weight:normal;
    }
    .size_15 {
        font-size:2.1em;
        font-weight:normal;
    }
    
/* ----------------------------------------
    4. Layout
   ---------------------------------------- */

    #wrapper {
        width:910px;
        margin:20px auto;
    }
    #header {
        margin-bottom:40px;
    }
    
    #colLeft, #colRight {
        margin-top:20px;
    }
    
    #colBoth {
        clear:both;
        width:100%;
    }
    #colLeft {
        float:left;
        width:213px;
    }
    #colRight {
        float:left;
        width:675px;
        margin-left:22px;
    }
        #content_colLeft, .content_colLeft {
            width:445px;
            float:left;
        }
        #content_colRight, .content_colRight {
            width:200px;
            float:left;
            margin-left:20px;
        }
        #pagination {
            clear:both;
            border-top:1px solid #CCCECC;
            margin-top:20px;
            padding:10px 0;
        }
        .work_list_item {
            border-bottom:1px dashed #CCCECC;
            padding-bottom:20px;
            margin-bottom:15px;
        }
    
    #footer {
        clear:both;
        border-top:1px dashed #CCCECC;
        padding:10px 0 40px 0;
        margin-top:30px;
        color:#999999;
    }
    #footersocial {
        border-top:1px dashed #CCCECC;
        padding-top:10px;
        margin-top:20px;
    }
        #twitter {
            display:block;
            width:445px;
            height:50px;
            background:url(images/twitter_bg.jpg) no-repeat;
        }
            #twitter ul, #twitter p {
                list-style:none;
                color:#ffffff;
                width:95%;
                margin:0 auto;
                padding-top:6px;
            }
            #twitter ul li {
                padding:0;
                margin:0;
            }
            #twitter a { color:#ffffff;}
        #flickr a {
            width:64px;
            height:48px;
            display:inline-block;
            overflow:hidden;
            margin-right:3px;
            border:1px solid #CCCECC;
        }
        #flickr a img {
       
        }
        FORM#SearchForm {
            position:relative;
        }
        #search_results {
            position:absolute;
            z-index:100;
            background:#f4f4f4;
            width:175px;
            padding:20px;
            bottom:35px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border:1px solid #eeeeee;
        }
        #search_results ul { list-style:none;margin-bottom:10px;}
        #search_results ul li { padding:0.2em 0; border-bottom:1px solid #ffffff;}

    #work_home {
        margin-top:20px;
        position:relative; 
        overflow:hidden; 
        clear:both;
        width:908px;
        height:348px;
        border:1px solid #CCCECC;
    }
    /* root element for the scroll pics */ 
    #work_home .work_home_images { 
        width:20000em; 
        position:absolute; 
        clear:both; 
        margin:0; 
        padding:0; 
    }
        
    /* remove margins from the image */ 
    .work_home_images img { 
        margin:0; 
    } 
     
    /* make A tags our floating scrollable items */ 
    .work_home_images div.workitemimage { 
        display:block; 
        float:left; 
        margin:0;
        cursor:pointer;
        position:relative;
    }
    
    /* tooltip styling */
    .tooltip-content {
        display: none;        /* required */
        position: absolute;   /* required */
        background:url(images/tooltip_med.png) no-repeat; 
        font-size:12px; 
        height:30px; 
        width:145px; 
        padding:5px 10px; 
        color:#ffffff;
        line-height:1.2em;
    }

    .bigtooltip { 
        background:url(images/tooltip_lrg.png) no-repeat; 
        font-size:12px; 
        height:69px; 
        width:201px; 
    }
    
    .tooltip-content p {
        margin:0;
        padding:0;
    }
    .tooltip-content p.middle {
        padding-top:0.3em;
    }
    .tooltip-content p.aligncenter {
        margin-left:-0.4em;
    }
    
    #work_home .less, #work_home .less a { 
        color:#999 !important; 
        font-size:11px; 
    }
    
    .navi {
        background:url(images/navi_bg.png) no-repeat;
        width:81px;
        height:24px;
        position:relative;
        display:block;
        margin-top:-30px;
        float:right;
        margin-right:10px;
        text-align:center;
    }
    .navi a {
        display:inline-block;
        border:1px solid #009DDD;
        height:10px;width:10px;
        cursor:pointer;
        margin:6px 3px 0 3px;
    }
    .navi a.current {
        border:1px solid #009DDD;
        background:#009DDD;
    }
    
    #flashcontent {
        width:668px;
        height:320px;
    }

/* ----------------------------------------
    5. Navigation
   ---------------------------------------- */

    #navigation {
        float:right;
        margin-top:10px;
        background:url(images/nav_bg.jpg) no-repeat bottom;
        display:block;
        height:25px;
        width:auto;
        padding:0 10px 0 8px;
    }
    #navigation ul {
        margin:0 auto;
        margin-left:3px;
    }
    #navigation ul li {
        display:inline;
        padding:0;
        margin:0;
        border-left:1px solid #CCCECC;
    }
    
    #navigation ul li a {
        font-size:1.2em;   /*16pt*/
        font-weight:bold;
        line-height:1em;
        padding:0 0.65em 0 0.85em;
    }
    
    #colLeft ul,  #colLeft FORM {
        list-style:none;
        margin:0.4em 0 1.2em 0;
    }
    #colLeft ul li {
        margin:0;
        padding:0.6em 0;
        border-top:1px dashed #CCCECC;
    }
    
    #footer ul {
        float:right;
       
    }
    #footer ul li {
        display:inline;
        border-left:1px solid #009DDD;
    }
    #footer ul li a {
        padding:0 0.2em 0 0.4em;
        line-height:1em;
    }
    
    #navigation ul li.first, #footer ul li.first {
        border-left:0;
    }


/* ----------------------------------------
    6. Forms
   ---------------------------------------- */
    .formrow {
        padding:5px 0;
        clear:both;
    }
    .formrow .half {
        width:48%;
        float:left;
    }
    
    .formrow input, .formrow textarea, .formrow select {
        width:98%;
    }
    .formrow input.radio {width:auto;display:inline;margin-left:10px;}
    
    #colLeft FORM {
            margin-right:10px;
    }

    #newsletter label, .newsletter label {
        position: absolute;
        top: -9999px;
    }
    #newsletter input,  .newsletter input, #colLeft select {
        width: 100%;
        margin: 5px 0px;
    }
    
    #newsletter input.submit, .newsletter input.submit, input.submit {
        color:#009DDD;
        border:0;
        background:none;
        width:auto;
        font-size:1.05em;
    }
    #newsletter input.submit:hover, .newsletter input.submit:hover, input.submit:hover {
        cursor:pointer;
    }
    
    input.submit2 {
        width:auto;
    }
    
    .nowidth input, .nowidth textarea, .nowidth select {
        width:auto;
    }
    
    form.nolabels label {
        position:absolute;
        left:-9999px;
        top:-99999px;
    }
    
    div.searchbar {
        background:url(images/searchbg.jpg) no-repeat;
        width:213px;
        height:42px;
    }
    div.searchbar input {
        width:198px;
        margin:8px 6px;
        padding:4px 0;
        font-size:1.2em;
        background:#ffffff url(images/searchicon.gif) no-repeat 97%;
        border:1px solid #CCCCCC;
    }
    div.searchbar input.submit {
        background:#DDDDDD;
        width:auto;
        color:#0099CC;
        font-weight:bold;
        margin:0;
        padding:1px;
        float:right;
        margin-right:6px;
    }
    
/* ----------------------------------------
    7. Other
   ---------------------------------------- */

    /* google maps */
    .googledir {
        font-size:1em;
        line-height:1.2em;
    }
    .googledir td {
        padding:5px 0;
        background-color:#eeeeee;
    }
    .googledir img {
        display:none;
    }
    
    
    div.overlay {
        /* growing background image */
        background:url(images/overlay_bg.png) center no-repeat;
        /* dimensions after the growing animation finishes  */
        width:271px;
        height:414px;		
        /* initially overlay is hidden */
        display:none;
        /* some padding to layout nested elements nicely  */
        padding:0;
        color:#ffffff; 
    }

    /* default close button positioned on upper right corner */
    div.overlay div.close {
        background-image:url(images/close.png);
        position:absolute;
        right:-5px;
        top:0px;
        cursor:pointer;
        height:35px;
        width:35px;
    }
    
    div.contentWrap {
        width:87%;
        margin:0 auto;
        padding-top:30px;
    }
    div.contentWrap h2 {
        color:#ffffff;
    }
    div.contentWrap form LABEL {
        margin-top:1px;
    }
    div.contentWrap form INPUT {
        margin-bottom:1px;
    }

    
    
    
    
    .jScrollPaneContainer {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    
    .jScrollPaneTrack {
        position: absolute;
        cursor: pointer;
        right:4px;
        top:0;
        height: 100%;
        background: #ddd;
    }
    .jScrollPaneDrag {
        position: absolute;
        background: #999;
        cursor: pointer;
        overflow: hidden;
    }
    .jScrollPaneDragTop {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    .jScrollPaneDragBottom {
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
    a.jScrollArrowUp {
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        text-indent: -2000px;
        overflow: hidden;
        /*background-color: #666;*/
        height: 9px;
    }
    a.jScrollArrowUp:hover {
        /*background-color: #f60;*/
    }
    
    a.jScrollArrowDown {
        display: block;
        position: absolute;
        z-index: 1;
        bottom: 0;
        right: 0;
        text-indent: -2000px;
        overflow: hidden;
        /*background-color: #666;*/
        height: 9px;
    }
    a.jScrollArrowDown:hover {
        /*background-color: #f60;*/
    }
    a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
        /*background-color: #f00;*/
    }


    #twitter-ticker{
        margin-top:30px;
        width:430px;
        height:630px;
        display:none;
        text-align:left;
    }

    #tweet-container{
        height:630px;
        width:auto;
        overflow:hidden;
    }
    
    .tweet{
        margin:0 5px 5px 5px;
        width:400px;
    }

    .tweet .user{
        font-weight:bold;
        margin-right:3px;
    }
    .tweet .time {
        color:#999999;
        font-size:0.8em;
        margin:0;
        margin-top:-0.8em;
        padding:0;
    }
    #loading{
        margin:100px 95px;
    }
    
    .tweet .qhead{
        background:url(images/quoteheadLRG.gif) no-repeat top center;
        height:10px;
        width:100%;
        color:#E9F3F9;
    }
    .tweet .qfoot{
        background:url(images/quotefootLRG.gif) no-repeat top center;
        height:25px;
        width:100%;
        color:#E9F3F9;
    }
    .futureteam {
        clear:both;
    }
    .teamimage {
        float:left;
    }
    .teampost {
        float:left;
        background:url(images/tweetteam.jpg) no-repeat top center;
        height:60px;
        width:315px;
        color:#ffffff;
        padding:5px 10px;
        margin-left:10px;
        margin-top:5px;
    }
    .teampost  a {
        color:#ffffff;
    }
    .limiterBox {
        border: 1px solid #000;
        border-top: none;
        background-color: #ffc;
        padding: 3px 6px;
        font-size: 10px;
    }