/*
*************************************************
  Description: Collabora Ltd. Stylesheet
  Author: Andrew Phillips {andrew@cbtech.co.uk}
*************************************************
*/

/*-------------------------------------------    
    Reset all styles 
-------------------------------------------*/
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;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: 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
-------------------------------------------*/

    body {
      font-family: "Helvetica", "Helvetica LT Std", "Arial", sans-serif;
      line-height: 120%;
      background: #fff;
    }

    p, a {
      color: #666;
      font-size: 13px;
      margin-bottom: 10px;
      width: 96%;
      /* text-align: justify; */
    }
    
    #beta p, #beta h3 {
      padding-left: 2%;
    }
    
    p a {
      color: #09c;
    }
    
    h3 {
      color: #666;
      font-size: 30px;
      letter-spacing: -1px;
      margin-top: 30px;
      margin-bottom: 10px;
      line-height: 38px;
    }
        
    h4 {
      color: #666;
      font-size: 13px;
      margin-left: 20px;
      float: left;
      line-height: 30px;
    }
    
    h5 {
      color: #666;
      font-size: 20px;
      margin-top: 20px;
      margin-bottom: 10px;
      line-height: 26px;
    }
        
    #content ul {
      margin-bottom: 20px;
      margin-left: 2px;
    }
    
    #content ul li {
      color: #666;
      font-size: 13px;
      list-style-type: square;
      list-style-position: inside;
      list-style-image:url("../img/squarebullet.png");
      margin-bottom: 10px;
    }
    
    #content.layout-one #alpha h4 {
      font-size: 18px;
      color: #666;
      float: none;
      margin-left: 0;
      
    }
    
    h3 a {
      color: #666;
      font-size: 30px;
      letter-spacing: -1px;
      margin-top: 30px;
      margin-bottom: 10px;   
      text-decoration: none;   
    }
    
    h3 a:hover {
      color: #09c;
    }

  /* DEVELOPER BIO */

    #beta.developerbio h3 {
      font-size: 24px;
      margin-left: 5px;
    }
    
    #beta.developerbio h4 {
      font-size: 16px;
      margin: 0px auto;
      line-height: 100px;
      margin-left: 10px;
    }
    
    #beta.developerbio img {
      margin: 0px auto;
    }
    
    #beta.developerbio div.bioimg {
      
      height: 100px;
      width: 100px;
            float: right;
      margin: 20px;
    }
    
    #beta.developerbio p {
      margin: 0px auto;
      padding-bottom: 20px;
    }
/*-------------------------------------------    
    Header
-------------------------------------------*/

  
    #header {
      background: url("../img/header/bg.png") repeat-x;
      height: 84px;
    }
    
    #header-wrapper {
      width: 900px; 
      height: 84px;     
      margin: 0px auto;
      background: url("../img/header/wrapperbg.png") no-repeat;
    }

    #header-wrapper h1 a {
      text-indent: -9999px;
      overflow: hidden;
      background: url("../img/header/logo.png") no-repeat;
      height: 84px;
      width: 265px;
      display: block;
      margin-left: 5px;
      float: left;
    }
    
    /* NAVIGATION */

    #navigation {
      width: 625px;
      float: left;
    }
    
    
    #navigation ul li a {
      float: left;
      text-indent: -9999px;
      overflow: hidden;
      display: block;
      height: 84px;
    }
    
    #navigation ul li a#home {
      background: url("../img/header/home.png") no-repeat;
      width: 59px;
    }
    
    #navigation ul li a#home.active {
    	background: url("../img/header/home-active.png") no-repeat;
    }
    
    #navigation ul li a#about {
      background: url("../img/header/about.png") no-repeat;
      width: 91px;
    }
    
    #navigation ul li a#about.active {
    	background: url("../img/header/about-active.png") no-repeat;
	}
    #navigation ul li a#services {
      background: url("../img/header/services.png") no-repeat;
      width: 89px;
    }
    
    #navigation ul li a#services.active {
    	background: url("../img/header/services-active.png") no-repeat;
	}

    #navigation ul li a#projects {
      background: url("../img/header/projects.png") no-repeat;
      width: 93px;
    }
    
    #navigation ul li a#projects.active {
    	background: url("../img/header/projects-active.png") no-repeat;
	}

    #navigation ul li a#events {
      background: url("../img/header/events.png") no-repeat;
      width: 73px;
    }
    
    #navigation ul li a#events.active {
    	background: url("../img/header/events-active.png") no-repeat;
	}

    #navigation ul li a#blog {
      background: url("../img/header/blog.png") no-repeat;
      width: 57px;
    }
    
    #navigation ul li a#blog.active {
    	background: url("../img/header/blog-active.png") no-repeat;
	}

    #navigation ul li a#press {
      background: url("../img/header/press.png") no-repeat;
      width: 65px;
    }
    
    #navigation ul li a#press.active {
    	background: url("../img/header/press-active.png") no-repeat;
	}

    #navigation ul li a#contact {
      background: url("../img/header/contact.png") no-repeat;
      width: 87px;
    }
    
    #navigation ul li a#contact.active {
    	background: url("../img/header/contact-active.png") no-repeat;
	}

/*-------------------------------------------    
    Intro
-------------------------------------------*/

    #intro {
      width: 860px;
      height: 214px;
      margin: 0px auto;   
    }
        
    #intro h2 {
      text-indent: -9999px;
      overflow: hidden;
    }
    
    #hl {
      height: 1px;
      background: #ccc;
    }
    
    /* INTRO PICS */
    #intro.index {background: url("../img/intro/index.png") no-repeat;}
    #intro.about {background: url("../img/intro/about.png") no-repeat;}
    #intro.interviews {background: url("../img/intro/interviews.png") no-repeat;}
    #intro.whoweare {background: url("../img/intro/whoweare.png") no-repeat;}
    #intro.mobile {background: url("../img/intro/mobile.png") no-repeat;}
    #intro.communications {background: url("../img/intro/communications.png") no-repeat;} 
    #intro.multimedia {background: url("../img/intro/multimedia.png") no-repeat;}
    #intro.services {background: url("../img/intro/services.png") no-repeat;}
    #intro.development {background: url("../img/intro/development.png") no-repeat;}
    #intro.projectmanagement {background: url("../img/intro/projectmanagement.png") no-repeat;}
    #intro.training {background: url("../img/intro/training.png") no-repeat;}    
    #intro.consultancy {background: url("../img/intro/consultancy.png") no-repeat;} 
    #intro.infrastructure {background: url("../img/intro/infrastructure.png") no-repeat;} 
    #intro.architecture {background: url("../img/intro/architecture.png") no-repeat;}  
    #intro.casestudies {background: url("../img/intro/casestudies.png") no-repeat;}   
    #intro.olpc {background: url("../img/intro/olpc.png") no-repeat;}  
    #intro.irex {background: url("../img/intro/irex.png") no-repeat;} 
    #intro.songbird {background: url("../img/intro/songbird.png") no-repeat;} 
    #intro.banshee {background: url("../img/intro/banshee.png") no-repeat;} 
    #intro.projects {background: url("../img/intro/projects.png") no-repeat;} 
    #intro.telepathy {background: url("../img/intro/telepathy.png") no-repeat;} 
    #intro.gstreamer {background: url("../img/intro/gstreamer.png") no-repeat;}
    #intro.gstreamer-interview {background: url("../img/intro/gstreamer.png") no-repeat;}
    #intro.dbus {background: url("../img/intro/dbus.png") no-repeat;} 
    #intro.webkit {background: url("../img/intro/webkit.png") no-repeat;}
    #intro.webkit-interview {background: url("../img/intro/webkit.png") no-repeat;} 
    #intro.farstream {background: url("../img/intro/farstream.png") no-repeat;}
    #intro.farstream-interview {background: url("../img/intro/farstream.png") no-repeat;}
    #intro.libnice {background: url("../img/intro/libnice.png") no-repeat;}
    #intro.pitivi {background: url("../img/intro/pitivi.png") no-repeat;}
    #intro.pulseaudio {background: url("../img/intro/pulseaudio.png") no-repeat;} 
    #intro.pulseaudio-interview {background: url("../img/intro/pulseaudio.png") no-repeat;}
    #intro.rygel {background: url("../img/intro/rygel.png") no-repeat;}
    #intro.events {background: url("../img/intro/events.png") no-repeat;}
    #intro.press {background: url("../img/intro/press.png") no-repeat;}
    #intro.contact {background: url("../img/intro/contact.png") no-repeat;}
    #intro.vacancies {background: url("../img/intro/vacancies.jpg") no-repeat;}
    #intro.tizen {background: url("../img/intro/tizen-logo.png") no-repeat;}
    #intro.genivi {background: url("../img/intro/genivi.png") no-repeat;}
    #intro.linaro {background: url("../img/intro/linaro.png") no-repeat;}
    #intro.ubuntu {background: url("../img/intro/ubuntu.png") no-repeat;}
    #intro.fedora {background: url("../img/intro/fedora.png") no-repeat;}
    #intro.android {background: url("../img/intro/droid.png") no-repeat;}


/*-------------------------------------------    
    Content
-------------------------------------------*/

    #content {
      width: 860px;
      margin: 0px auto;
    }
    
/* LAYOUT 1 - two column layout (61% alpha - 39% beta with darker background) */
    
    #content.layout-one #alpha {
      width: 61%;
      float: left;
    }
    
    #content.layout-one #beta {
      width: 39%;
      float: left;
      background: #f2f2f2;
      margin-top: 20px;
      height: 100%;
    }
    
    /* TYPOGRAPHIC EXCEPTIONS FOR LAYOUT 1 */
    
      #content.layout-one #beta h3 {
        margin-top: 20px;
      }
    
    
/* LAYOUT 2 - two column layout (50% alpha - 50% beta) */

      #content.layout-two div.alpha, 
      #content.layout-two div.beta 
      {
        width: 50%;
        float: left;
      }
      
      #content.layout-two p.caption {
        text-align: right;
      }
      
      
/* LAYOUT 3 - two column layout (70% alpha - 30% beta) */

      #content.layout-three div.alpha {
        width: 70%;
        float: left;
      }
      
      #content.layout-three div.beta {
        width: 30%;
        float: left;
      }
      
      #content.layout-three div.beta p {
        margin: 0px auto;
        margin-top: 20%;
        text-align: center;
      }
      
      #content.layout-three div.beta p.caption {
        margin-top: 0;
        text-align: left;
      }
 
/* LAYOUT 4 - two column layout (70% alpha - 30% beta) */

      #content.layout-four div#alpha {
        width: 300px;
        float: left;
      }
      
      #content.layout-four div#beta {
        width: 560px;
        float: left;
      } 
      
      #content.layout-four div#alpha ul {
        margin-top: 0px;
      }
      
      #content.layout-four div#alpha ul li {
        list-style-type: none;
        list-style-image: none;
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom: 1px solid #eee;
        margin: 0;
        width: 90%;
      }
      
      #content.layout-four div#alpha ul li a {
        text-decoration: none;
        font-weight: bold;
      }
      
      #content.layout-four div#alpha ul li a:hover {
        color: #09c;
      }
      
      h1#page-title {
        margin: 30px;
        line-height: 150%;
      }
      
      
/* BLOG - two column layout (70% alpha - 30% beta) */

      #content.blog div#alpha {
        width: 600px;
        float: left;
      }
      
      #content.blog div#beta {
        width: 260px;
        float: left;
      }
      
      #content.blog div.daygroup h2 {
        font-size: 18px;
        text-transform: uppercase;
        color: #000;
        width: 100%;
        border-bottom: 1px solid #d5d5d5;
        padding: 10px 0px;
        margin-top: 30px;
      }
      
      #content.blog h3.author a {
        font-size: 14px;
        color: #09c;
        text-decoration: none;
        text-align: right;
        letter-spacing: 0;
        float: right;
        margin-right: 10px;
        margin-top: 0px;

      }
      
      #content.blog img.face {
        float: right;
        margin-top: -20px;
      }
      
      #content.blog h4.title a {
        text-decoration: none;
        color: #000;
        padding: 0;
        margin: 0;
        margin-left: -20px;
        font-size: 22px;
        float: left;
        width: 90%;
        display: inline;
      }
      
      #content.blog div#beta h4 {
        width: 100%;
        text-align: right;
        font-size: 24px;
        margin: 20px 0px;
      }
      
      #content.blog div#beta div#lastupdated p {
        text-align: right;
        color: #1E587E;
      }
      
      #content.blog div.entry {
        clear: both;
      }
 
      #content.blog #beta ul li{
        list-style-type:none;
        list-style-image: none;
        padding: 0;
        margin: 0;
      }
      
      #content.blog #beta ul li a {
        text-decoration: none;
        color: #09c;
      }
      
      #content.blog #beta ul {
        margin-left: 20px;
        text-align: right;
      }
      
      #content.blog  {
        font-size: 13px;
      }
      
      #content.blog p {
        color: #000;
      }
 
/* Contact Page */ 

     div.location {
      width: 286px;
      float: left;
     }
     
     div.location address{
      font-style: normal;
      color: #666;
      font-size: 13px;
     }
 
/*-------------------------------------------    
    Footer
-------------------------------------------*/ 

    #footer {
      background: #1e587f;
      clear: both;
      margin-top: 20px; 
    }
    
    #footer-wrapper {
      width: 900px;
      margin: 0px auto;
      background: url("../img/footer/wrapperbg.png") no-repeat;
    }
    
    /* SUBNAVIGATION */
    
    #subnavigation {
      width: 858px;
      margin: 0px auto;
    }
    
    #subnavigation ul {
      padding-top: 20px;
    }
    
    #subnavigation ul li.home {
     width: 87px;
    }
    
    #subnavigation ul li {
      width: 127px;
      float: left;
    }
    
    #subnavigation ul li a, #subnavigation ul li ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: bold;    
    }
    
    #subnavigation ul li ul li a {
      font-weight: normal;
      font-size: 11px;
    }
    
    #subnavigation ul li a.active {
    	color: #09c;
    }
    
    #subnavigation ul li ul {
      padding-top: 10px;
    }
    
    #subnavigation ul li ul li {
      list-style-type: disc;
      list-style-position: inside;
      width: 75%;
      padding-left: 5px;
      text-indent: -12px;
      margin-left: 9px;
      line-height: 13px;
      list-style-image:url("../img/footer/bullet.png");
    }
    
    #footer-wrapper h6 {
      color: #fff;
      font-size: 10px;
      margin-left: 20px;
      margin-top: 20px;
    }
    
/*-------------------------------------------    
    Affiliations on Who we are page
-------------------------------------------*/

    ul#affiliations {
      margin-top: 40px;
    }

    ul#affiliations li {
      height: 150px;
      text-transform: uppercase;
      float: left;
      width: 143px;
      text-align: center;
      font-size: 13px;
      color: #666;
      list-style-type: none;
      list-style-image: none;
    }
    
    ul#affiliations li#gnome-foundation {
      background: url("../img/about/affiliations/gnome-foundation.png") no-repeat 50% 70%;
    }
    
    ul#affiliations li#gnome-mobile {
      background: url("../img/about/affiliations/gnome-mobile.png") no-repeat 50% 70%;
    }
    
    ul#affiliations li#debian-developers {
      background: url("../img/about/affiliations/debian-developers.png") no-repeat 50% 70%;
    }
    
    ul#affiliations li#sugar-labs {
      background: url("../img/about/affiliations/sugar-labs.png") no-repeat 50% 70%;
    }
    
    ul#affiliations li#ubuntu {
      background: url("../img/about/affiliations/ubuntu.png") no-repeat 50% 70%;
    }    
    
    ul#affiliations li#gentoo {
      background: url("../img/about/affiliations/gentoo.png") no-repeat 50% 70%;
    }   
    
    ul#affiliations li#fedora {
      background: url("../img/about/affiliations/fedora.png") no-repeat 50% 70%;
    }   
    
    ul#affiliations li#kde {
      background: url("../img/about/affiliations/kde.png") no-repeat 50% 70%;
    }   
        
/*-------------------------------------------    
    Misc
-------------------------------------------*/

    div.clear {
      clear: both;
    }
    
    img.bioshot {
      float: left;
    }
    
    p.top {
      margin-top: 40px;
    }
    
    p.img {
      text-align: center;
    }
    
    div.bottom {
      margin-top: 40px;
    }

/* vacancy helpers */
div.roleslist h4 {
  float: none;
  margin-bottom: 10px;
}