/*
COLORS STYLING
Lime Green: #8dc63f; 
Amber Orange: #f7941e;
----------------------
Dark Gray (Font): #1f2020;
Dark Gray-Blue(Background, Gradient): #1f252c;
Medium Blue(Gradient): #27425e;
Gray-White(Body Background): #f1f1f2;

FONTS STYLING
H1:  45px Franchise, Arial, Gadget, sans-serif;
H2:  30px Franchise, Arial, Gadget, sans-serif;
Main Nav:  27px Franchise, Arial, Gadget, sans-serif;
Sub Nav:  18px Franchise, Arial, Gadget, sans-serif;
Standard:  0.9em Georgia, serif;
Intro-Text:  21px Georgia, serif;
Legal:  0.7em Georgia, serif;
*/


/* NORMALIZING */
* { 
	margin: 0;
	padding: 0;
}
p {
	padding-top: 5px;
}
a img {
	border: none;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 22, 2012 */
@font-face {
    font-family: Franchise;
    src: url('../fonts/franchise-bold-webfont.eot');
    src: url('../fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/franchise-bold-webfont.woff') format('woff'),
         url('../fonts/franchise-bold-webfont.ttf') format('truetype'),
         url('../fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* SITEWIDE CSS */
body {
	font: 0.9em Georgia, serif;
	background: #27425e;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	color: #f1f1f2;
}
#wrapper {
	margin: 0 auto;
	width: 960px;
	position: relative;
}
header {
	padding: 0;
	height: 160px;
}
header img {
	padding: 0px 0 0 0;
}
nav#complete {
	position: absolute;
	top: 0;
	right: 0;
	width: 520px;
}

nav#hosting {
	width: 520px;
	height: 30px;
	background-color: #f1f1f2;
}
nav#hosting li {
	color: #1f2020;
	display: inline-block;
	font: 18px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
	text-decoration: none;
	margin: 4px 23px;
}
nav#hosting a:link, nav#hosting a:visited, nav#hosting a:active {
	color: #1f2020;
	text-decoration: none;
}
nav#hosting a:hover {
	text-decoration: underline; 
}
nav#hosting .current a:link, nav#hosting .current a:visited, nav#hosting .current a:active {
	text-decoration: underline; 
}

nav#main {
	width: 520px;
}
nav#main ul {
	padding-top: 20px;
	list-style-type: none;
}
nav#main li {
	margin: 0;
	padding: 7px 0 0 0;
	float: left;
	font: 27px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
	height: 38px;
}
nav#main ul li a:link, nav#main ul li a:visited, nav#main ul li a:active {
	padding: 9px 11px 12px 45px;
	color: #f1f1f2;
	text-decoration: none; 
}
nav#main ul li a:hover {
	color: #1f2020;
}
nav#main ul li#home.current a:link, nav#main ul li#home.current a:visited {	color: #1f2020; }
nav#main ul li#work.current a:link, nav#main ul li#work.current a:visited {	color: #1f2020; }
nav#main ul li#blog.current a:link, nav#main ul li#blog.current a:visited {	color: #1f2020; }
nav#main ul li#about.current a:link, nav#main ul li#about.current a:visited {	color: #1f2020; }
nav#main ul li#contact.current a:link, nav#main ul li#contact.current a:visited {	color: #1f2020; }

nav#main li#home { width: 98px; background: #1f252c url(../images/nav-icons.png) -7px -49px no-repeat; }
nav#main li#home:hover { background: #8dc63f url(../images/nav-icons.png) -7px -3px no-repeat; }
nav#main li#home.current { color: #1f2020; background: #8dc63f url(../images/nav-icons.png) -7px -3px no-repeat; }

nav#main li#work { width: 102px; background: #1f252c url(../images/nav-icons.png) -105px -49px no-repeat; }
nav#main li#work:hover { background: #8dc63f url(../images/nav-icons.png) -105px -3px no-repeat; }
nav#main li#work.current { color: #1f2020; background: #8dc63f url(../images/nav-icons.png) -105px -3px no-repeat; }

nav#main li#blog { width: 94px; background: #1f252c url(../images/nav-icons.png) -205px -49px no-repeat; }
nav#main li#blog:hover { background: #8dc63f url(../images/nav-icons.png) -205px -3px no-repeat; }
nav#main li#blog.current { color: #1f2020; background: #8dc63f url(../images/nav-icons.png) -205px -3px no-repeat; }

nav#main li#about { width: 104px; background: #1f252c url(../images/nav-icons.png) -305px -49px no-repeat; }
nav#main li#about:hover { background: #8dc63f url(../images/nav-icons.png) -305px -3px no-repeat; }
nav#main li#about.current { color: #1f2020; background: #8dc63f url(../images/nav-icons.png) -305px -3px no-repeat; }

nav#main li#contact { width: 122px; background: #1f252c url(../images/nav-icons.png) -405px -49px no-repeat; }
nav#main li#contact:hover { background: #8dc63f url(../images/nav-icons.png) -405px -3px no-repeat; }
nav#main li#contact.current { color: #1f2020; background: #8dc63f url(../images/nav-icons.png) -405px -3px no-repeat; }

nav#subwork {
	margin: 40px 0 0 55px;
	width: 199px;
	height: 35px;
	padding-top: 20px;
	background-image: url(../images/brackets.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
nav#subwork ul {
	margin: 6px 0 0 0px;
	list-style-type: none;
}
nav#subwork li {
	float: left;
	font: 18px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
}
nav#subwork li a:link, nav#subwork li a:visited, nav#subwork li a:active {
	padding: 5px 10px;
	margin: 0 0px;
	color: #f1f1f2;
	text-decoration: none;
}
nav#subwork li a:hover {
	color: #1f2020;
	background: #f1f1f2;
}
nav#subwork li:first-child a:hover { border-radius: 3px 0px 0px 3px; }
nav#subwork li:last-child a:hover { border-radius: 0px 3px 3px 0px; }
nav#subwork .current a:link, nav#subwork .current a:visited, nav#subwork .current a:active {
	color: #1f2020;
	background: #f1f1f2;
}
nav#subwork .current:first-child a:link, nav#subwork .current:first-child a:visited, nav#subwork .current:first-child a:active { border-radius: 3px 0px 0px 3px; }
nav#subwork .current:last-child a:link, nav#subwork .current:last-child a:visited, nav#subwork .current:last-child a:active { border-radius: 0px 3px 3px 0px; }

#content {
	padding: 13px 20px;
	margin-bottom: 20px;
	width: 920px;
	background-color: #f1f1f2;
	color: #1f2020;
}
#singlecol {
	width: 920px;
	position: relative;
}
#maincol {
	width: 600px;
	float: left;
	position: relative;
}
#sidecol {
	width: 300px;
	float: right;
	position: relative;
}
section h1 {
	font: 45px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
	line-height: 1;
}
section h2 {
	font: 30px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
}
section p {
	padding: 5px 0 10px;
}
section p.post-line {
	padding: 0 0 10px;
}
section a:link, section a:visited, section a:active {
	color: #1f2020;
}
section a:hover {
	color: #1f2020;
	text-decoration: none;
}
section article {
	display: block;
	margin-bottom: 20px;
	border-bottom: 1px solid #1f2020;
}
section article.last {
	border-bottom: none;
}
article.intro p {
	font: 21px Georgia, serif;
	line-height: 1.35;
	padding-bottom: 15px;
}
#social {
	width: 130px;
	height: 40px;
	position: absolute;
	top: 5px;
	right: 0px;
}
#social li {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0px;
	background: url(../images/nav-icons-body.png) 0 0 no-repeat;
	display: block;
	list-style: none;
}
#social a {
	width: 40px;
	height: 40px;
	display: block;
}
#social #link-f {left: 0px;}
#social #link-f a:hover {background: url(../images/nav-icons-body.png) -0px -50px no-repeat;}

#social #link-t {left: 45px; background-position: -50px 0;}
#social #link-t a:hover {background: url(../images/nav-icons-body.png) -50px -50px no-repeat;}

#social #link-in {left: 90px; background-position: -100px 0;}
#social #link-in a:hover {background: url(../images/nav-icons-body.png) -100px -50px no-repeat;}

footer {
	border-top: 1px solid #1f2020;
}
footer p {
	padding: 8px 0;
	font-size: 0.7em;
}
footer p.nav {
	font-size: 0.9em;
}
footer p.left {
	float: right;
	visibility: hidden;
}
footer p.right {
	float: left;
}
footer a:link, footer a:visited, footer a:active {
	color: #1f2020;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
footer p.clear {
	clear: both;
}


/* GENERAL STYLING */
.clear { clear: both; }
.hidden { display:none; }
.superscript{ font-size:x-small; vertical-align:top; } 
.subscript{ font-size:x-small; vertical-align:bottom; }


/* ICON STYLING */
.icons {
	margin: 0 0 10px 10px;
	width: 280px;
}
.icons li {
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	list-style: none;
	margin: 0 5px 10px 0;
	background: url(../images/nav-icons-body.png) 0 0 no-repeat;
}
.icons #icon-ps {background-position: -150px 0;}
.icons #icon-ai {background-position: -150px -50px;}
.icons #icon-id {background-position: -200px 0;}
.icons #icon-acrobat {background-position: -200px -50px;}
.icons #icon-fl {background-position: -250px 0;}
.icons #icon-dw {background-position: -250px -50px;}
.icons #icon-fw {background-position: -300px 0;}
.icons #icon-ae {background-position: -300px -50px;}
.icons #icon-sb {background-position: -350px 0;}
.icons #icon-cp {background-position: -350px -50px;}
.icons #icon-xx {background-position: -400px 0;}
.icons #icon-3ds {background-position: -400px -50px;}
.icons #icon-xhtml {background-position: -450px 0;}
.icons #icon-html5 {background-position: -450px -50px;}
.icons #icon-css {background-position: -500px 0;}
.icons #icon-css3 {background-position: -500px -50px;}
.icons #icon-as3 {background-position: -550px 0;}
.icons #icon-js {background-position: -550px -50px;}
.icons #icon-php {background-position: -600px 0;}
.icons #icon-mysql {background-position: -600px -50px;}
.icons #icon-xml {background-position: -650px 0;}
.icons #icon-rss {background-position: -650px -50px;}
.icons #icon-xx {background-position: -700px 0;}
.icons #icon-wordpress {background-position: -700px -50px;}
.icons #icon-xx {background-position: -750px 0;}
.icons #icon-xx {background-position: -750px -50px;}
.icons #icon-xx {background-position: -800px 0;}
.icons #icon-xx {background-position: -800px -50px;}
.icons #icon-up {background-position: -850px 0;}
.icons #icon-down {background-position: -900px 0;}


/* HOME PAGE STYLING */
article.main-home {
	background: #f1f1f2 url(../images/philip-city.jpg) 98% 100% no-repeat;
	min-height: 390px;
}
#slider-main {
	position: relative;
	height: 280px;
	margin-bottom: 15px;
}
#slider-nav {
	position: absolute;
	bottom: 42px;
	right: 11px;
	z-index: 10;
}
#slider-nav li {
	float: left;
	list-style: none;
}
#slider-nav li a:link, .slider-nav li a:visited, #slider-nav li a:active {
	padding: 5px 10px;
	margin-right: 5px;
	text-decoration: none;
	color: #1f2020;
	background-color: #1f2020;
	border: 2px solid #f1f1f2;
}
#slider-nav li a:hover, #slider-nav li.activeSlide a:link, #slider-nav li.activeSlide a:visited, #slider-nav li.activeSlide a:hover, #slider-nav li.activeSlide a:active {
	color: #f1f1f2;
	background-color: #f1f1f2;
	border: 2px solid #1f2020;
}
#slider-prj {
	height: 260px;
	background-color: #1f252c;
}
#slider-prj .prj-info {
	float: left;
	padding: 5px 10px;
	width: 290px;
	height: 240px;
	color: #f1f1f2;
	font-size: 14px;
}
#slider-prj .prj-info span {
	color: #f7941e;
}
.prj-info span a:link, .prj-info span a:visited, .prj-info span a:active {
	color: #f7941e;
	text-decoration: underline;
}
.prj-info span a:hover {
	color: #f7941e;
	text-decoration: none;	
}
#slider-prj .prj-info p.button {
	padding-top: 10px;
}
#slider-prj img {
	float: right;
	padding: 10px;
	width: 590px;
	height: 240px;
}
#slider-prj p.button a:link, #slider-prj  p.button a:visited, #slider-prj p.button a:active  {
	padding: 5px 8px;
	font-family: Franchise, Arial, Gadget, sans-serif;
	font-size: 21px;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	color: #1f2020;
	background-color: #f1f1f2;
}
#slider-prj p.button a:hover {
	background-color: #8dc63f;
}
.floaters {
	margin: 0 20px 20px 0;
	float: left;
	width: 293px;
	min-height: 230px;
	background: #f1f1f2 url(../images/bg-mini.jpg) repeat-x bottom left;
}
.floaters.final { margin: 0 0 20px 0; }
.floaters h2 { padding: 0 10px; }
.floaters p { padding: 5px 10px 10px; }
#twitterfeed { padding-left: 10px; }

#sidecol .floaters {
	width: 293px;
	min-height: 130px;
}
#sidecol .first {
	margin-top: 50px;
}


/* WORK STYLING */
.project {
	margin: 0 20px 20px 0px;
	padding: 0 10px;
	float: left;
	width: 273px;
	min-height: 230px;
	background: #f1f1f2 url(../images/bg-mini.jpg) repeat-x bottom left;
}
.project.third { 
	margin: 0 0 20px 0px;
}
.project.spacer { 
	margin-top: 30px;
}
.project img[src*=thumbnails] {
	width: 273px;
	height: 120px;
	box-shadow: 3px 3px 4px #1f2020;
	margin: 8px 0;
}
.prj-arrow {
	margin-left: -10px;
	background: url(../images/project-arrow.png) no-repeat top left;
}
.third .prj-arrow {
	background: url(../images/project-arrow-third.png) no-repeat top left;
}
.prj-arrow p  {
	padding-top: 5px;
	margin-left: 10px;
}
.prj-arrow p.font-lock  {
	font-size: 14px;
}
.prj-arrow .highlight {
	color: #f7941e;
}
.prj-arrow p:first-child {
	color: #f1f1f2;
}
.prj-arrow span a:link, .prj-arrow span a:visited, .prj-arrow span a:active {
	color: #f7941e;
	text-decoration: underline;
}
.prj-arrow span a:hover {
	color: #f7941e;
	text-decoration: none;	
}
p.button {
	padding-top: 10px;
}
p.button a:link, p.button a:visited, p.button a:active  {
	padding: 5px 8px;
	font:21px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	color: #f1f1f2;
	background-color: #1f2020;
}
p.button a:hover {
	color: #1f2020;
	background-color: #8dc63f;
}
.project .img-wrapper {
	float: right;
}


/* PROJECT STYLING */
#prj-viewer {
	margin-top: 12px;
	margin-bottom: 23px;
	box-shadow: 3px 3px 4px #1f2020;
	font-size: 0em;
}
#prj-viewer-nav {
	margin-top: 10px;
	list-style: none;
	font-size: 0em;
}
#prj-viewer-nav li {
	margin: 20px 10px 21px 0;
	float: left;
	box-shadow: 3px 3px 4px #1f2020;
}

nav#projects {
	width: 130px;
	height: 40px;
	padding: 5px 0 45px 10px;
}
nav#projects li {
	width: 40px;
	height: 40px;
	display: block;
	background: url(../images/nav-icons-body.png) 0 0 no-repeat;
	list-style: none;
	margin-bottom: 10px;
}
nav#projects a {
	width: 40px;
	height: 40px;
	display: block;
	text-decoration: none;
}
nav#projects #link-up {background-position: -850px 0px;}
nav#projects #link-up a:hover {background: url(../images/nav-icons-body.png) -850px -50px no-repeat;}

nav#projects #link-down {background-position: -900px 0px;}
nav#projects #link-down a:hover {background: url(../images/nav-icons-body.png) -900px -50px no-repeat;}

nav#projects #link-updead {background-position: -950px 0px;}
nav#projects #link-downdead {background-position: -950px -50px;}

nav#projects .pushover {
	margin-top: 10px;
	padding: 0 10px 0 50px;
	font: 21px Georgia, serif;
	line-height: 1.35;
}


/* PROJECT | ABOUT | CONTACT STYLING */
.sidebox {
	margin: 0 20px 20px 0;
	float: left;
	width: 300px;
	min-height: 130px;
	background: #f1f1f2 url(../images/bg-mini.jpg) repeat-x bottom left;
}
.sidebox.final { margin: 0 0 20px 0; }
.sidebox h2 { padding: 0 10px; }
.sidebox p { padding: 5px 10px 10px; }

.sidebox .prj-arrow {
	margin: 0;
}
.sidebox .prj-arrow p  {
	padding-top: 5px;
	margin-left: 0px;
}


/* ABOUT STYLING */
section p.question {
	padding: 10px 0 0 0;
	font-weight: bold;
}
	
	
/* CONTACT STYLING */
#contact-form {
	width:580px;
	min-height: 200px;
	background-color: #1f252c;
	color: #f1f1f2;
	padding: 5px 10px;
}
#contact a:link, #contact a:visited, #contact a:active {
	color: #f1f1f2;
}
#contact a:hover {
	color: #f1f1f2;
	text-decoration: none;
}
#contact #sendbtn, #contact #resetbtn {
	padding: 2px 5px;
	font-family: Franchise, Arial, Gadget, sans-serif;
	font-size: 21px;
	font-weight: normal;
	text-align: center;
	text-decoration: none;
	color: #1f2020;
	background-color: #f1f1f2;
	border: none;
}
#contact #resetbtn {
	margin-left: 20px;
}
#contact #sendbtn:hover, #contact #resetbtn:hover {
	background-color: #8dc63f;
}
#contact h2 {
	color: #f7941e;
	padding: 0;
}
#contact .required {
	color: #f7941e;
}
#contact .credits {
	font-size: smaller;
	text-align: right;
}

#contact .fmtext, #contact .fmtextarea {
	display: block;
	margin: 0 0;
	padding: 2px;
	width: 180px;
}
#contact .fmtextarea {
	width: 370px;
	height: 150px;
}
#info-float {
	width: 200px;
	float: left;
}
#message-float {
	width: 380px;
	float: right;
}
	
	
/*WEB HOSTING STYLING */
tr.subheader td {
	background-color: #f7941e;
}
td {
	padding: 10px;
	text-align: center;
	width: 215px;
}
td:first-child {
	text-align: left;
}
tr:nth-child(1) td {
	color: #1f2020;
	font: 32px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	padding: 0 10px;
}
tr:nth-child(1) span {
	float: right;
}
tr:nth-child(2) td {
	color: #1f2020;
	font: 18px Franchise, Arial, Gadget, sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	padding: 0 10px;
}