/*
Style for Unix Tutorial Website
Author: Joseph Pecoraro

The CSS is Valid.  It also looks rather uniform once
you get past section 1, which has multiple inline
styles because they are rather basic.  I am rather
pleased with the results.


Table of Contents
-----------------
1. Entire page
2. header
  2.1 tabbed navigation
3. content and wrapper only
4. left
5. right
6. footer
*/

/* 1. Entire Page Styles */
* {
  margin: 0;
  padding: 0;
  font-family: georgia, serif;
}
body { background-color: white; }

a { color: black; }
a:hover { color: white; background-color: black; text-decoration: none; }
.red { color: red; }
.blue { color: blue; }
.term { border-bottom: 1px dotted rgb(55,55,55); cursor: help; }


/* 2. Styles for the Header */
#header {
  background:  url(./images/stripe.png) repeat-x;
  height: 100px;
}
#title {
  position: absolute;
  top: 25px;
  right: 8%;
  cursor: default;
  font: 210% georgia, serif;
  color: white;
  /*
  Old Positioning: this floated the title to the right with
  a right margin.  Safari did not like this, it wrapped the
  text, so I tryed absolute positioning and it works great
  in all browsers!
  --------
  float: right;
  margin-top: 25px;
  padding-right: 8%;
  */
}


/* 2.1 Styles for the Tabbed Navigation
- This code is based off of tabbed navigation style from
  Exploding Boy: http://exploding-boy.com/images/cssmenus/menus.html

  They offer free CSS tabbed menus, and I followed their design
  paradigm (left and right images, with a large right image).  This
  code also incorporates the background-position change when the
  tab is either selected, or hovered.  This kind of image, one with
  states of the background, means that there is only one image
  downloaded.  A good feature amoung tabbed menus.  Also they make use
  of the Sliding Door Concept:
  http://www.alistapart.com/articles/slidingdoors2/

- The tabs themselves are rebuilt by myself but are based of the
  color schemes of the tabs found at:
  WebLinc: http://www.weblinc.com/Case_Studies/

  It was actually WebLinc's navigation that I wanted to emulate with
  this project.  Their tab system is very powerful, in that you always
  know where you are, which is important in website usability and
  also because this website is indeed a Tutorial website.  The images
  on WebLinc's page are actually just that, a single clickable image.
  I rebuilt the images to comply with the Sliding Door concept which
  allows for expandable tabs, unlike the static WebLinc images which
  all must load individually and must be recreated for any new tab.
*/
#tabs {
  position: absolute;
  width: 800px; /* A Nice Hack that, coupled with pos: abs, leaves the tabs unaltered in small windows */
  top: 71px;
  left: 10%;
  font: 93% georgia, serif;
  background: transparent;
}
#tabs ul {
  list-style: none;
}
#tabs li {
  display: inline;
}
#tabs a {
  float: left;
  background: url(./images/left.png) no-repeat left top;
  text-decoration: none;
  height: 24px;
  padding: 0 0 5px 5px;
}
#tabs a span {
  float: left;
  display: block;
  background: url(./images/right.png) no-repeat right top;
  font-variant: small-caps;
  cursor: pointer;
  color: white;
  height: 18px;
  padding: 5px 12px 6px 7px;
  margin-right: 5px;
}
#tabs a:hover, #tabs a#selected {
  background-position: 0% -29px;
}
#tabs a:hover span, #tabs a#selected span {
  background-position: 100% -29px;
  color: black;
}
/*
Alternate hover property, just underline the text
#tabs a:hover span { text-decoration: underline; }
*/


/* 3 Content and Wrapper Divisions Only */
#content {
  padding: 50px 0 10px 0;
  float: left;
}

/* No code was needed for the wrapper, but the wrapper itself
made it possible for the #content section to extend all the
way down to the bottom.  Reason is yet unknown but this seems to
be a pretty common hack. */
#wrapper {}

/* 4 Left Liquid Div and containing menu */
#left {
  float: left;
  margin-left: 7%;
  width: 25%;
}
.menu h2 {
  font: 1.2em "Century Gothic", Tahoma, Arial, serif;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/*
  This is another important menu system that has a large
  usability impact.  I wanted to show where users have
  been (and if PHP is enabled, then also show where users ARE).

  So a neat concept I stumbled across was check marks next
  to links that have already been visited.  I found that
  original design concept here:
  http://www.nicktoye.co.uk/services/template-creation/
*/
.menu ul {
  list-style: none;
  margin-bottom: 25px;
}
.menu li {
  padding-bottom: 2px;
}
.menu a {
  border-left: 2px solid white;
  padding-left: 5px;
  padding-right: 27px;
  font-size: .9em;
  color: rgb(135,135,135);
  text-decoration: none;
}
.menu a:hover {
  background-color: white;
  border-left: 2px solid black;
  color: black;
}
.menu a:visited {
  color: black;
  background: url(./images/check.gif) no-repeat top right;
}


/* 5 Right Liquid Div, The Main Content */
#right {
  float: left;
  margin-left: 3%;
  width: 57%;
}
#right h2 {
  font: 1.4em "Century Gothic", Tahoma, Arial, serif;
  text-transform: uppercase;
  margin-bottom: 7px;
}
#right p {
  color: rgb(55,55,55);
  font-size: 0.9em;
  line-height: 1.4em;
  margin-bottom: 15px;
}
#right code {
  display: block;
  font: .9em Courier;
  background-color: rgb(245,245,245);
  border: 1px solid rgb(225,225,225);
  /*
  Optional code fragment styles:
  border: none;
  border-left: 2px solid rgb(220,220,220);
  */
  line-height: 16px;
  margin: 15px 2px 15px 2px;
  padding: 13px 5px 13px 8px;
  color: black;
}
code span { font: .9em Courier; color: black; }
code span.command { color: red; }

#right a:visited { color: gray; }
#right a.next {
  color: black;
  clear: right;
  float: right;
  display: block;
  padding: 1px 2px 3px 2px;
}
#right a:hover { color: white; }

/* 6 Footer */
#footer {
  background: url(./images/stripe.png) repeat-x left bottom;
  float: left;
  clear: both;
  padding: 15px 0 15px 0;
  text-align: center;
  width: 100%;
}
#footer p {
  font-size: .8em;
  color: white;
}


/*-------------------------------------------------------------
       These are standard sIFR styles... tweaked by me
-------------------------------------------------------------*/
.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 {
	visibility: hidden;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 20px;
}

.sIFR-hasFlash #right h2 {
  font-size: 25px;
}

.sIFR-hasFlash h1#title {
  font-size: 35px;
  right: 5%;
}