/**
* This is the screen layout for gridline.nl
*
* common distances:
*
* common colors:
*
* #777
* #275157 - turquoise
* #c0340d - donker oranje
*
* ? Gridline, 2009
*/

/***** Main layout *****/

body, html {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    color: #444;
}

html {
    background: url("/images/background.png") scroll;
}

body {
    background: url("/images/background-grad.png") scroll repeat-x;
}

#wrapper {
    position: relative;

    margin: 0 0 -1px 0;
    padding: 0 0 53px  0;

    min-height: 100%;
}

#container {
    background: white;

    border: solid #777 1px;
    border-top: solid white 1px;

    width: 948px;
        
    margin: -1px auto 0 auto;
    padding: 0;
}

#header {
    height: 68px;
    margin: 0px 0px 0 0px;
    padding: 0 33px 0 33px;
    background: url('/images/header-gradient-regular.png') repeat-x;
}

.frontpage-route #header {
    height: 150px;
    background: transparent url('/images/fp_gradient.png') repeat-x 0px 19px ;
}

#logo {
    float: left;
    margin: 8px 0 0 -1px;
}

#logo a img {
    display: none;
}

#logo a {
    display: block;
    width: 161px;
    height: 37px;
    background: url('/images/gridline-logo-regular.png') no-repeat;
}

.frontpage-route #logo {
    float: left;
}
.frontpage-route #logo a {
    background: url('/images/gridline-logo-frontpage.png') no-repeat;
}

#top-menu {
    position: relative; /*  This makes the element positioned, which puts
                            it above the feature in the stacking order
                            (z-index doesn't work) */
    float: right;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    line-height: 10px;
}

#feature {
    float: right;
    margin: -18px -33px 0 0;
    padding: 0 0 0 0;

    line-height: 0;
}

#above-text{
    width: 629px;
    margin: 0 0 32px 0;
    padding: 0;
}

#above-text.empty
{
    margin: 0 0 0px 0;
}

#left-sidebar {
    width: 221px; /* full width is 285px */
    float: left;

    border-top: solid transparent 1px;

    padding: 0 0 0 0;
    margin: 0px 33px 85px 33px;
}

#main {
    float: left;
    margin: 0px 0px auto 0px;
    width: 660px;
    border-bottom: solid white 1px;
    padding-bottom: 85px;
}

.no-right-sidebar #main #content {
    margin-right: 25px;
    overflow: hidden;
}

.no-left-sidebar #main #content {
    margin-left: 25px;
}

#right-sidebar {
    width: 139px; /* full width is 203px */
    float: right;

    border-top: solid transparent 1px;
    padding: 0 0 0 0;

    font-size: 12px;
    line-height: 15px;
    margin: -4px 23px 0 0;
    padding: 0 10px 0 0;
}

#content {
    margin: -3px 203px auto 0;
    padding: 0 0 0 0;

    border-top: solid transparent 1px;
}

.frontpage-route #content {
    margin: 0px 285px auto 0;

}

.frontpage-route #right-sidebar {
    width: 221px;
}

#footer {
    background: white;
    margin: auto 33px 25px 33px;
    padding: 10px 0 0 0;

    border-top: solid #c0340d 1px;

    font-size: 13px;
    line-height: 20px;
    color: #777;
    clear: left;
}

/***** General Details *****/
#content .intro {
    font-weight: bold;
}

/***** Top Menu Details *****/
#top-menu {
    margin-top: -2px;
}

.frontpage-route #top-menu {
}

#top-menu li
{
    color: #f1f1f1;
    list-style-type: none;
    list-style-image: none;
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
    line-height: 10px;
}

#top-menu li + li
{
    padding-left: 15px;
    background: url('/images/top-menu-bullet-regular.png') no-repeat 6px 7px;
}

.frontpage-route #top-menu li + li
{
    background: url('/images/top-menu-bullet-frontpage.png') no-repeat 6px 7px;
}

#top-menu li a
{
    font-size: 10px;

    font-weight: normal;
    text-transform: lowercase;
    color: #f1f1f1;
}

.frontpage-route #top-menu li a {
    color: #c15f44;
}

#top-menu li a:hover
{
    color: #fff;
}

.frontpage-route #top-menu li a:hover
{
    color: #e07558;
}

/***** Block Details *****/
.block {
    margin-bottom: 15px;
    font-size: 14px;
}

.block ul {
    list-style-type: none;
    list-style-position: outside;
    padding: 0 0 10px 0;
    margin: 0;
    font-weight: bold;
    line-height: 20px;
}

.block.menu {
    font-weight: bold;
    margin-bottom: 25px;
}

.block.menu ul {
    padding: 0;
    list-style-position: outside;
}

.block.menu ul li {
    margin-left: 0px;
    padding-left: 0px;
    background: none;
}

.block.menu ul li.expandable {
    margin: 0 0 0 -14px;
}

.block.menu ul li.expandable .expander span {
    display: none;
}

.block.menu ul li.expandable .expander {
    display: inline-block;
    width: 10px;
    height: 15px;
}

.block.menu ul li.expanded .expander {
    background: transparent url("/images/button-down.png") no-repeat scroll left 6px;
}

.block.menu ul li.collapsed .expander {
    background: transparent url("/images/button-right.png") no-repeat scroll left 6px;
}

.block.menu ul li.collapsed ul.indent {
    display: none;
}

.block.menu ul.indent {
    font-size: 13px;
    line-height: 15px;
    margin-bottom: 5px;
}

.block.menu ul.indent li {
    margin-top: 5px;
    margin-left: 25px;
}

.block.menu ul.indent li a{
	font-weight: normal;
}

.block.menu li.current a
{
    color: #c0340d;
}

.block.menu li.current li a
{
    color: #275157;
}

/* The search bos is tranformed in to a pretties javascript-based version
 * by a small script exectued at window onload
 */

#search-box {
    width: 221px;
    padding: 0;
    margin: 25px 0 33px 0;
}

#search-box.replaced {
    height: 20px;
    background: url('/images/search-box-white.png') no-repeat;
 }

.frontpage-route #search-box.replaced {
    float: left;
    clear: left;

    background: url('/images/search-box-red.png') no-repeat;
    width: 152px;
    margin-left: 3px;
}

#search-box #search-input {
    padding: 0;
    margin: 0;

    width: 156px;
    border: solid #ddd 1px;
}

#search-box.replaced #search-input {
    float: left;
    padding: 0;
    margin: 1px 5px 4px 5px;

    height: 20px;
    width: 156px;

    font-size: 12px;
    line-height: 17px;

    border: none;
    background: transparent;
}

.frontpage-route #search-box.replaced #search-input {

    margin-left: 2px;
    width: 98px;
}

#search-box.replaced #search-input:focus {
    outline: 0;
}

#search-box #search-button {
    width: 52px;
    margin: 0 0 0 0;
    padding: 0;
}

#search-box.replaced #search-button-link span {
    display: none;
}

#search-box.replaced #search-button-link {
    display: block;
    float: right;

    height: 20px;
    width: 51px;

    margin: 0;
    padding: 0;
}

.frontpage-route #search-box #search-button-link {
    width: 46px;
}


.block.news a {
	margin-top: 0px;
	display: block;
        line-height: 15px;
}

.block.news .date {
  color: #777;
  font-size: 10px;
  font-style: italic;
  line-height: 10px;
  text-align: right;
}

.block.news a p {
  font-size: 12px;
  font-weight: bold;
  color: #444;
  line-height: 15px;
  padding: 5px 0 0 0;
  margin: 0;
}

#wrapper .block.news a .summary p {
  font-weight: normal;
  margin-top: 0px;
  padding-top: 0px;
}

.block.news a .summary {
  font-size: 12px;
  font-weight: normal;
}

.block.news a:hover p {
	color: #c0340d;
}

.block.features  {
    border-top: 1px solid #c0340d;
    line-height: 0;
}

.block .feature  {
	display: block;	
  border-bottom: 1px solid #c0340d;    
}

#wrapper .block.links ul {
        margin-top: -8px;
}

#wrapper .block.links h3 + ul {
    margin-top: 0px;
}

#wrapper .block.links li {
	list-style-position: outside;
        padding: 0;
        background: none;
}

#wrapper .block.links a {
	line-height: 14px;
	display: block;
}

#wrapper .block.links .title{
	font-size: 13px;
	color: #275157;
	margin: 6px 0 0px 0;
}

#wrapper .block.links a:hover .title{
	color: #c0340d;
}

#wrapper .block.links .text{
    font-size: 12px;
    line-height: 13px;
    color: #444;
    font-weight: normal;
    font-style: italic;
    margin: 0 0 0 1px;
}

/* News pages */
.nieuws #content .date {
    text-align: right;
    font-style: italic;
    color: #777;
    margin-bottom: 10px;
    font-size: 11px;
}


#left-sidebar h3, #right-sidebar h3 {
    font-size: 16px;
    line-height: 16px;
    border-bottom: 1px solid #c0340d;
    color: #c0340d;
    text-transform: uppercase;
    font-weight: bold;
    
    font-family: "Trebuchet MS", sans-serif;

    margin: 0 0 0 0;
}

#left-sidebar h3 a, #right-sidebar h3 a{
    color: #c0340d;
}

.frontpage-route #left-sidebar h3, .frontpage-route  #right-sidebar h3 {
    font-size: 18px;
    padding-bottom: 2px;
}

#right-sidebar {
}

#right-sidebar p {
	padding-top: 5px;

}



/***** Footer Details *****/

#footer .section a {
    line-height: 0;
    display: inline-block;
    height: 53px;
    width: 30px;
    margin: 0 35px 0 35px;
}
/*
#footer .products a {
    margin: 0 26px 0 26px;
}*/

#footer .section a img {
    line-height: 0;
    /* visibility: hidden;*/
    display: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#footer .section a.microsoft {
        width: 77px;
        background: url('/images/footer/microsoft_footer_inactive.png') no-repeat;
}
#footer .section a.fast      {
        width: 77px;
        background: url('/images/footer/fast_footer_inactive.png') no-repeat;
}
#footer .section a.rails     {
        margin-left: 60px;
        width: 35px;
        background: url('/images/footer/rails_footer_inactive.png') no-repeat;
}
#footer .section a.debian    {
        width: 42px;
        background: url('/images/footer/debian_footer_inactive.png') no-repeat;
}
#footer .section a.lucene    {
        width: 130px;
        background: url('/images/footer/lucene_footer_inactive.png') no-repeat;
}

#footer .section a.microsoft:hover img {
    display: block;
}
#footer .section a.fast:hover img {
    display: block;
}
#footer .section a.rails:hover img {
    display: block;
}
#footer .section a.debian:hover img {
    display: block;
}
#footer .section a.lucene:hover img {
    display: block;
}

#footer .section {
    margin-right: 0px;
    padding: 0 35px 0 35px;
}

#footer .products
{
    text-align: center;

}


#footer .partners
{
    float: left;
    text-align: center;
    border-right: solid #d8d8d8 1px;
}

.block a.quotelink {
    display: block;

}

.block .quote,
.block a .quote,
.block .quote,
.block a .quote {
    display: block;
    text-indent: -4px;
    color: #777;
    
    margin: 0 -10px 5px 0;
    padding: 0;
}

.block .quote p {
    display: inline;
    font-family: "Georgia", serif;
    font-style: italic;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    z-index: 99;
}

.block .author {
    margin-top: 3px;
}


.block a:hover blockquote {

}

.block.file ul.files {
    margin: 5px 0 0 0;
    padding: 0;
    list-style-position: outside;
    list-style-type: none;

}

.block.file ul.files li {
    margin: 5px 0 0 0;
    padding: 0;
    padding-left: 20px;
    background: url('/images/file.png') no-repeat 0px 2px;
}


.block.file ul.files li a {
    display: inline-block;
    font-size: 12px;
    line-height: 14px;
}

.block.file ul.files li.jpeg,
.block.file ul.files li.jpg,
.block.file ul.files li.gif,
.block.file ul.files li.png {
    background-image: url('/images/file-image.png');
}

.block.file ul.files li.pdf {
    background-image: url('/images/file-acrobat.png');
}


#left-sidebar .block blockquote {
    font-size: 11px;
}

#content .textquote  blockquote {

    margin: 0 -15px 5px 0;
    padding: 0 0px 0 0px;
    font-size: 12px;
}

#content .textquote {
    border-top: solid #c0340d 1px;
    margin: 5px 0px 10px 10px;
    padding: 3px 0 0 0;
    width: 277px;
    float: right;
}

#content .textquote .author {
    font-weight: bold;
}

div.author
{
    font-size: 12px;
    line-height: 15px;
}

input.text, textarea {
    border: solid #777 1px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    line-height: 20px;
    padding: 2px 3px;
}

input.text {
    height: 18px;
}

/***** Page Specific *****/

#page-search {
    text-align: center;
    border-bottom: solid #777 1px;
}

#page-search #page-search-box {
    width: 446px;
    border: solid #777 1px;
}

#page-search #page-search-button {
    width: 106px;
    margin: 5px 0 15px 0;
}

#search-results {
    list-style-position: outside;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#search-results .result a {
    display: block;
}

#search-results .result {
    list-style-position: outside;
    list-style-type: none;
    background: none;
    padding: 0;
    margin: 0 15px 20px 25px;
}

#search-results .result h4 {
    line-height: 15px;
    font-size: 13px;
    margin-bottom: 5px;
}

#search-results .result p {
    font-size: 12px;
    line-height: 15px;
    font-weight: normal;
    color: #444;
    text-align: justify;
}

#news-extended {
    max-width: 457px;
}

#news-extended a.item{
    color: #444;
    display: block;
    border-bottom: solid #d8d8d8 1px;
}

#news-extended a:hover.item {
    color: #444;
}

#news-extended .item h2 {
    font-size:15px;
    line-height: 20px;
    color: #444;
    display: block;
    margin: 10px 0 0 0;
}

.frontpage-route #news-extended .item h2 {
    font-size:13px;
    line-height: 15px;
    font-weight: bold;
}

.frontpage-route #wrapper #news-extended .date {
    margin-top: 2px;
}

#news-extended .item:hover p {
    color: #444;
}

#news-extended .item:hover h2 {
    color: #c0340d;
}

#news-extended .item .summary{
    line-height: 15px;
    font-weight: normal;
    color: #444;
    margin: 0 0 10px 0;
}

#news-extended .item .date {
    margin-top: 0;
    display: block;
    text-align: right;
    font-size: 10px;
    font-weight: normal;
    font-style: italic;
    line-height: 20px;
    margin: -2px 5px 5px 0;
    color: #777;
}

.news-item #content .date {
    margin: -10px 10px 5px 0;
    word-spacing: 3px;
}

.vacatures h2, .stages h2 {
    font-size: 14px;
}

ul.vacancies,
ul.internships {
    list-style-position: outside;
    list-style-type: none;
    padding: 0;
    margin: 10px  0 0 0;
    border-top: solid #777 1px;
}

ul.vacancies li.vacancy,
ul.internships li.internship
{
    margin: 0 15px 0 15px;
    padding: 0;
    background: none;
}

body #content .contactform {
    margin: 0 0 0 0;
}

#content .contactform,
#content .contactform td,
#content .contactform th
{
    border: none;
    padding: 0;
    margin: 0;
}

#content .contactform th {
    text-align: right;
    font-weight: normal;
    padding-right: 10px;
    width: 85px;
    height: 30px;
    line-height: 15px;
}

.contact h3 {
    margin-top: 25px;
}

.contactform label {
    display: block;
    margin-right: 10px;
}

.contactform label.obligatory {
   font-weight: bold;
   margin-right: 0;
}

.contactform textarea {
    width: 349px;
    height: 133px;
}

.contactform input.text {
    width: 254px;
}


/** sIFR replacement styles **/
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with
   a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is
   replaced... the negative-letter spacing in this case is used to make the
   browser text metrics match up with the sIFR text metrics since the sIFR text
   in this example is so much narrower... your own settings may vary... any
   weird sizing issues you may run into are usually fixed by tweaking these
   decoy styles */

.sIFR-hasFlash h1.foundry {
    visibility: hidden;
    width: 450px;
    letter-spacing: -2px;
}

.sIFR-hasFlash .frontpage-route h1.foundry {
    width: 370px;
}

.sIFR-hasFlash #wrapper #container .block h3 {
    visibility: hidden;
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 14px;
    margin: 0;
    padding: 0;
}

.sIFR-hasFlash #wrapper #container .block h3 a {
    line-height: 14px;
}