/* COLOURS
1. blue #O33099 or rgb(51,0,153)
2. red #d92323 or rgb(217,35,35)
3. yellow #ffcc66 or rgb(255,204,102)


/*FONTS
1. Fonts on collage banner are Georgia bold italic and Myriad Pro. 
2. These are repeated on the site along with a font-stack to allow alternatives to be represented for viewers who may not have the specified fonts. 
3. Fonts stacks provided are as follows:  
 3.1 Headings: "Myriad Pro", PTSansCaptionRegular, arial, helvetica, sans-serif;
 3.2 Other text: Georgia, serif; Serif fonts are considered easier on the eye flow within blocks of text, improving reading speed (Loyd 2013).
  Reference: Loyd, Jeremy. 2013, May  8. "Typographic Readability and Ligibility." Tuts+. http://webdesign.tutsplus.com/articles/typographic-readability-and-legibility-webdesign-1221.
  Reference:  Kroll Design. "Is the Myriad Pro font web safe and free?". Accessed 2017, May 4,http://www.krolldesign.net/tech/css/myriad_font.php */

 
/*The font-weight of h1 and h2 elements are bold by default.*/	
h1, h2 {
	font-family: "Myriad Pro", PTSansCaptionRegular, arial, helvetica, sans-serif;
	font-size: 2.2em;
	/*font-weight: bold;*/
	font-style: italic;
	color: rgb(255,204,102);
	/*yellow*/
	}
	
h1	{
	background-color: rgb(51,0,153);
	/*blue*/
	padding-left: 15px;
	letter-spacing: 2px;
	border-width: 10px;
	border-style: outset;
	}
	
h2	{
	font-size: 1.6em;
	color: rgb(51,0,153);
	/*blue*/
	padding: 10px;
	border-bottom-style: solid;
	border-bottom-width: 10px;
	border-bottom-color: rgb(255,204,102);
	/*yellow*/
	}
	
/*Authors of "Wise Words" appear in this heading group.*/	
h3	{
	font-family: Georgia, serif;
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	letter-spacing: .1em;
	color: rgb(51,0,153);
	/*blue*/
	padding: .1em .5em;
	}
	
/*Text line-height increased for readability.*/
p ul  ol blockquote{
	font-family: Georgia, serif;
	font-size: .7em;
	font-weight: normal;
	color: gray;
	line-height: 1.7em;
	}

/*attributed quotes styled differently from the quoted material*/	
p#baird, p#guardian, p#carnegie{
	font-size: .7em;
	text-align: center; 
	}

/*This text has its own box in order to make it stand out.*/	
p#wishyouwell {
	font-size: 1.5em;
	font-style: italic;
	border-style: solid;
	color: rgb(255,204,102);
	/*yellow*/
	text-align: center;
	padding: 15px;
	border-width: 2px;
	border-style: dotted;
	border-color: rgb(255,204,102);
	/*yellow*/
	background-color: rgb(51,0,153);
	/*blue*/
	}

/*Quoted material is italic.*/
blockquote {
	font-style: italic;
	}
	
ul 	{
	display: block;
	list-style-type: square;
	}

li 	{
	margin-top: 10px;
	}	

div#footer   {
	font-size: .8em;
	font-style: italic;
	margin: 15px 18px;
	padding: 10px;
	border-width: 2px;
	border-style: dotted;
	border-color: rgb(51,0,153)
	/*blue*/;
	background-color: rgb(255,204,102);
	/*yellow*/
	}

/*For the navigation bar, text-decoration:none removes the underline. Color is red for prominence and contrast. 
:inline enables a horizontal navigation bar by over-writing the block element.*/

/*The "border-bottom" property sets width, style and colour values in one line.
Reference: W3Schools. Accessed 2017, May 11, https://www.w3schools.com/cssref/pr_border-bottom.asp/	*/
a.nav {
    display: inline;
	font-size: 1em;
	color: rgb(217,35,35);
	/*red*/
    text-decoration: none;
	/*removes the underline*/
	margin: 15px;
	padding: 5px 17px 4px;
	border-bottom: 1px solid rgb(51,0,153);
	/*blue*/
	}

/* The :hover selector enables color change to selected blue colour on mouse hover. Note that the :active selector must come after :hover link to be effective. */
/*Reference: Selectors. Accessed May 14, https://www.W3schools.com*/
a:hover {
    color: rgb(51,0,153);
	/*blue*/
	}
/*This enables a yellow background for the current page so the user knows where they are on the site.*/	
a#current {
	background-color: rgb(255,204,102);
	/*yellow*/
	}
		
/*The silver background gives visual contrast to the viewport area.*/	
html {
	background: silver;
	}
	
/*"We're using the container div so we can set the overall width of the layout (960px) and then center the layout on the page." */
/*Reference: Bradley, Steven. 2011, May 12. "2 Column CSS Layout: Fixed Width and Centered." Vanseo Blog. Accessed 2017, May 2,
  http://vanseodesign.com/css/2-column-layout-code/*/ 
		
/*Width is set at 960 pixels for the viewable content for all browsers. 
  Margins are set to 5px top and bottom and :auto sets equal left and right margins. 
  The line-height is 1.3 of the default line height throughout the document unless superseded by a child element further below.*/	
div#container {
	width: 960px;
	margin: 5px auto;
	background-color: rgb(249, 255, 252);
	/*This is a very pale tint of the blue and is softer on the eye than stark white, providing better readability.*/
	line-height: 1.3;
	font-family: Georgia, serif;
	}

#maincontent {
	float:left;
	width: 500px;
	margin: 18px 20px;
	padding: .1px 20px;
	border: 5px solid rgb(255,204,102);
	/*yellow*/
	}

#donts {
	font-family: "Myriad Pro", PTSansCaptionRegular, arial, helvetica, sans-serif;
	padding: 0 25px 20px;
	/*top 0, left and right 25, bottom 20*/
	line-height: 1.8em;
	background-color: rgb(255,204,102);
	/*yellow*/
	border: 4px dotted rgb(217,35,35);
	/*red*/
	}

img	{
	float: left;
	margin-left: 2px;
	}
		
/*The "golden ratio" is 1.6 approximately. The layout measures 960 pixels and the divisions are 600 pixels (main content) and 360 pixels (sidebar) inclusivie of margins, borders and padding. Note that the horizontal measurement takes into account that only one border (the greater of the two) is considered by the box model in css. Sidebar measurements: width 300 + (margins 5x37=42) + (padding 7x2=14) + (borders 2x2=4) = 360.*/
/*Reference: Joel. 2015, August 10. "Making Your Web Designs More Effective with the Golden Ratio." Blog. Envatotuts+. Accessed 2017, May 20,https://webdesign.tutsplus.com/articles/making-your-web-designs-more-effective-with-the-golden-ratio--cms-23459.*/
#sidebar{
	float: left;
	width: 300px;
	margin: 20px 5px 20px 37px;
	padding: 1px 7px;
	border: 2px dotted rgb(217,35,35);
	/*red*/
	}
	
/*This clears the two floated divs above and ensures it sits below them.*/
/*Reference: Bradley, Steven. 2011, May 12. "2 Column CSS Layout: Fixed Width and Centered." Vanseo Blog. Accessed 2017, May 2,
  http://vanseodesign.com/css/2-column-layout-code/*/ 	
#footer {
	clear: both;
	}
	
.button {
    font-style: italic;
	color: gray;
	float: right;
    padding: 8px 8px;
	margin-top: 35px;
	margin-bottom: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: .75em;
	box-shadow: 0 10px 7px 0 rgba(0,0,0,0.2), 0 10px 7px 0 rgba(0,0,0,0.19);
	/*Reference: W3Schools. "Buttons." Accessed 2017, May 19, https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_shadow */
	}

/*Code added to help older browers display pages as intended.*/
/*Reference: Curtin University. DIG251 Course Notes 2017, SP1. Chapter 11, page 2. "Helping Older Browsers - HTML5 Shiv"*/
header, section, footer, aside, nav, article, figure {
	display: block;
	}