@charset "UTF-8";
/* CSS Document */

/*
***********************************************************

Title:			style.css
Browser(s): 	All (partial IE)
Elements:		JQuery, CSS, XHTML

Author: 		Tyler Galpin (www.tylergalpin.com)
Created:		01/11/2009
Edited: 		03/06/2010

Hello, fellow nerd. Please look around the source code and learn from it - this is exactly how I learned how to do all this. However, there is a difference between learning and stealing. Please do not steal. Seriously. Or I'll find out. And it won't be fun.

***********************************************************
*/

/********** GENERAL **********/

* {
	margin: 0;
	padding: 0;
	list-style: none;
	outline: none !important;
	font-size: 1em;
	text-decoration: none;
	}

		a {
			color: #e83636;
			}
		
		a:hover,
		a:focus {
			color: #666666;
			border: none;
			text-decoration: none;
			}
		
		a:active {
			color: #000;
			}

h1 {
	font: 14px/30px "Gotham Medium", Verdana, sans-serif;
	color: #8c8c8c;
	clear: both;
	text-transform: none;
	text-shadow: #fff 0 1px 0;
	margin-bottom: 10px;
	}
	
	h3 {
		margin-left: 5px;
		margin-bottom: 5px;
	}

body {
	font: 11px/16px "Lucida Grande", Verdana, sans-serif;
	color: #333333;
	text-shadow: #fff 0 1px 0;
	overflow: -moz-scrollbars-vertical;
	overflow: -webkit-scrollbars-vertical;
	-webkit-text-size-adjust: none;
	background: url(http://tylergalpin.com/images/bg.png) #000 center top no-repeat;
	}

#container {
	width: 652px;
	height: 432px;
	margin: 40px auto 0px auto;
	background: url(http://tylergalpin.com/images/card.png) no-repeat;
	}

img.avatar {
	width: 40px;
}


/********** CARDHEADER **********/

#logo {
	width: 214px;
	height: 62px;
	margin: 90px auto 0px auto;
	}
	
	#homeBadge {
		width: 190px;
		height: 17px;
		background: url(http://tylergalpin.com/images/home-badge1.png);
		position: relative;
		top: -55px;
		left: 420px;
		}
		
		img.v2-badge {
			width: 48px;
			height: 33px;
			position: relative;
			top: -80px;
			left: 220px;
			-webkit-transition: all 0.15s ease-out;
			-moz-transition: all 0.15s ease-out;
			}
			
			img.v2-badge:hover {
				-webkit-transform: rotate(4deg) scale(1.03);
				-webkit-transition: all 0.25s ease-out;
				-moz-transform: rotate(4deg) scale(1.03);
				-moz-transition: all 0.25s ease-out;
			}

img.canada-badge {
	width: 24px;
	height: 23px;
	position: relative;
	top: -75px;
	left: 220px;
	-webkit-transition: all 0.15s ease-out;
	}
	
	img.canada-badge:hover {
		-webkit-transform: rotate(4deg) scale(1.03);
		-webkit-transition: all 0.25s ease-out;
	}
	
img.webdesign {
	position: relative;
	top: 12px;
	left: 56px;
}

/********** NAVIGATION **********/

#navigation {
	height: 30px;
	padding: 5px 35px;
/*	background: url(images/navgation.png) no-repeat 50% 0; */
background: none;
	line-height: 28px;
	font-weight: bold;
	margin: 0px auto 0px auto;
	width: 250px;
	position: relative;
	top: 28px;
	font-size: 11px;
	}


		#navigation a {
			color: #777;
			}
		
		#navigation a:hover,
		#navigation a:focus {
			color: #000000;
			}
		
		#navigation a:active {
			color: #000;
			}


#navigation li {
	float: left;
	}

#navigation li a {
	text-decoration: none;
	float: left;
	padding-right: 10px;
	margin-right: 5px; 
	background: url(http://tylergalpin.com/images/nav/navigation-li-a5.png) no-repeat right 30px;
	}

#navigation li a span {
	float: left;
	padding: 1px 6px 1px 17px;
	background: url(http://tylergalpin.com/images/nav/navigation-li5.png) no-repeat 0 30px;
	}

#navigation li a:hover,
#navigation li a:focus {
	background-position: right 0;
	}

#navigation li a:hover span,
#navigation li a:focus span {
	background-position: 0 0;
	}

#navigation li a:active {
	background-position: right 0px;
	}

#navigation li a:active span {
	background-position: 0 0px;
	padding: 2px 6px 1px 17px;
	color:  #999;
	}

.about #navigation li#nav-about a,
.networks #navigation li#nav-networks a,
.contact #navigation li#nav-contact a {
	background-position: right -60px;
	color: #fff;
	text-shadow: #666 0 1px 2px;
	cursor: default;
	}

.about #navigation li#nav-about a span,
.networks #navigation li#nav-networks a span,
.contact #navigation li#nav-contact a span {
	background-position: 0 -60px;
	}
	
span.emph {
	color: #666;
	text-transform: uppercase;
	font-weight: bold;
}

img.star {
	margin-right: 6px;
}

/********** CARDCONTENT **********/

#slider {
    width: 550px;
    margin: 50px auto 0px auto;
    position: relative;
	}

.scroll {
    height: 290px;
    width: 550px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: scroll left bottom;
	}

.scrollContainer div.panel {
    margin: 0px 0px 90px 0px;
    height: 290px;
    width: 550px;
	text-align: left;
	}
	
	.scrollContainer div.panel h1 {
	text-align: left;
	}
	.scrollContainer div.panel p {
	padding-bottom: 10px;
	text-align: left;
	font: 11px/16px "Lucida Grande", Verdana, sans-serif;
	}

	.scrollContainer div.panel ol{
	padding-left: 0px; /* top right bottom left */
	padding-right: 0px;
	text-align: left;
	font: 11px/16px "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 10px;
	}

	.scrollContainer div.panel ol li{
	padding-right: 0px;
	text-align: left;
	font: 11px/16px "Lucida Grande", Verdana, sans-serif;
	}

	.scrollContainer div.panel ol.social{
	padding-right: 0px;
	margin-left: 285px;
	text-align: left;
	font: 10px/16px "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 10px;
	}

	.scrollContainer div.panel ol.social li{
	padding-left: 5px;
	text-align: left;
	font: 10px/16px "Lucida Grande", Verdana, sans-serif;
	background: url(images/ol-black.png) no-repeat;
	margin-bottom: 5px;
	color: #fff;
	text-shadow: none;
	}

	.scrollContainer div.panel ol.social li img{
	text-align: left;
	font: 12px/16px "Lucida Grande", Verdana, sans-serif;
	height: 11px;
	}
	
	.scrollContainer div.panel span.special {
	color: #266ee1;
	font: 11px/16px "Lucida Grande", Verdana, sans-serif;
	padding: none;
	width: 510px;
	margin: 0px 0px 0px 10px;
	}
	
	span.ol-text {
		margin-left: 12px;
		color: #333;
		text-shadow: #fff 0 1px 0;
		font-size: 11px;
	}
	
	#notice {
		width: 549px;
		height: 40px;
		border: 1px dashed #333;
		background: #fff;
	}

	
		.scrollContainer div.panel#about a {
			color: #e83636;
			}
		
		.scrollContainer div.panel#about a:hover,
		.scrollContainer div.panel#about a:focus {
			color: #000033;
			}
		
		.scrollContainer div.panel#about a:active {
			color: #000;
			}
			

s

.hide {
    display: none;
	}


ul.projects {
	list-style: none;
}

ul.projects li {
	display: inline;
	list-style-type: none;
	width: 169px;
	height: 170px;
}

img.project {
	width: 169px;
	height: 128px;
}

a img.project {
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.5s ease-out;
	-moz-transition-duration: 0.5s;
}

a:hover img.project {
	-webkit-transform: scale(1.04);
	-webkit-transition: all 0.15s ease-out;
	-moz-transform: scale(1.04);
	-moz-transition: all 0.5s ease-out;
	-moz-transition-duration: 0.5s;
	border: none;
	outline: none;
}

span.project-desc {
	position: relative;
	width: 165px;
	left: 5px;
}

/* --- Grid --- */

#divider-dotted {
	width: auto;
	height: 1px;
	border-bottom: 1px dotted #ccc;
	margin: 6px 0px 0px 0px;
}

.grid {
  width: 550px;
  margin: auto;
}

.grid-m1 {
  float: left;
  width: 0px;
  height: 1px;
}

.grid-c1 {
  float: left;
  width: 169px;
}

.grid-m2 {
  float: left;
  width: 20px;
  height: 1px;
}

.grid-c2 {
  float: left;
  width: 169px;
}

.grid-m3 {
  float: left;
  width: 20px;
  height: 1px;
}

.grid-c3 {
  float: left;
  width: 169px;
}


#intro-text {
	width: 490px;
	float: right;
	margin: 4px 0px 14px 0px;
}
 

/********** NETWORKS **********/


.subheader { width: 551px; margin: 10px auto 0px auto; padding: 0px 0px 0px 0px; position: relative; height: 28px; top: 40px; left: 0px;}
.subheader ul { padding: 0px; margin: 0px;}
.subheader li { padding: 0px; margin: 0px; display: inline; list-style-type: none;}
.subheader li a { color:#fff; border: none;}
.menu { position: relative; top: -35px; left: 0px; width: 551px; height: 28px;}
.menu em { display: none; margin: 0; padding: 0; line-height: 0px;}
.menu ul { padding: 0px; margin: 0px; border: none;}
.menu li { float: left; padding: 0px; margin: 0px 0px 10px 0px; list-style-type: none; display: inline; border: none;}
.menu li a { display: block; height: 28px; border: none; }
.menu li a.m1 { background: url(http://tylergalpin.com/images/dribbble.png) no-repeat left top; width: 551px; border: none;}
.menu li a.m2 { background: url(http://tylergalpin.com/images/facebook.png) no-repeat left top; width: 551px;margin: 0px 0px 0px 0px; border: none;}
.menu li a.m3 { background: url(http://tylergalpin.com/images/twitter-alt.png) no-repeat left top; width: 551px;margin: 0px 0px 0px 0px; border: none;}
.menu li a.m4 { background: url(http://tylergalpin.com/images/ember.png) no-repeat left top; width: 551px; margin: 0px 0px 0px 0px; border: none;}
.menu li a.m5 { background: url(http://tylergalpin.com/images/linkedin.png) no-repeat left top; width: 551px; margin: 0px 0px 0px 0px; border: none;}
.menu li a:hover, #menu li a:focus { background-position: left -28px; border: none !important; text-decoration: none;}
.menu li a span {line-height: 26px; text-align: right; color: #888; float: right; margin-right: 15px;}
.menu li a:hover span {color: #000; text-shadow: none;}
.menu li a:active {
	left: 1px;
	position: relative;
	}
.menu li:hover {
	border: none;
}

span.twitter-text:hover {
	color: #37b5bb !important;
	}
	
	span.twitter-text {
		color: #999;
	}

span.facebook-text:hover {
	color: #284883 !important;
	}

span.dribbble-text:hover {
	color: #d34e7b !important;
	}

span.ember-text:hover {
	color: #fd6e25 !important;
	}

span.linkedin-text:hover {
	color: #2079a7 !important;
	}


/********** CONTACT **********/

form {
	height: 230px;
}

input.contact-field {
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
	background: #fff;
	padding: 4px 3px;
	cursor: #000;
	color: #000;
	}
	
	input.contact-field:focus {
		-webkit-box-shadow: #1b71e9 0px 0px 4px;
		border: 1px solid #1b71e9;
	}
	
	
	.input-container {
		border: #999;
	}
	
	.input-container:active {
		border: #000;
	}

textarea.contact-msg {
	border: 1px solid #999;
	padding: 4px 3px;
	margin-bottom: 6px;
}

textarea.contact-msg:focus {
	-webkit-box-shadow: #1b71e9 0px 0px 4px;
	-moz-box-shadow: #1b71e9 0px 0px 4px;
	border: 1px solid #1b71e9;
}

td.msg {
	padding-top: 7px;
}

tr.submit-button {
	background: #88ff22;
	position: relative;
	top:-200px;
}

/********** COLOPHON **********/

#disclaimer {
	width: 620px;
	padding: 10px 0px 0px 0px;
	clear: both;
	text-align: center;
	color: #CCCCCC;
	text-shadow: none;
	margin-top: 70px;
	}
	
	#disclaimer p {
		margin-bottom: 6px;
		color: #999;
	}
	
	
	#disclaimer h5 {
	color:  #5b5d5f;
	font-style: italic;
	font:  11px Times New Roman;
	margin-top: 3px;
	}

	#disclaimer span {
	/*	background-color: #aa5a09; */
		text-transform: Uppercase;
		font: 12px Times New Roman;
		letter-spacing: 1px;
		font-style: italic;
		color: #666;
		}
	
	#disclaimer span a {
	/*	background-color: #aa5a09; */
		color: #b5e1ff;
		border-bottom: 1px solid #cacaca;
		text-transform: Uppercase;
		font: 10px Times New Roman;
		letter-spacing: 1px;
		}

	#disclaimer span a:hover,
	#disclaimer span a:focus,
	#disclaimer span a:active {
	/*	background-color: #aa5a09; */
		color: #FFF;
		border-bottom: 1px solid #cacaca;
		text-transform: Uppercase;
		font: 10px Times New Roman;
		letter-spacing: 1px;
		}
	
		#disclaimer p a {
			color: #ff6600;

			}
		
		#disclaimer p a:hover,
		#disclaimer p a:focus {
			color: #FFF;
			}
		
		#disclaimer p a:active {
			color: #000;
			}
			

span.canada {
	font-size: 11px !important;
	font-family: Lucida Grande !important;
	text-transform: none !important;
	font-style: normal !important;
	color: #dd1b21 !important;
	letter-spacing: 0px !important;
}

img.canada-flag {
		top: 4px;
		position: relative;
		padding-right: 5px;
}