/* set main defaults */

* {
margin: 0px;
padding: 0px;
}

body {font-size:87.5%}		/* for IE/Win */
html>body {font-size:14px}	/* for everything else */

html, body {height:100%;}

* html #container {height:100%;}

#container {
min-height:100%;
width:760px;
margin:14px auto 0 auto;
background:#fff;
border:1px solid #555;
}


#content {
padding-bottom:50px;	/* for footer to move into */
margin:14px 20px 0 20px;
text-align:center;
}

html {background: #fff url(images/fadeblue.gif) top fixed repeat-x;}



#content img {
border:1px solid #888;
}

h1 {
color:#595C69;
font-size:1.72em;
padding-bottom:2px;
margin-bottom:28px;
border-bottom:1px solid #888;
}

h2 {
color:#595C69;
font-size:1.43em;
margin-bottom:20px;
font-weight:normal;
}

p {
margin:25px 0;
text-align:justify;
color:#3d3d3d;
line-height:1.4em;
font-family:sans-serif;
}

form {
font-family:sans-serif;
color:#3d3d3d;
text-align:left;
}

acronym {
border-bottom:1px dashed #aaa;
}

h1 acronym, h2 acronym {
border:none;
}

a {
color:#0958b3;
border:1px solid #fff;
padding:1px;
}

a:hover {
text-decoration:none;
border:1px solid #888;
background:#a0ccff;
color:#333;
}

.external {
border:1px solid #fff;
padding:0 12px 0 1px;
background: url(images/external.gif) no-repeat right top;
}

.external:hover {
text-decoration:none;
border:1px solid #888;
background:#a0ccff url(images/external.gif) no-repeat right top;
color:#333;
}

.strikeThrough {
text-decoration:line-through;
}

.code {
line-height:1.4em;
}

.htmlTag {
color:purple;
}

.htmlAttribute {
color:blue;
}

.cssTag {
color:blue;
}

.cssBracket {
color:red;
}

	/* HEADER */

#header {
position: relative;
height:147px;
background: url(images/birdsky.jpg) top no-repeat;
border-bottom:1px solid #555;
}

/* FOR IE */
* html #header ul {
bottom:-2px;
}

#header ul {
position:absolute;
bottom:-1px;
left:20px;
list-style: none;
width: 542px;
margin:auto;
}

#header ul li {
margin-right: 3px;
float: left;
margin-bottom:0px;
}

#header .clear {
height:1px;
clear:both;
}

#header li a {
font-family: sans-serif;
font-size: 0.94em;
display: block;
padding: 4px 5px;
line-height: 1em;
background: #f9f9f9;
text-decoration: none;
font-weight: bold;
float: left;
color: #595C69;
border:1px solid #555;
}

#container #header a:hover {
background: #a0ccff;
border:1px solid #555;
color:#333;
}

#home #tabOne {
border-bottom:1px solid white;
background: #fff;
}

#webDesign #tabTwo {
border-bottom:1px solid white;
background: #fff;
}

#aboutMe #tabThree {
border-bottom:1px solid white;
background: #fff;
}

#csstricks #tabFour {
border-bottom:1px solid white;
background: #fff;
}

#contactMe #tabFive {
border-bottom:1px solid white;
background: #fff;
}

	/* FOOTER */

#footer {margin-top:-70px;}

#footer p {
text-align:center;
}


	/* CSS TRICKS */

.codeExample {
border:1px solid #555;
background:#fbfbfb;
padding:0 20px;
margin:20px 0 30px 0;
}

.codeExample .external {
border:1px solid #fbfbfb;
}

.codeExample .external:hover {
border:1px solid #888;
}

.ButtonWrapperOne {
background:url(images/buttonwrapperone.gif) no-repeat top;}

.ButtonWrapperTwo {
background:url(images/buttonwrappertwo.gif) no-repeat bottom;
padding:4px;
}

.ButtonWrapperTwo a, .buttonExample a {
display:block;
width:119px;
padding:2px 0;
background:#eee;
line-height:1.1em;
margin:auto;
font-family:serif;
font-size:1.15em;
font-weight:bold;
color:#595C69;
border:none;
}

.ButtonWrapperOne a {
text-decoration:none;
}

.buttonExample a {
background:#ddd;
text-decoration:none;
}

.buttonExample a:hover {
background:#eee;
border:none;
}

.ButtonWrapperTwo a:hover {
background:#fafafa;
}

.buttonExample {
text-align:center;
}

#content .buttonExample img {
border:none;
}

p.exampleImage {
border:1px solid #555;
margin:auto;
}

#content .exampleImage img {
border:none;
}

	/* CONTACT ME */

form {
margin-left:210px;
}

input, textarea {
margin:1px 0 10px 0;
}

form p {
margin:0;
}

.error {
text-align:center;
color:red;
}