/*
File: styles.css
Purpose:Style sheet for homebrew 2600 site by Billy D. Spelchan.
Persona Benifit: Makes the site much nicer looking 
Course relation: Unit 3
Author: Billy D. Spelchan (3215064)
Date last modified: June 25, 2015
Sources:  
	David Sawyer McFarland, "CSS3: The Missing Manual, Third Edition", 
	Fifth release (USA:O’Reilly Media, Inc.,2012). ISBN-13: 978-1-449-32594-7
 
 My knowledge for css was taken from CSS3: The Missing Manual, Third Edition [1]
 though most values are my own and pretty much any CSS3 source would have 
 resulted in similar (if not exactly the same) code. Still, for the sake of 
 completeness, the sections of the book where the core knowledge was obtained
 is marked. As there are no subscripts, numbers surrounded by square brackets
 indicate the endnote associated with that section.
*/
html {
/*
multi-browser support for gradiant background [2]
*/
  background-color: #ADF;
  background-image: -webkit-linear-gradient(315deg, #ADF, #58C, #ADF);
  background-image: -moz-linear-gradient(315deg, #ADF, #58C, #ADF);
  background-image: -o-linear-gradient(315deg, #ADF, #58C, #ADF);
  background-image: linear-gradient(315deg, #ADF, #58C, #ADF);
}

body {
  padding: 10px;
  color: #405;
  font-size: large;
}

.navMenu {
  text-align: center;
}

/*
  Navigation buttons that look and act like buttons, meaning that the JavaScript
  buttons I was planning on using in a later unit are not actually needed!
  While using CSS for buttons was discussed on pages 300-302, this was done on
  my own though does have a lot of similarities.[3]
*/
.nav_btn a, input[type="submit"] {
  text-align: center;
  font-size: 1.2em;
  text-decoration: none;
  font-weight: bold;
  width: 6em;
  color: yellow;
  padding: 5px;
  background-color: #00C;
  border: .2em outset yellow;
  border-radius: 1em;
  box-shadow: 5px 5px 10px rgba(0,0,0,.80);
}

input[type="submit"] {
 font-size: large;
}

.nav_btn a:hover, input[type="submit"]:hover { 
  background-color: #00F;
  color: orange;
}


.nav_btn a:active, input[type="submit"]:active { 
  background-color: #88F;
  border: .2em inset yellow;
  color: red;
}

/* Headers [4]
  Right now, h1 is used for the title,
  h2 used for major sections,
  h3 used for subsectons
  h4 used for breaking up subsections. In future versions, I may be changing
  the title to a graphic image, in which case, the other h's would be bumped 
  up in significance.
*/
h1 {
  font: "Courier New", Courier, monospace;
  font-size: 5em;
  font-weight: bold;
  text-align: center;
  margin: .2em;
}

h2, h3 {
  text-align: center;
  clear: both;
}

/* Images need wrapping [5] */
img {
  padding: .5em;
  float: left;
}

img.right_image {
  float: right;
}


img.center_image {
  float: none;
  text-align: center;
  display: inline-block;
}

/* Form (contact page) [6]

*/
form {
 padding: 1em;
 border: .1em solid black;
}

input, select, textarea {
  background-color: #CEF;
  border: .1em inset #405;
  color: #405;
  padding: .5em;
  margin: .5em;
  border-radius: .5em;

}

/** Navigation arrows - the origal arrow has been replaced by leftArrow and 
 rightArrow but am keeping it here for historic reasons.
 */
.navArrow a {
  padding: 1em;
  display: block;
  clear: both;
}

.rightArrow {
	float:right;
	text-align: right;
	padding: 1em;
	margin: .5em;
	background: url(../images/rightArrow.fw.png);
	background-size: 100% 3em;
	background-repeat: no-repeat;
}
.rightArrow a {
	color: yellow;
	text-decoration: none;
}

.leftArrow {
	float:left;
	text-align: left;
	padding: 1em;
	margin: .5em;
	background: url(../images/leftArrow.fw.png);
	background-size: 100% 3em;
	background-repeat: no-repeat;
}
.leftArrow a {
	color: yellow;
	text-decoration: none;
}

/* Have odd and even rows of tables different colors so they are easy to read.
  This was something I was going to either write JavaScript for or add class
  tags to every odd row to do the same thing as I did not know nth-child existed
  so was very glad to discover this feature of CSS. [7]
*/
tr:nth-child(odd) { 
  background-color: #CEF; 
}

tr:nth-child(even) { 
  background-color: #CFC; 
}

tr .op_letter {
  font-weight: bold;
  color: blue;
}

/* Unit 4 additions for formatting the form [8] */
.contact_label {
  display: inline-block;
  width: 8em;
  vertical-align: top;
}

textarea.contact_form  {
  width: 70%;
  height: 5em;
}

/* ENDNOTES
[1] David Sawyer McFarland, "CSS3: The Missing Manual, Third Edition", 
Fifth release (USA:O’Reilly Media, Inc.,2012). ISBN-13: 978-1-449-32594-7
[2] ibid, p. 264
[3] ibid, p. 300-302
[4] ibid, p. 131
[5] ibid, chapter 8
[6] ibid, chapter 11
[7] ibid, p. 78
[8] ibid, p. 384-389
*/