/* Defaults and Resets ------------------------------------------------------------------------ */
* {
	padding: 0;
	margin: 0;
}

body {
	background-image: url(http://www.wyliecreative.com/images/interface/tile.jpg);
	background-repeat: repeat;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size:90%;
	color: #666;
}

a, h1, h2, h3 {
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}

h1 {
	color: #01a5f7;
	font-size: 2em;
	display: block;
	padding-bottom: 2px;
}

h2 {
	font-size: 1.2em;
	line-height: 1.1em;
	color: #888888;
	display: block;
	padding-bottom: 3px;
}

h3 {
	color: #01a5f7;
	font-size: .9em;
	display: block;
	margin-top: 3px;
}

blockquote {
	font-size: 85%;
	padding-right: 30px;
	padding-left: 30px;
}

a {
	color: #8DB736;
}

a:hover {
	color: #01a5f7;
}

hr {
	margin-top: 5px;
	margin-bottom: 5px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 1px;
	border-top-color: #CCC;
}

ul {
	list-style: none;
}

img {
	border: 0;
}

.clear {
	clear: both;
	visibility: hidden;
	height: 0px;
	width: 0px;
	border: none;
}

/* Main Containers ------------------------------------------------------------------------ */

#navContainer{
	background-image: url(http://www.wyliecreative.com/images/interface/nav-tile.jpg);
	background-repeat: repeat-x;
	height: 49px;
}

#nav {
	background-image: url(http://www.wyliecreative.com/images/interface/nav-bgd.jpg);
	height: 49px;
	width: 1060px;
	margin-right: auto;
	margin-left: auto;
}

#contactContainer{
	background-color: #FFF;
	background-image: url(http://www.wyliecreative.com/images/interface/contact-tile.jpg);
	background-repeat: repeat-x;
}

#contact {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 80px;
	padding-bottom: 20px;
	padding-left: 80px;
}

#indexHeaderContainer {
	background-image: url(http://www.wyliecreative.com/images/interface/indexHeader-tile.jpg);
	background-repeat: repeat-x;
	height: 381px;
}

#indexHeader {
	background-image: url(http://www.wyliecreative.com/images/interface/indexHeader-bgd.jpg);
	height: 381px;
	width: 1060px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

#subHeaderContainer {
	background-image: url(http://www.wyliecreative.com/images/interface/subHeader-tile.jpg);
	background-repeat: repeat-x;
	height: 150px;
}

#subHeader {
	background-image: url(http://www.wyliecreative.com/images/interface/subHeader-bgd.jpg);
	height: 170px;
	width: 1060px;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

#contentContainer {
	background-color: #FFF;
}

#content {
	width: 1060px;
	background-color: #FFF;
	margin-right: auto;
	margin-left: auto;
}

#content p {
	font-size: 0.9em;
	color: #666;
	line-height: 1.4em;
        padding-bottom: 10px;
}

#content.h1 {
	color: 01a5f7;
}

#content.indexBody {
	background-image: url(http://www.wyliecreative.com/images/interface/contentBgd.jpg);
	background-repeat: no-repeat;
        min-height: 423px;
}

#content.shortBody {
	background-image: url(http://www.wyliecreative.com/images/interface/contentBgdShort.jpg);
	background-repeat: no-repeat;
        min-height: 423px;
}

#content.thumbsBody {
	background-image: url(http://www.wyliecreative.com/images/interface/thumbsBgd.jpg);
	background-repeat: no-repeat;
       min-height: 620px;
}

#content.detailBody {
	background-image: url(http://www.wyliecreative.com/images/interface/detailBgd.jpg);
	background-repeat: no-repeat;
min-height: 852px;
}

#footerContainer {
	background-image: url(http://www.wyliecreative.com/images/interface/footer-tile.jpg);
	background-repeat: repeat-x;
	height: 200px;
	margin-bottom: 50px;
	clear: both;
}

#footer {
	background-image: url(http://www.wyliecreative.com/images/interface/footer-bgd.jpg);
	height: 200px;
	width: 1060px;
	margin-right: auto;
	margin-left: auto;
}

#footerContent {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	padding-top: 20px;
	color: #FFF;
}

#footerContent h1 {
	color: #FFF;
}

#socailLinks li {
	float: left;
}


/* Main Navigation ------------------------------------------------------------------------ */
#mainNav {
	display: block;
	height: 49px;
	margin-left: 80px;
}

#mainNav ul {
}

#mainNav li {
	float: left;
	overflow: hidden;
}
	
#mainNav li a {
	display: block;
	line-height: 49px;
	text-indent: -2000px;
	}

	#mainNavHome a {width: 73px; background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat 0px 0px;}
	#mainNavHome a:hover {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat 0px -50px;}
	#mainNavHome a.active {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat 0px -100px;}
	
	#mainNavPortfolio a {width: 101px; background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -73px 0px;}
	#mainNavPortfolio a:hover {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -73px -50px;}
	#mainNavPortfolio a.active {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -73px -100px;}
	
	#mainNavAbout a {width: 80px; background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -174px 0px;}
	#mainNavAbout a:hover {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -174px -50px;}
	#mainNavAbout a.active {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -174px -100px;}
	
	#mainNavBlog a {width: 67px; background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -254px 0px;}
	#mainNavBlog a:hover {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -254px -50px;}
	#mainNavBlog a.active {background: url(http://www.wyliecreative.com/images/interface/mainNav.png) no-repeat -254px -100px;}
	
	#mainNavContact a {
	width: 123px;
	background: url(http://www.wyliecreative.com/images/interface/contact.png) no-repeat 0px 0px;
	margin-left: 456px;
	}
	#mainNavContact a:hover {background: url(http://www.wyliecreative.com/images/interface/contact.png) no-repeat 0px -50px;}


/* Sub Nav Buttons
----------------------------------------------------------------*/

#subNav a {
	display: block;
	height: 34px;
	text-indent: -2000px;
}

	#subNavEmail a {
		width: 190px;
		background-repeat: no-repeat;
		background-image: url(http://www.wyliecreative.com/images/interface/emailNav.png);
	}
	
	#subNavEmail a:hover {
		background-image: url(http://www.wyliecreative.com/images/interface/emailNav.png);
		background-repeat: no-repeat;
		background-position: 0px -36px;
	}
	
	#subNavSubmit {
		margin-top: 15px;
		margin-left: 490px;
		margin-bottom: 20px;
	}
	
	#subNavSubmit a {
		width: 74px;
		background-repeat: no-repeat;
		background-image: url(http://www.wyliecreative.com/images/interface/submit.png);
	}
	
	#subNavSubmit a:hover {
		background-image: url(http://www.wyliecreative.com/images/interface/submit.png);
		background-repeat: no-repeat;
		background-position: 0px -36px;
	}

       #subLiveLink a {
		width: 85px;
		background-repeat: no-repeat;
		background-image: url(http://www.wyliecreative.com/images/interface/liveLink.png);
	}
	
	#subLiveLink a:hover {
		background-image: url(http://www.wyliecreative.com/images/interface/liveLink.png);
		background-repeat: no-repeat;
		background-position: 0px -36px;
	}


/* contact form
----------------------------------------------------------------*/


#contact p {
	font-size: 1.4em;
	color: #01a5f7;
}

#contactInfo {
	width: 260px;
	display: block;
	float: left;
	margin-bottom: 20px;
}

#contactInfo p {
	padding-left: 3px;
}
	
#contactInfo a {
	font-weight: normal;
	color: #8DB736;
}

#contactInfo a:hover {
	color: #72952C;	
}

#contactDivider {
	height: 160px;
	width: 50px;
	float: left;
	background-image: url(http://www.wyliecreative.com/images/interface/contactDivider.png);
	background-repeat: no-repeat;
	margin-right: 10px;
}

#contactForm	{
	width: 580px;
	float: left;
}

#formElement {
	float: left;
	width: 180px;
	margin-right: 10px;
	display: block;
	height: 50px;
}

#contactForm label{
	display:block;
	font-size: 0.8em;
	color: #999;
	padding-top: 2px;
}

#contactForm label.error{
	font-size: 0.7em;
	color: #F00;
	margin-top: 4px;
}

#formInput {
	background-image: url(http://www.wyliecreative.com/images/interface/input-bgd.jpg);
	background-repeat: no-repeat;
	display: block;
	height: 34px;
	width: 180px;
}

#contactForm input {
	background: transparent;
	width:160px;
	color: #FFF;
	border:solid 0 #fff;
	margin-top: 8px;
	margin-left: 9px;
	font-size: 1.1em;
}

#contactForm button {
	text-align:center;
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 20px;
	background-color: #8DB736;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}


/* Index Page Elements ------------------------------------------------------------------------ */
#contactButton {
	background-color: #8FB836;
	color: #FFF;
}

#wcLogo {
	padding-top: 25px;
	padding-left: 50px;
}

#promoWeb {
	background-repeat: no-repeat;
	background-image: url(http://www.wyliecreative.com/images/interface/title-online.png);
	display: block;
	height: 170px;
	width: 260px;
	margin-left: 80px;
	margin-top: 10px;
	float: left;
}

#promoScreen {
	background-repeat: no-repeat;
	background-image: url(http://www.wyliecreative.com/images/interface/title-onScreen.png);
	display: block;
	height: 170px;
	width: 260px;
	margin-left: 60px;
	margin-top: 10px;
	float: left;
}

#promoPaper {
	float: left;
	background-repeat: no-repeat;
	background-image: url(http://www.wyliecreative.com/images/interface/title-onPaper.png);
	display: block;
	height: 170px;
	width: 260px;
	margin-left: 60px;
	margin-top: 10px;
}

.promoList {
	text-decoration: none;
	color: white;
	padding-top: 35px;
	padding-left: 75px;
}
.promoList li {
	font-size: 1em;
	height: 24px;
	list-style-position: inside;
	list-style-image: url(http://www.wyliecreative.com/images/interface/check.png);
}
#workNav {
	display: block;
	height: 32px;
	width: 124px;
	margin-top: 8px;
	margin-left: 70px;
}

#workNav ul {
}

#workNav li {
	float: left;
	overflow: hidden;
}
	
#workNav li a {
	display: block;
	line-height: 32px;
	text-indent: -2000px;
	}
	
	#workNavWork a {
	width: 124px;
	background: url(http://www.wyliecreative.com/images/interface/seeTheWork.png) no-repeat 0px 0px;
	}
	
	#workNavWork a:hover {background: url(http://www.wyliecreative.com/images/interface/seeTheWork.png) no-repeat 0px -36px;}


#contentColumn {
	float: left;
	width: 270px;
	display: block;
	margin-left: 50px;
	font-size: 0.8em;
	color: #666;
	line-height: 1.2em;
}


/* Index Blog Detail ------------------------------------------------------------------------ */
#indexColumnLeft {
	float: left;
	width: 580px;
	margin-left: 80px;
}

#indexBlog {
	margin-top: 8px;
        margin-left: 40px;
}

#indexBlog p {
	color:#888888;
	font-size:1.1em;
	color: #666;
	line-height: 1.4em;
}

/* Tweet Detail ------------------------------------------------------------------------ */
.tweet {
	font-family: font-family: "Lucida Grande", Arial, sans-serif;
	font-size: .9em;
	line-height: 1.2em;
}

.tweet .tweet_list {
	-webkit-border-radius: .5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.tweet .tweet_list li {
	overflow: auto;
	padding-top: 0.8em;
	padding-right: 0.7em;
	padding-bottom: 0.8em;
	padding-left: 0.5em;
}

.tweet .tweet_list li a {
	color: #8DB736;
}

.tweet .tweet_list li a:hover {
	color: #01a5f7;
}

.tweet .tweet_list .tweet_even {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #01a5f7;
	border-bottom-color: #01a5f7;
}

.tweet .tweet_list .tweet_avatar {
	padding-right: 0.5em;
	float: left;
	display: none;
}

.tweet .tweet_list .tweet_avatar img {
	vertical-align: top;
}

/* Portfolio Detail Elements ------------------------------------------------------------------------ */
#thumbsColumn {
	padding-left: 80px;
	width: 920px;
}

#thumbsElement {
	float: left;
	width: 206px;
        height: 145px;
	margin-bottom: 20px;
	margin-right: 20px;
}

#thumbsImage {
	border: 1px solid #CCC;
	padding: 2px;
	height: 100px;
	width: 200px;
	background-color: #FFF;
}


/* Portfolio Detail Elements ------------------------------------------------------------------------ */
#detailColumnLeft {
	float: left;
	width: 580px;
	margin-left: 80px;
}

#detailColumnRight {
	float: left;
	width: 310px;
	padding-left: 60px;
}

#detailImageLarge {
	border: 1px solid #CCC;
	padding: 2px;
	margin-top: 6px;
	background-color: #FFF;
}

#detailImageSmallLeft {
	border: 1px solid #CCC;
	padding: 2px;
	margin-top: 20px;
	float: left;
	background-color: #FFF;
}

#detailImageSmallRight {
	border: 1px solid #CCC;
	padding: 2px;
	margin-top: 20px;
	float: left;
	margin-left: 40px;
	background-color: #FFF;
}

#otherProjects {
}

#otherProjects li {
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 1px;
	border-top-color: #CCC;
	height: 40px;
	line-height: 40px;
}

#otherProjects li a {
	font-size: .9em;
	color: #8DB736;
	display: block;
	height: 40px;
	padding-left: 15px;
}

#otherProjects li a:hover {
	color: #FFF;
	background-color: #8DB736;
}