/*
** Quarters.css
**
** GBdirect `quartered' website style
**
** 2001 May 23: initial version
** 2001 May 25: added .NoCSS2
*/


/*
** General Page
**
** These first few settings apply to all browsers.
*/

.Openbody
{
  background-color: #d3b42a ;
  color: black;
  margin-top: 1.6ex;
}
.Apachebody
{
  background-color: #d16c29 ;
  color: black;
  margin-top: 1.6ex;
}
.Embedbody
{
  background-color: #ce297b ;
  color: black;
  margin-top: 1.6ex;
}
.Linuxbody
{
  background-color: #bb28cc ;
  color: black;
  margin-top: 1.6ex;
}
.Mysqlbody
{
  background-color: #3b28cc ;
  color: black;
  margin-top: 1.6ex;
}
.Perlbody
{
  background-color: #28aecc ;
  color: black;
  margin-top: 1.6ex;
}
.Phpbody
{
  background-color: #28cc88 ;
  color: black;
  margin-top: 1.6ex;
}
.Sambabody
{
  background-color: #117726 ;
  color: black;
  margin-top: 1.6ex;
}

body, td, th
{
  font-family: Helvetica, sans-serif;
}

/* `Nav 4' doesn't even seem to be able to cope with theme-dependent links, so
** just set boring colours to use here, and theme-capable browser can sort
** things out below: */
a
{
  color: #00E;
}
a:visited
{
  color: #909090;
}
a:active
{
  color: #F00;
}
.urgent
{
  color: #D00;
}

/* headings: */
h1, h2, h3, h4
{
  font-family: Verdana, Lucida, sans-serif;
  font-weight: bold;
}

h1
{
  font-size: 170%;
  margin-top: 1.5ex;
}

h2
{
  font-size: 130%;
}

td
{
  font-size: 87%;
}

small
{
  font-size: 87%;
}


.sidebar
{
  font-size: 100%;
	margin-left: 5;
}

/* When the first thing in a <div> is a <p>, we don't want any space above the
** <p> -- it isn't a para break, just the start of this bit of content: */
div > p:first-child
{
  margin-top: 0;
  padding-top: 0;
}

/* Similarly, don't put space after the last <p> in a <div>.  Fortunately,
** simply not putting space after all <p>s works (cos they (except the first)
** will have space above them instead: */
div > p
{
  margin-bottom: 0;
}


/* extra text at the bottom of a column: */
.ColBtm
{
  margin-top: 3ex;
}

/* paragraphs within such text: */
.ColBtm p
{
  /* Squash such paras a bit closer together: */
  margin-top: 0.7ex;
}



/* Sneaky tricks ahoy.  `Nav 4' has a bug where it only obeys @media tags if
** the content is precisely "screen".  But this gives a perfect opportunity to
** hide the rest of this style sheet from that browser's crappy quarter-baked
** implementation.  If we just double the "screen", `Nav 4' ignores it, but
** sane browsers DTRT: */
@media screen, screen
{

  /* We can make things appear only in browsers to which this CSS isn't
  ** applying by assigning them to the NoCSS2 class, then making such things
  ** disappear in browsers that are doing this CSS: */
  .NoCSS2
  {
    display: none;
  }

  h4
  {
    margin-bottom: 1.1ex;
  }

  /*
  ** Navigation Column
  */

  /* Put some margin on the entirety of the left panel. */
  div.Left
  {
    margin-bottom: 0.3em;
  }
  div.Left, #Logo
  {
    margin-top: 0.3em;
    margin-right: 2em;
    margin-left: 0.8em;
  }

  /* Have different spacing and left indent for the different levels: */
  .nav0, .nav1
  {
    margin-left: 0;
    padding: 0.15ex 0 0.15ex;
  }
  .nav2
  {
    margin-left: 0.8em;
    padding: 0.1ex 0;
  }
  .nav3
  {
    margin-left: 1.6em;
    padding: 0.1ex 0;
    line-height: 1.9ex;
  }

  /* Navigation links in the left column should be blockwise, so the highlight
  ** bar (and sensitive area) can go the full width: */
  .nav a
  {
    display: block;
  }

  /* Hovering text will have a theme-dependent highlight bar over it, but it
  ** will all be white.  We must specify all the themes because of specificity;
  ** see Theme Rule 1.  */
	.Open .nav .a:hover, .Apache .nav a:hover, .Embed .nav a:hover. .Embed .nav a:hover, .Linux .nav a:hover, .Mysql .nav a:hover, .Perl, .nav a:hover, .Php .nav a:hover, .Samba .nav a:hover
  {
    color: white;
  }
  /* separated out for really stupid `Mozilla' bug which causes the above not
  ** to work if this is in the same block: */
	.Open .nav .a:hover, .Apache .nav a:hover, .Embed .nav a:hover. .Embed .nav a:hover, .Linux .nav a:hover, .Mysql .nav a:hover, .Perl, .nav a:hover, .Php .nav a:hover, .Samba .nav a:hover

  {
    text-decoration: none
  }

  /* Smaller text in address/etc block: */
  .ColBtm
  {
    font-size: 100%;
  }


  .OpenAdvert
  {
   background-color: #d3b42a;
  }	
  .ApacheAdvert
  {
   background-color: #d16c29;
  }	
  .EmbedAdvert
  {
   background-color: #ce297b;
  }	
  .LinuxAdvert
  {
   background-color: #bb28cc;
  }	
  .MysqlAdvert
  {
   background-color: #3b28cc;
  }	
  .PerlAdvert
  {
   background-color: #28aecc;
  }	
  .PhpAdvert
  {
   background-color: #28cc88;
  }	
  .SambaAdvert
  {
	background-color: #117726;
  }

  /*
  ** Tab Strip
  */

  /* all cells containing a tab: */
  .Tab
  {
    margin: 0.5em;
    padding: 0.5em;
    font-family: Verdana, Lucida, sans-serif;
    vertical-align: middle;
    text-align: center;
  }

  #Main
  {
    padding-right: 0.8em;
  }

  /* width border round the edge of the page (not the boxes of the non-selected
  ** tabs, just the line underneath them is affected by this): */
  .Tab, #Left, #Main, #Right
  {
    border-width: 2px;
  }
  
  /* boxes for all the currently-selected tabs (block display is again used to
  ** expand the hyperlink into the cell, and it is this that is used for the
  ** boxes): */
  .Tab a
  {
    display: block;
    border: solid 1px;
    margin: 0.3ex 0.6em;
    padding: 0.3em;
    text-decoration: none;
  }

  /* The cell of the currently-selected tab needs borders round all but the
  ** bottom, so as to join on to the main part of the page: */
  #ThisTab
  {
/*    border-style: solid solid none; */
		background-color: white;
  }

  /* All other tabs need a line underneath them (note that this won't apply to
  ** #ThisTab because of specificity rules), as do the left column and the main
  ** cell: */
  .Tab, #Left, #Main, #Right
  {
  /*  border-bottom-style: solid;*/
  }

  /* Additionally, #Left needs a border down the left of the window and #Main
  ** down the right: */
  #Left
  {
/*    border-left-style: solid; */
		background-color: white;
  }
  #Right
  {
  /*  border-right-style: solid; */
		background-color: white;
  }

  #Outer
  {
    margin-top: 3px;
		background-color: white;
  }


  /*
  ** Themes
  **
  ** Only Forest is commented.  All t'others follow in the same pattern.
  */

  /*
  ** Forest
  */

  /* (Theme Rule 1.) Any tab labelled `Forest' needs to have its text in this
  ** colour, as do the selected tab and links on a .Forest page.  For `IE', we
  ** need to say ".Forest .nav a" to prevent getting :visited colours. */
  .Tab a.Forest, .Forest #ThisTab, .Forest a, .Forest .nav a
  {
    color: #319962;
		background-color: white;
		
  }

  /* Note that .Tab .Forest is an <a href> tab which has been labelled
  ** `Forest', whereas .Forest .Tab applies to all the (non-selected) tab cells
  ** in a page tagged as `Forest' (and is for the horizontal line that goes
  ** under all the other coloured tabs): */
  .Tab .Forest, .Forest .Tab, .Forest #Left, .Forest #Main
  {
    border-color: #319962;
  }

  /* hovering over .Forest tabs or .nav hyperlinks on a .Forest page: */
  .Tab .Forest:hover, .Forest .nav a:hover
  {
    background-color: #319962;
  }



  /*
  ** Open:
  */


  .Tab a.Open
  {
    color: white ; 
		background-color: #d2b42a ; 
  }
	
  .Tab .Open, .Open .Tab, .Open #Left, .Open #Main, .Open #Right
  {
    border-color: #d2b42a;
  }
  
	.Open #Left, .Open #Main, .Open #Right
	{
		background-color: #fffbdd; /*#f7ecbe;*/
	}
  .Tab .Open:hover, .Open .nav a:hover, .Open a, .Open .nav a
  {
		color: #b29933; /*#d2b42a;*/
	}

  .Tab .Open:hover, .Open .nav a:hover
	{
		background-color: white;
	}

	.Open #ThisTab
	{
		background-color: #fffbdd;
	}

  /*
  ** Apache:
  */
	
  .Tab a.Apache
  {
    color: white ; 
		background-color: #d16c29 ; 
  }
	
  .Tab .Apache, .Apache .Tab .Apache #Left, .Apache #Main, .Apache #Right
  {
    border-color: #d16c29;
	}

	.Apache #Left, .Apache #Main, .Apache #Right
	{
		background-color: #eddfd7;
	}

  .Tab .Apache:hover, .Apache .nav a:hover, .Apache a, .Apache .nav a, .Apache #ThisTab
  {
		color: #d16c29;
  /*  background-color: white; */
  }

  .Tab .Apache:hover, .Apache .nav a:hover
	{
		background-color: white;
	}

	.Apache #ThisTab
	{
		background-color: #eddfd7;
	}
		
		
  
  /*
  ** Embed:
  */
	
  .Tab a.Embed
  {
    color: white ; 
		background-color: #ce297b ; 
  }
	
  .Tab .Embed, .Embed .Tab, .Embed #Left, .Embed #Main, .Embed #Right
  {
    border-color: #ce297b;
  }

  .Embed #Left, .Embed #Main, .Embed #Right
	{
		background-color: #f7d9e8 ;
	}

  .Tab .Embed:hover, .Embed .nav a:hover, .Embed a, .Embed .nav a, .Embed #ThisTab
  {
		color: #ce297b;
	}

  .Tab .Embed:hover, .Embed .nav a:hover
	{
		background-color: white;
	}

	.Embed #ThisTab
	{
		background-color: #f7d9e8;
	}

  /*
  ** Linux:
  */

  .Tab a.Linux
  {
    color: white ; 
		background-color: #bb28cc ; 
  }
	
  .Tab .Linux, .Linux .Tab, .Linux #Left, .Linux #Main, .Linux #Right
  {
    border-color: #bb28cc;
  }

  .Linux #Left, .Linux #Main, .Linux #Right
	{
		background-color: #f3ebf4;
	}

  .Tab .Linux:hover, .Linux .nav a:hover, .Linux a, .Linux .nav a, .Linux #ThisTab
  {
		color: #bb28cc;
	}

  .Tab .Linux:hover, .Linux .nav a:hover
	{
		background-color: white;
	}

	.Linux #ThisTab
	{
		background-color: #f3ebf4;
	}






  /*
  ** Mysql:
  */

  .Tab a.Mysql
  {
    color: white ; 
		background-color: #3b28cc ; 
  }
	
  .Tab .Mysql, .Mysql .Tab, .Mysql #Left, .Mysql #Main, .Mysql #Right
  {
    border-color: #3b28cc;
  }

  .Mysql #Left, .Mysql #Main, .Mysql #Right
	{
		background-color: #beb8ed;
	}

  .Tab .Mysql:hover, .Mysql .nav a:hover, .Mysql a, .Mysql .nav a, .Mysql #ThisTab
  {
		color: #3b28cc;
	}

  .Tab .Mysql:hover, .Mysql .nav a:hover
	{
		background-color: white;
	}

	.Mysql #ThisTab
	{
		background-color: #beb8ed;
	}



  /*
  ** Perl:
  */

  .Tab a.Perl
  {
    color: white ; 
		background-color: #28aecc ; 
  }
	
  .Tab .Perl, .Perl .Tab, .Perl #Left, .Perl #Main, .Perl #Right
  {
    border-color: #28aecc;
  }

  .Perl #Left, .Perl #Main, .Perl #Right
	{
		background-color: #d2ebef; /*#bee1e8;*/
	}

  .Tab .Perl:hover, .Perl .nav a:hover, .Perl a, .Perl .nav a, .Perl #ThisTab
  {
		color: #28aecc;
	}

  .Tab .Perl:hover, .Perl .nav a:hover
	{
		background-color: white;
	}

	.Perl #ThisTab
	{
		background-color: #d2ebef; /*#bee1e8;*/
	}





  /*
  ** Php:
  */

  .Tab a.Php
  {
    color: white ; 
		background-color: #28cc96 ; 
  }
	
  .Tab .Php, .Php .Tab, .Php #Left, .Php #Main, .Php #Right
  {
    border-color: #28cc9b;
  }

  .Php #Left, .Php #Main, .Php #Right
	{
		background-color: #ebf4f0; /*#d7efe4 ;*/
	}

  .Tab .Php:hover, .Php .nav a:hover, .Php a, .Php .nav a, .Php #ThisTab
  {
		color: #28cc9b;
	}

  .Tab .Php:hover, .Php .nav a:hover
	{
		background-color: white;
	}

	.Php #ThisTab
	{
		background-color: #ebf4f0; /*#d7efe4 ;*/
	}




 
  


  /*
  ** Samba:
  */


  .Tab a.Samba
  {
    color: white ; 
		background-color: #117726 ; 
  }
	
  .Tab .Samba, .Samba .Tab, .Samba #Left, .Samba #Main, .Samba #Right
  {
    border-color: #117726;
  }

  .Samba #Left, .Samba #Main, .Samba #Right
	{
		background-color: #ebffe0; /*#d3ffbc;*/
	}

  .Tab .Samba:hover, .Samba .nav a:hover, .Samba a, .Samba .nav a, .Samba #ThisTab
  {
		color: #117726;
	}

  .Tab .Samba:hover, .Samba .nav a:hover
	{
		background-color: white;
	}

	.Samba #ThisTab
	{
		background-color: #ebffe0; /*#d3ffbc ;*/
	}








  /* Hovering tabs will be inverted (theme-dependent) but text will always go
  ** white: */
	/*
  .Tab a:hover
  {
    color: white;
  }
  */
} /* @media */