/*
 * Filename: main.css
 * 
 * Programmer:
 * Daniel Brook
 * 
 * This is a site-wide (except for Mass-Trac) CSS file to keep a consistent
 * theme across the pages on this site.
 * 
 * Updated for a nicer graphical feel: 7-Jun-2013 at 4:00 pm
 */ 

/*
 * No margin for the body so we can go right to the edges.
 * The site's backgrounds come from www.subtlepatterns.com
 */
body {
  margin : 0;
  background-image : url('../img/px_by_Gre3g.png');
}

#allContent {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#titleArea {
  text-align : center;
  text-shadow: 1px 1px gray;
  color : white;
  background-image : url('../img/binding_dark.png');
  padding : 5px;
  margin-bottom : 0px;
  border-bottom : 2px black solid;
  font-family : Tahoma, sans-serif;
  box-shadow : 0px 1px 4px gray;
}

#titleArea h1 {
  font-size : 2.4em;
  margin : 0px;
}

#titleArea p {
  margin-bottom : 5px;
  font-size : 1.1em;
  font-style : italic;
}

/*
 * The main content area will be fixed width, separated from the title area
 * for a bit more flexibility in how the title can be rendered.
 */
#pageArea {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  margin: 10px;
  column-gap: 10px;
  flex-wrap: wrap;
}

/*
 * A left-hand navigation pane with quick links and current employment status.
 */
#navigation {
  min-width : 250px;
}

#navigation div {
  margin-bottom : 10px;
  border-radius : 15px;
  border : 2px solid #00aaee;
  padding : 10px 10px 20px 10px;
  text-align : center;
  background-color : #bce3fe;
  box-shadow : 3px 3px 3px;
}

/*
 * The list formatting needs to be removed to make the navbar more attractive
 * ... and some mouseover feedback is always nice.
 */
#navigation ul {
  list-style-type : none;
  padding-left : 0px;
  margin-bottom : 0px;
}
#navigation ul li {
  margin : 0px 0px;                    /* Breathing room */
  padding : 2px 0px;
  border-bottom : 2px dotted #00aaee;
}
#navigation ul li:hover {
  background-color : #4adaff;
}

/*
 * Give some breathing room to lists (they're too cramped by default)
 */
.contentArea ul li {
  padding : 5px 5px;
}

/*
 * Job Status area: make the different colors reflect what's currently true.
 */
#navigation .jobRed {
  background-color : #feacaf;
  border-color : #ff0006;
}
#navigation .jobGreen {
  background-color : #84fe84;
  border-color : #0ad709;
}
#navigation .jobYellow {
  background-color : #f9fe91;
  border-color : #adb245;   
}

/*
 * Make hyperlinks (a) a little more visible on the blue background
 */
#navigation a {
  color : #970206;
}

#navigation .status {
  font-size : 1.1em;
  font-weight : bold;
  font-family : "Courier New";
}

/*
 * Keep the main content pinned to the right hand side out of the navbar's way
 */
#rightArea {
  border-radius: 15px;
  border : 2px solid #00dd00;
  background-color : #f9e9c1;
  padding : 10px;
  box-shadow : 3px 3px 3px;
  flex-grow: 1;
  width: 450px;
  overflow: scroll;
}

/*
 * Center main-content area images by default
 */
.contentArea img {
  margin : 10px auto;
  display : block;
}

h2 {
  margin-top : 5px;
}

.rant {
  font-size : 0.9em;
}