/* --------------------------------------------- */ 
/*	niklazell.com	                             */
/*	Build start date: 2007-12-21                 */
/*	Developer: Nicolas B Lazell.                 */
/*	Copyright (c) 2007/8 . All rights reserved.  */
/* --------------------------------------------- */


/* --------------------------------------------- */
/* KEY                                           */
/* --------------------------------------------- */
/* 1.	General Setup                            */
/* 2.	SkipLinks                                */
/* 3.	Typography		                         */
/* 4.	Wrapper                                  */
/* 5.	Navigation                               */
/* 6.	Footer		                             */
/* --------------------------------------------- */


/* --------------------------------------------- */
/* 1. General Setup                              */

	
body {
	font: 65%  'Lucida Grande', Arial, Helvetica, sans-serif; padding: 0; margin: 0; color: #333; background: #FFF;
	text-align: center;
	padding: 0;
	margin: 0;
	color: #333;
	background: #252C3C;
	background: #FFF;
	background: #D6ECF1;
	background: #affba8;
}

.offScreen {
	position: absolute;
	margin-left: -5000px;
}

.clear {
	clear: both;
}
img.iLeft { float: left; margin-right: 10px; }
img.iRight { float: right; margin-left: 10px; }
.zeroBorder { border: 0; }
/*-------------------------------*/
/* clearFix (updated)            */

	.clearFix:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}

	.clearFix {display:inline-block;} /* ie7 */

	/* Hide from IE Mac \*/
	.clearFix {display:block;}
	/* End hide from IE Mac */

/* --------------------------------------------- */
/* 2. Skip Links	                             */

	#skipLinks,
	#styleSheetSwitcher {
		padding: 0;
		position: absolute;
	 	right: 0px;
	 	top: -500em; /* This needs a width, height and overflow hidden to stop IE5 MAC from doing horizontal scroll */
	}

	#skipLinks a:active,
	#skipLinks a:focus {
		position: absolute;
		top: 500.25em;
		right: 0.25em;
		z-index: 5;
		white-space: nowrap;
		color: #000;
		background: #FFF;
		border: 2px solid red;
		padding: 3px;
	}
	

/* --------------------------------------------- */
/* 3. Typography	                             */

h1 {
	height: 110px;
	margin: 0;
	left: 10px;
	background: #000;
	position: absolute;
}
h1 a {
	display: block;
	width: 307px;
	height: 40px;
	position: absolute;
	left: 0;
	top: 80px;
	background: url(/a/img/global/id.gif) no-repeat 0 0;
}

a:link, a:visited {
	padding: 2px 5px;
	color: #252c3c;
}

a:hover, a:active {
	color: #1a1a1a;
}

/* --------------------------------------------- */
/* 4. Wrapper                                    */

#wrapper {
	font-size: 1.1em;
	text-align: left;
	margin: 0px auto;
	background: #affba8 url(/a/img/global/bg.gif) repeat-x 0 -100px;
}

	#header {
		background: #1a1a1a;
		height: 125px;
		border-bottom: 1px solid #FFF;
		text-align: center;
	}

	#header .inner {
		width:960px;
		margin: 0 auto;
		position: relative;
	}

		#wrapper #feature {
			background: #fff url(/a/img/global/feature.jpg) 0 75px no-repeat;
			width: 600px;
			height: 251px;
			border-bottom: 1px solid #fff;
		}




		#wrapper #content { margin: 0 auto; width: 960px; min-height: 500px; height: auto !important; height: 500px; position: relative;}
		#wrapper #content #page { width: 540px; background: #FFF; color: #444; float: left; margin-top: -10px; min-height: 900px; height: auto !important; height: 900px;}
			#wrapper #content #page .inner { padding: 30px 20px 20px 20px; }
			#wrapper #content #page .photoView { text-align: center; margin-top: 25px; }
				#wrapper #content #page .photoView img { border: 4px solid #d5d5d5; }
					#wrapper #content #page .photoView img:hover { border: 4px solid #ffbb66; }

			#wrapper #page .inner h2.articleHeadline {
				font-size: 1.7em;
				letter-spacing: -0.1em;
				font-weight: normal;
			}


				#wrapper #page .inner h2 {
					margin: 0;
					padding: 0;
					font-size: 1.2em;
					font-weight: normal;
					text-transform: lowercase;
					color: #252c3c;
				}

				#wrapper #page .inner h2 span {
				color: #fff;
				background: #252c3c;
				padding: 2px 5px;
				}

				#wrapper #page .inner h2 a {
					background: #535353;
					color: #FFF;
					color: #fff;
					background: #252c3c;
					padding: 2px 5px;
					text-decoration: none;
				}
					#wrapper #page .inner h2 a:hover {
						background: #ffbb66;
						color: #1a1a1a;
						
					}

					#wrapper #page #commentForm h2 {
						color: #252C3C;
						letter-spacing: -0.1em;
						font-weight: normal;
						font-family: "lucida grande",helvetica,sans-serif;
					}

				#wrapper #page .inner h3 {
					margin:0;
					font-size: 1.4em;
					color: #1a1a1a;
					letter-spacing: -0.1em;
				}

				#wrapper #page .inner .article h4 {
					margin-bottom: -10px;
					font-weight: bold;
					text-transform: uppercase;
					letter-spacing: -0.1em;
					font-family: "lucida grande",helvetica,sans-serif;
				}

		
				#wrapper #page #content .inner .col {
					width: 210px;
					margin: 0 20px 0 0;
					padding: 0;
					float: left;
				}

			#wrapper #page #content #sub {
				float: right;
				margin: 0;
				padding: 0;
				width: 250px;
			}

				#wrapper #page #content #sub ul#process {
					list-style-type: none;
					margin: 0;
					padding: 0;
				}

					#wrapper #page #content #sub ul#process li {
						display: block;
						float: left;
						padding-top: 50px;
						width: auto !important;
						text-align: center;
					}

						#wrapper #page #content #sub ul#process li#prinstall {
							min-width: 90px;
							width: 90px;
							background: url(/a/img/home/install.gif) 0 0 no-repeat;
						}

						#wrapper #page #content #sub ul#process li#prcustomize {
							min-width: 80px;
							width: 80px;
							background: url(/a/img/home/customize.gif) 0 0 no-repeat;
							text-align: left;
						}

						#wrapper #page #content #sub ul#process li#prbackup {
							min-width: 50px;
							width: 50px;
							background: url(/a/img/home/backup.gif) 50% 0 no-repeat;
						}



/* --------------------------------------------- */
/* 5. Navigation	                             */

#navHook {
	padding: 10px 0;
	background: #d5d5d5;
	border-bottom: 1px solid #FFF;
	margin: 0;
	list-style-type: none;
	padding: 0;
	position: relative;
}
#navHook .inner { margin: 0 auto; width: 960px; position: relative; }
	#navHook .inner h2 { float: left; margin: 0; padding: 0; font-size: 1em; line-height: 3em; font-weight: normal; }
ul#nav {
	margin: 0 0 0 545px;
	padding: 0;
	list-style-type: none;
}

ul#nav li {
	float: left;
	}

	ul#nav li#rss {
		float: right;
		margin-right: 0px;
		}

	ul#nav li#rss a {
		background: url(/a/img/global/feed.png) no-repeat 0 50%;
		}


	ul#nav li a {
		display: block;
		font-weight: bold;
		padding: 10px 15px;
		text-decoration: none;
		}

		ul#nav li a:hover,
		ul#nav li.selected a {
			color: #333;
			background: #f4f4f4;
			}



/* --------------------------------------------- */
/* 6. Footer		                             */

#footer {
	margin: 25px auto 0 auto;
	padding: 0px 20px;
	color: #535353;
	font-size: 0.75em;
	border-top: 1px solid #f1f4f0;
	font-weight: bold;
}


.article {
	border-bottom: 1px solid #E2E2E2; padding-bottom: 30px; margin-bottom: 20px; line-height: 1.5em;}
.article.archive {
	margin: 5px 0 10px 0;
	padding:5px 0;
	border-bottom: 0;
}
.article.archive h2 a {
}
.article img { border: 2px solid #E2E2E2; }			
.article img.center {
	margin: 0;
	float: none
}
.postInfo {
	width: 100px;
	float: left;
	margin-right: 10px;
	letter-spacing: -0.1em;
	margin-bottom: 10px;
}		
.postInfo.nfl {
	width: auto;
}		
.post { float: left; width: 340px;  }

.dateStamp {
	padding: 3px;
	border-bottom: 4px solid #E2E2E2;
	letter-spacing: -0.1em;
	color: #444;
	font-weight: bold;
}
.dateFooter {
/*	background: #DDD; */
	text-align: right;
	border-top: 1px solid #E2E2E2;
	padding-top: 10px;
	color: #999;
	letter-spacing: -0.1em;
	font-size: 0.85em;
}

ul.tags {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.tags li {
}
ul.tags.footer {
	float: right;
}
ul.tags.footer li {
	float: left;
}
ul.tags li a {
	font-size: 0.85em;
	display: block;
	letter-spacing: 0em;
	color: #999;
	padding: 1px 5px;
	font-family: arial;
	margin: 2px 0;
	text-decoration: none;
}
ul.tags.footer li a {
	font-size: 0.85em;
	display: inline-block;
	letter-spacing: 0em;
	color: #999;
	padding: 3px 6px;
	font-family: arial;
	margin: 2px 0;
	text-decoration: none;
}
ul.tags li a:hover {
	color: #333;
	background: #ffbb66;
}



/* Comments */
#comments h4 {
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0;
	float: none;
	font-variant: normal;
}
#comments h4 a {
	text-transform: capitalize;
}
.commentBox {
	background: #eeeedf;
	padding: 5px;
	margin: 5px 0;
}
#wrapper #page .inner h3.noComments {
	margin: 0 auto 50px 0;
	padding: 5px;
	text-align: center;
	background: #eeeedf url(/a/img/global/bullet_error.png) no-repeat 1.5em 50%;
	font-weight: normal;
	font-size: 1em;
	color: #555;
}
.commentStamp {
	width: 80px;
	float: left;
}
.commentStamp a {
	padding: 0;
	text-decoration: none;
}
.commentStamp img {
	border: 0;
	margin: 5px 0;
}

img.avatar {
	float: left;
	padding: 0;
	width: 40px;
	height: 40px;
}
.commentDetail {
	float: left;
	width: 385px;
	padding: 0;
	padding-left: 10px;
	border-left: 1px solid #d5d4c8;
}

.commentDetail p {
	margin: 0 0 5px 0;
}
.myCommentBox,
.commentBox {
	margin: 15px auto;
	padding: 5px;
	background: #eeeedf;
	color: #555;
}
.myCommentBox {
	background: #e0e7c1;
	background: #eeeedf;
	background: #e0e7c1;
}
.myCommentBox h4,
.commentBox h4 {
	text-align: left;
	margin: 0;
	padding: 0;
	border: 0;
}

#commentForm {
	background: #a0a0a0;
	background: #e0e7c1;
	padding: 25px;
}
#commentForm #details {
	width: 200px;
	float: left;
}

#commentForm #details fieldset {
	padding: 0;
	margin: 0;
	border: 0;
}
#commentForm #details fieldset legend {
	display: none;
	border: 0;
}

#commentForm #commentPrefs {
	width: 200px;
	float: right;
}
.commentPreview {
	margin: 10px auto;
	padding: 5px 10px;
	color: #555;
	background: #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

textarea {
	width: 410px;
	border: 0;
	font: 1em 'lucida grande',verdana,arial,helvetica,sans-serif;
}
span.commentdate {
	padding: 3px 0;
}
span.label {
	font-weight: bold;
}
div.date span.preview {
	color: #cc9999;
	text-decoration: underline;
}

q {
font-style: italic;
}


input.textBox {
	padding: 3px 0 3px 25px;
	background: #fff url(/a/img/global/textfield_add.png) 5px 50% no-repeat;
	border: 0;
}

em {
	font-weight: bold;
}

div.preview {
	text-align: center;
	color: #fff;
	font-weight: normal;
	font-size: 0.9em;
	padding: 2px;
	letter-spacing: normal;
	background: #D04848;
	margin: 0;
}
.commentsCount {
	color: #777;
	margin: 5px 0;
	font-weight: bold;
}
.commentsCount a {
	color: #777;
	text-decoration: none;
	padding-left: 20px;
	background: url(/a/img/global/comment.png) no-repeat 0 0;
}
.commentsCount a.multi {
	background: url(/a/img/global/comments.png) no-repeat 0 0;
}

p.about {
	float: left;
}

p.contactEmail {
	float: right;
}

ul#archiveList {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul#archiveList li {
	margin: 0 0 10px 0;
}
#photos { position: absolute; top: -128px; right: 70px; background: url(/a/img/global/photos.png) 0 0 no-repeat; width: 339px; height: 135px; }

#sideBar { float: right; width: 400px; padding-top: 25px;}
	#sideBar h3 { }
	#sideBar h3#recentVideos { width: 180px; height: 27px; background: url(/a/img/global/sideBar/recentVideosTitle.gif) no-repeat 0 0; margin: 30px auto 10px auto; }
	#sideBar h3#photographs { width: 180px; height: 27px; background: url(/a/img/global/sideBar/photographsTitle.gif) no-repeat 0 0; margin: 30px auto 10px auto; }
	#sideBar h3#welcome { width: 180px; height: 27px; background: url(/a/img/global/sideBar/welcomeTitle.gif) no-repeat 0 0; margin: 0 auto 10px auto; }
	#sideBar h3#friends { width: 180px; height: 27px; background: url(/a/img/global/sideBar/friendsTitle.gif) no-repeat 0 0; margin: 0 auto 10px auto; }
	h2#contact { width: 180px; height: 27px; background: url(/a/img/contact/title.gif) no-repeat 0 0; }
	h2#Profile { width: 180px; height: 27px; background: url(/a/img/profile/title.gif) no-repeat 0 0; }
	h2#videosTitle { width: 180px; height: 47px; background: url(/a/img/videos/title.gif) no-repeat 0 0; }
	#sideBar h4 { text-align: center; font-variant: small-caps; font-size: 0.9em; font-weight: normal; color: #3a3a3a; margin: 5px 0 0 0; margin-bottom: 10px; }
	#videoBox { width: 320px; margin: 0 auto; border: 2px solid #FFF;}
	#sideBar #photoBox { width: 336px; margin: 20px auto; }
	.album { width: 500px; margin: 20px auto 0 auto; }
		#sideBar #photoBox img,
		.album img { border: 2px solid #d5d5d5; margin: 0 5px 5px 0; padding: 0;}
			#sideBar #photoBox img:hover,
			.album img:hover { border: 2px solid #ffbb66; }
		#sideBar #photoBox a,
		.album a { margin: 0; padding: 0;}
	
.videoItem { border-bottom: 1px solid #E2E2E2; margin-bottom: 20px; padding-bottom: 20px;}
.videoItem img { float: left; }
.videoItem .content { margin-left: 170px;}
	.videoItem .content h2 a { font-size: 0.9em; }
	
.flickr img { border: 4px solid #D5D5D5; margin: 0 0 3px 0;}


ul#albumList { list-style-type: none; margin: 0; padding: 0; }
	ul#albumList li { display: block; padding: 10px; background: #f5f5ef; margin-bottom: 5px;}
		ul#albumList li:hover { background: #FFF; }
	ul#albumList li img { float: left; }
	ul#albumList li img:hover { border: 4px solid #ffbb66; }
	ul#albumList li a { background: transparent; }
	ul#albumList li .albumInfo { margin-left: 90px; }
	ul#albumList li h3 a { background: #1a1a1a; color: #fff; font-size: 1em; margin-bottom: -10px; font-weight: normal; }
		ul#albumList li h3 a:hover { color: #ffbb66; }
		ul#albumList li p { color: #999; }
	ul#albumList li a { text-decoration: none; }
		

ul#links { list-style-type: none; margin: 0; padding: 0; }
	ul#links li { float: left; margin: 0 2px 2px 0; }
		ul#links li a { display: block; width: 186px; background: #a6fa9e; text-decoration: none; }
			ul#links li a:hover { background: #FFBB66; }
			
.loc { background: url(/a/img/global/28.png) no-repeat 0 0.2em; color: #777; font-size: 0.9em; padding: 0; margin: 0; text-align: right; float: left; position: absolute; top: 6px; left: 20px; padding-left: 15px;}
	.loc strong { font-style: bold; font-size: 1em; color: #3a3a3a; }
	
	/* --------------------------------------------- */
	/* 3. Forms		                                 */

	#eoiForm { text-align: left; margin: 20px 0 0 0;	padding: 0; }
		#eoiForm fieldset { border: 0; }
		#eoiForm legend { display: none; }
		#eoiForm div.submit { margin-top: 10px;	text-align: left; }
		#eoiForm div.row { margin-bottom: 10px; }
		#eoiForm div.row span.label { display: block; width: 80px; float: left }
		#eoiForm div.row span.field { margin: 0 0 0 80px; display: block; }
		#eoiForm input,
		#eoiForm textarea { border: 1px solid #d4d4d4; width: 250px; }
		#eoiForm textarea { height: 200px; width: 350px; }
		#eoiForm input#add { border: 1px solid #000; background: #1a1a1a; color: #FFF; padding: 3px; font-size: 1em; width: 10em; }
			#eoiForm input:focus,
			#eoiForm textarea:focus { background: #f4f4ed; border: 1px solid #aaa; }
		#eoiForm label { cursor: pointer; }

	.error,
	.thanks { font-weight: bold; padding: 3px 10px; width: 350px; }
	.error { background: #ffdbdb; border: 1px solid #ff8e8e; }
	.thanks { background: #ddecd5; border: 1px solid #89bb70; }