Commit Message:

Add blog on css positioning. Update referring link and referenced
content on index page. Update link on blog index page. Adjust
Settings in stylesheet to correct formatting error.

diff --git a/blog/index.html b/blog/index.html
index 02a92f3..9e21365 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -46,7 +46,7 @@
 		<h1>Recent Blogs</h1>
 		<h2>November 2014</h2>
 		<ul>
-			<li><a href ="#">Latest Blog</a></li>
+			<li><a href ="t2-css-design.html">Relative, Absolute and Fixed Positioning in CSS</a></li>
 			<li><a href ="c1-chefs-kitchen.html">Chefs in the Kitchen</a></li>
 			<li><a href ="t1-git-blog.html">Version Control, Git and GitHub</a></li>
 		</uL>
diff --git a/blog/t2-css-design.html b/blog/t2-css-design.html
new file mode 100644
index 0000000..5e7d470
--- /dev/null
+++ b/blog/t2-css-design.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+	<title>CSS Positioning</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<link type="text/css" rel="stylesheet" href="../stylesheets/default.css">
+	<link type="text/css" rel="stylesheet" href="../stylesheets/blog-stylesheet.css">
+</head>
+
+<body>
+
+<!-- Image, name and title area -->
+<header>
+	<img src="../imgs/jeremy_gagon.jpg" alt="Headshot Jeremy Gagon" />
+	<section>
+		<h1>Jeremy Gagon</h1>
+		<h2>Web Developer</h2>
+	</section>
+	<!-- Quote section -->
+	<section id="quote">
+		<h3 class="invisible">Quote</h3>
+		<q>I want to put a ding in the universe.</q>
+		<p>Steve Jobs</p>
+	</section>
+	<!-- Primary Navigation Section -->
+	<nav>
+		<ul>
+  			<li><a href="../index.html">Home</a></li>
+			<li class="line"><a href="#">Portfolio</a></li>
+			<li class="line"><a href="index.html" id="current" >Blog</a></li>
+			<li class="line"><a href="#">About Me</a></li>
+			<li class="line"><a href="#">Contact</a></li>
+		</ul>
+	</nav>
+
+</header>
+
+<!-- Main content area -->
+<main>
+	<section id="blog">
+		<h1>Relative, Absolute and Fixed Positioning in CSS</h1>
+		<!-- <h2>subtitle</h2> -->
+		<h3>November 30, 2014</h3>
+		<p>We had fun this week at DBC diving into HTML and CSS.  To anyone who is not familiar with these acronymns, you actually are, you just don't know it yet. If you have ever looked at a website, you were looking at something created by HTML and CSS.</p>
+		<p>HTML stands for HyperText Markup Language. It's simply a way to organize, structure and describe the function of elements on a web page, like <q>Hey, that's a paragraph of text</q> or <q>that's an important heading</q>. Who is it talking to? It conveys this information to your web browser so the web browser can display or <q>render</q> it.</p>
+		<p>Okay, but how does it know HOW to render it? How does it know to make that text Verdana and make the paragraph take up half the page? That's where CSS comes in.</p>
+		<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets are basically a set of instructions on how things should be displayed on a web page. These instructions can address colors, fonts, images, and the size and arrangement of elements on a page.</p>
+		<p>The cascading part simply means: prepare to spend a lot of time with Google Chrome Developer Tools.  No, seriously it means that elements can inherit styling instructions from multiple sources.</p>
+		<p>Remember the part about how HTML structures pages by function? The elements on a webpage are organized in the form of a tree-like hierarchy called the DOM (the Document Object Model).  Elements - like a paragraph, a list of items or a section of content - each have a single <q>parent</q> branch and can have multiple <q>children</q> branches in the hierarchy. For example, if a list of links is contained in the site navigation section, the list is a child node of the navigation section. The individual links in the list are children of the list node.</p>
+		<p>Just as you inherited your great looks from your parents, a child node will inherit the styling of CSS applied to its parent node. Any CSS applied directly to that child node will in turn pass that styling down to its child nodes.</p>
+		<h4>The Box Model</h4>
+		<p>Despite what you might think, the box model is NOT an attractive person who does ads for The Packaging Store. The box model describes how all elements on a web page basically occupy a certain amount of real estate on the page in the shape of a box or rectangle. Each box has padding, a border and a margin.</p>
+		<p>Going with the real estate metaphor: the html element would be your house. The CSS border would be your property line. The CSS padding would be the distance from your house to your property line. The CSS margin would be the distance from your property line to your neighbor's property line. You use CSS to control the size of the html element, the padding, the border and the margin for each box on your page.</p>
+		<h4>CSS Positioning</h4>
+		<p>How do all these boxes fit together? How do you position each box on the page?</p>
+		<p>In an html document, there is a <q>natural flow</q> of the elements on the page. Each element cozies up to the next element with the size and spacing based on the CSS box model. This is the default behavior of elements and it's called <code>static</code> positioning. Every element occurs where it would naturally fall on the page.</p>
+		<p>You often need an element to occur out of it's natural position for design purposes. Luckily, an element does not have to occur in it's default position. The box can be offset by specifying an alternate CSS <code>position</code> property and identifying an offset amount. The possible alternate CSS position values are relative, absolute and fixed.</p>
+		<p>When you set the position property to <code>relative</code>, you start from the position where the element would normally fall (with the default static setting) and offset it by some value or values that you specify. For example, you could say <code>left: 35px</code> and it would shift the box 35 pixels to the right.</p>
+		<p>When you set the position property to <code>absolute</code>, you can also offset the position of the element but the offset is relative to a different thing. An element with an absolute position will look up the HTML DOM and find the next element up the tree that is set to either relative, absolute or fixed position. It will then set itself relative to that object. You have essentially removed the element from the natural order of the page so other page elements will ignore it.</p>
+		<p>Fixed position objects are set to an exact location on the screen. This position does not change if you scroll down the page or position any other elements around it. If you set the element to fixed position with top: 20px and left: 20px the element will always be exactly 20px from the top and 20px from the left side.</p>
+		<p>Below are some great resources on CSS positioning. These articles helped me and I recommed them if you are interesed.</p>
+		<ul>
+			<li><a href="http://www.w3schools.com/css/css_positioning.asp">W3School CSS Positioning</a></li>
+			<li><a href="http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/">Absolute, Relative, Fixed Positioning: How Do They Differ?</a></li>
+		</ul>
+	</section>
+</main>
+<!-- sidebar area -->
+<aside>
+	<!-- Twitter widget -->
+	<a class="twitter-timeline" href="https://twitter.com/jergagon1" data-widget-id="538848438926843904">Tweets by @jergagon1</a>
+	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+</aside>
+
+<!-- Secondary Navigation to external links -->
+<footer>
+	<ul>
+		<li><a href="mailto:jergagon1@gmail.com">Email</a></li>
+		<li class="line"><a href="https://github.com/jergagon1">GitHub</a></li>
+		<li class="line"><a href="https://www.facebook.com/jeremygagon">Facebook</a></li>
+		<li class="line"><a href="https://twitter.com/jergagon1">Twitter</a></li>
+		<li class="line"><a href="http://www.quora.com/Jeremy-Gagon">Quora</a></li>
+		<li class="line"><a href="http://www.linkedin.com/pub/jeremy-gagon/30/750/285/">Linkedin</a></li>
+	</ul>
+</footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0024329..825c0fe 100644
--- a/index.html
+++ b/index.html
@@ -50,14 +50,14 @@
 	<!-- excerpt from current blog -->
 	<section id="blogexcerpt">
 		<h2>Current Blog</h2>
-		<h3>Cultural Blog: Chefs in the Kitchen</h3>
+		<h3>Relative, Absolute and Fixed Positioning in CSS</h3>

-		<h4>Reflections on the Culture of Devbootcamp</h4>
+		<!-- <h4>subtitle</h4> -->

-		<h5>November 23, 2014</h5>
+		<h5>November 30, 2014</h5>

-		<p>As I set out on my journey with Devbootcamp, I am both extremely excited and extremely nervous. I believe these feelings stem from uncertainty about my skill level and the expectations of what I've signed up for.</p>
-		<p class="more"><a href="blog/c1-chefs-kitchen.html">more...</a></p>
+		<p>We had fun this week at DBC diving into HTML and CSS.  To anyone who is not familiar with these acronymns, you actually are, you just don't know it yet. If you have ever looked at a website, you were looking at something created by HTML and CSS.</p>
+		<p class="more"><a href="blog/t2-css-design.html">more...</a></p>
 	</section>
 	<!-- code excerpt section -->
 	<section id="codesample">
diff --git a/stylesheets/default.css b/stylesheets/default.css
index 7b8b9d1..3f2107c 100644
--- a/stylesheets/default.css
+++ b/stylesheets/default.css
@@ -119,6 +119,7 @@ main {
 	width: 65%;
 	padding-left: 2em;
 	padding-top: 1em;
+	padding-bottom: 4em;
 }

@@ -148,6 +149,11 @@ main p {
 	margin-top: 1em;
 }

+main ul {
+	list-style: none;
+	padding-left: 0em;
+}
+
 #welcome {
 	width: 100%;
 }