@charset "utf-8";
/* CSS Document - Main Style Sheet
Kreck Design www.kreck.com

/* TABLE OF CONTENTS
00 =Reset
01 =Global/Typography
02 =Headings
03 =Text Elements
04 =Lists
05 =Tables
06 =Misc. Classes
07 =Forms
08 =Layout
09 =Header
10 =Content
11 =Footer
12 =Miscellaneous
13 =Scroll
14 =Pages
*/

/*00 =Reset ---------------------------------------------------*/

html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td  {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body 			{ line-height: 1; }
	ol, ul 			{ list-style: none; }
	blockquote, q 	{ quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after
					{ content: ""; content: none; }
	:focus 			{ outline: 0; }
	table 			{ border-collapse: collapse; border-spacing: 0;}
	caption, th, td { text-align: left; font-weight: normal; }
	strong 			{ font-weight: bold; }
	em 				{ font-style: italic; }
	
/*01 =Global/Typography ---------------------------------------------------*/
	
	html { height:102%;  }
	
	/* Default font settings. 
	   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
	body {
	font: 75% Geneva, Verdana, sans-serif;
	color: #000;
	background: #000;
	}
/*02 =Headings ------------------------------------------------------------*/

	h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }
	h1 {
	font-size: 3em;
	margin-bottom: 0.50em;
	text-transform: lowercase;
}
	h2 {
	font: 1.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin-bottom: 0.75em;
}
	h3 { font-size: 1.25em; margin-bottom: 1.00em; line-height: 1; }
	h4 { font-size: 1.1em; margin-bottom: 1.25em; line-height: 1.25; }
	h5 { font-size: 1.0em; margin-bottom: 1.50em; font-weight: bold; }
	h6 { font-size: 1.0em; font-weight: bold; }
	h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

/*03 =Text elements -------------------------------------------------------*/

	p           { margin: 0.7em 0 1.5em; line-height:1.3; }
	
	a:link		{ color: #000; text-decoration: underline }
	a:visited 	{ color: #000; }
	a:hover 	{ color: #404040; }
	a:active 	{ color: #009; }
	
	blockquote  { margin: 1.5em; color: #666; font-style: italic; }
	strong      { font-weight: bold; }
	em,dfn      { font-style: italic; }
	dfn         { font-weight: bold; }
	sup, sub    { line-height: 0; }
	
	abbr, 
	acronym     { border-bottom: 1px dotted #666; }
	address     { margin: 0 0 1.5em; font-style: italic; }
	del         { color:#666; }
	
	pre			{ margin: 1.5em 0; white-space: pre; }
	pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
	
	hr 			{ color:#ddd; background-color:#ddd; clear:both; float:none; width:100%; height:1px; margin:1.45em 0; border:none; }

/*04 =Lists ---------------------------------------------------------------*/

	li ul,
	li ol       { margin: 0; }
	ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

	
	ul          { list-style-type: disc; }
	ol          { list-style-type: decimal; }
	
	dl          { margin: 0 0 1.5em 0; }
	dl dt       { font-weight: bold; }
	dd          { margin-left: 1.5em;}

/*05 =Tables --------------------------------------------------------------*/

	table       	{ margin-bottom: 1.4em; width:100%; }
	th          	{ font-weight: bold; }
	thead th 		{ background: #c3d9ff; }
	th,td,caption	{ padding: 4px 10px 4px 5px; }
	tfoot       	{ font-style: italic; }
	caption     	{ background: #eee; }

/*06 =Misc classes --------------------------------------------------------*/

	.hide       	{ display: none; }
	.access 		{ position:absolute; text-indent:-900em; }
	.float-left 	{ float:left; display:inline; }
	.float-right 	{ float:right; display:inline; }
	img.float-left	{ float:left; display:inline; padding:5px 10px 10px 0; }
	img.float-right	{ float:right; display:inline; padding:5px 0 10px 10px; }
	img.center 		{ display: block; margin:0 auto; }
	.align-left 	{ text-align: left; }
	.align-right 	{ text-align: right; }
	.align-center 	{ text-align:center; }
	.justify 		{ text-align:justify; }
	
	.small      	{ font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
	.large     		{ font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
	
	.first			{ margin-left:0; padding-left:0; }
	.last			{ margin-right:0; padding-right:0; }
	.top			{ margin-top:0; padding-top:0; }
	.bottom			{ margin-bottom:0; padding-bottom:0; }
	.box 			{ padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }

	
	/* float clearing */
	.clear 			{ 
		clear:both; 
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
	}
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
		}
	/* float clearing for IE6 */
	* html .clearfix{
		height: 1%;
		overflow: visible;
	}
	/* float clearing for IE7 */
	*+html .clearfix{
		min-height: 1%;
	}
	
/*07 =Forms ---------------------------------------------------------------*/
	
	div#errordiv {
		border:3px double #900;
		background-color:#FFFFF2;
		color:#900;
		padding:5px 10px;
		font-weight:bold;
		margin-top:10px;
		margin-bottom:18px;
	}
	.kds-formfield-not-valid-highlight {
		background-color:#900;
		color:white;
	}

/*08 =Layout --------------------------------------------------------------*/
	body {background: #000;}
	
	#header-container { 
		position:relative; 
		width:960px; 
		height:105px;
		margin:0px auto; 
		padding-top:18px; 
		background-color:#000;
	}
	#wrapper {
		position:relative; 
		width:960px;
		margin:0 auto;
		height:auto !important; 
	}
	#content-container 	{
		position: relative;
		margin-top:0px;
		padding-top:50px;
		width:960px;
	}
	#page-footer-container { 
		position:relative; 
		width:960px; 
		margin:0px auto;
	}
	#nav-container 	{
		position:absolute;
		display:block;
		width:960px;
		top:-25px;
		
	}
	
/*09 =Header --------------------------------------------------------------*/
	
	#header-container h1 {
		position:relative; 
		height:90px;
		background:url(/images/kreck-design.png) no-repeat left top;
		margin-bottom:0;
		text-indent:-900em;
		left:20px;
	}
	
	#header-container h1 a {
		display:block;
		width:130px;
		height:90px; 
	}
	
/*10 =Content -------------------------------------------------------------*/

/*11 =Footer --------------------------------------------------------------*/
	/* Page Footer Quote Styles ----------*/
	.footnote 			{ position:absolute; line-height:1.2em;}	
	#footer-quote 		{ font-size:17px; margin-bottom:.2em;}
	#footer-attribute 	{ font-size:14px; line-height:1em; text-align:right;}
	
	/* Individual Page Quote Positioning ----------*/
	#about-process .footnote {left:40px; top:10px; width:800px;}
	#about-process .footnote #footer-quote{float:left;}
	#about-process .footnote #footer-attribute {float:right;}
	
	#about-partners .footnote {left:240px; bottom:345px;}
	
	#about-community .footnote {left:160px; top:30px; width:600px; }
	#about-community .footnote #footer-quote{float:left;}
	#about-community .footnote #footer-attribute {float:right;}
	
	#about-careers .footnote {right:325px; top:30px; text-align:right;}
	#about-careers .footnote #footer-quote { float:left; }
	#about-careers .footnote #footer-attribute {padding:3px 15px; float:right;}
	
	#about-history .footnote { width:270px; right:60px; top:-70px; text-align:right;}
	#about-methods .footnote { left:90px; top:0px; text-align:right;}
	#about-index .footnote { left:90px; top:40px; text-align:right; width:250px;}
	#about-index .footnote  {color:#97AB0B;}
	#portfolio-web .footnote { left:120px; top:40px; } 
	#portfolio-ecommerce  .footnote {right:325px; top:30px; text-align:right;}
	#services-index .footnote {width:490px; right:25px; top:-150px; text-align:right; color:#69AAB3;}


	/* Site Footer Styles ----------*/
	/* Site Trigger Styles */

	#site-footer-trigger {
		width: 980px;
		margin: 10px auto;
		text-align: center;
		font-size: 12px;
		color: white;
	}
	#site-footer-trigger ul{}
	#site-footer-trigger ul li {
		display:inline;
		padding:0 8px;
	}
	#site-footer-trigger ul li img{
		position:absolute;
	}

	/* Site Content Styles ---------- */
	
	/* Containing Div */
	#site-footer-container {
		width:100%;
	}
	#site-footer-container #site-footer-content {
		position:relative;
		width: 980px;
		height:400px;
		margin: 0 auto;
		display: none;
		color:#fff;
	}
	#site-footer-container #site-footer-content a {
		color:#fff;
	}

	/* Additional Information / Footer Info Div ----------*/
	#site-footer-container #site-footer-content #footer-info {position:absolute; right:0; top:0; width:350px;}
	#site-footer-container #site-footer-content #footer-info a {color:#fff;}



/*12 =Miscellaneous --------------------------------------------------------------*/
	a.button {
		color:#EFE047;
		text-decoration:none;
		display:block;
		width:300px;
		height:20px;
		padding:10px;
		border:1px solid #EFE047;
		text-align:center;
		background: url(/images/button-bg.jpg) repeat-x center top;
	}

	a.button:hover {
		background: url(/images/button-bg.jpg) repeat-x center bottom;
	}
/*13 =Scroll -----------------------------------------------------------------------*/
/*  This scroll is used for the portfolio section, which does not auto scroll */
	#scroll {
		position:relative;
		overflow:hidden;
	}
	/* Entire Scrolling Container */
	#tools {
		width:9999em;
		position:absolute;
	}
	/* Individual Scroll Item Container */
	.tool {
		float:left;
		padding-right:30px;
	}
	#details {
		background-color:transparent;
	}
	/* Individual Scroll Item Styles */
	.details_img {
	}
	/* Individual Scroll Image */
	.details_img img{	
	}
	/* Individual Scroll Text */
	.details_txt {	
		position:absolute;
	}
	/* Scrolling Navigation */
	#thumbs 	{ position:absolute; }
	#thumbs p 	{ font-size:15px; float:left; margin-right:10px; color:#DAE8FF; }
	.t 			{ padding:0 !important; border:0 !important; }
	.t a {
		display:block;
		float:left;
		cursor:pointer;
	}
	.t a.active { cursor:default !important; }
	.t a:hover	{ }
	.navi { }


/*  This scroll is used for the about and services sections, which autoscrolls */

	#slides {  }
	.slide-wrapper { }
	.slide-thumbnail {
		float:right;
		border:1px solid #ABA38C;
	}
	#slide-controlpanel-left {
		margin:9px 0;
		padding-bottom:10px;
	}
	.slide-details { }
	/* slideshow controls */
	#slide-controlpanel {
		position:absolute;
		z-index:10;
		right:0px;
	}
	#slide-pauser {
		width:70px;		/* for the pause/resume button we need a width, since the inner text changes according to state */
		float:left;
	}
	#slide-controls {
		float:left;
	}
	#slide-controls a, #slide-pauser, a.slide-control {
		border:0;
		color:#fff;
		background-color:#88746a;
		padding:3px;
		margin:3px;
		text-decoration:none;
		text-transform:uppercase;
		float:left;
		text-align:center;
	}
	#slide-controls a:hover, #slide-pauser:hover {
		color:#fff;
		background-color:#47443A;
	}
	#slide-controls a.activeSlide {
		color:#fff;
		background-color:#47443A;	/* for the active pager button*/
	}

/*14 =Pages -----------------------------------------------------------------------*/
/* News Page Styles */
	#articles, #archives {margin-top:50px;}
	/* Blog Page Styles */
	.post-container { margin:25px 0; padding-bottom:25px;}
	.post-title {
	font-weight:bold;
	line-height: 1.6em;
}
	.post-info { margin:15px; }
	.post-info dt { float:left; width:100px;}
	.post-content, .post-footer { margin-left:15px;}

/* Site Map Page Styles */

	/* Styles for Main Nav Listing */

	
	/* Styles for Portfolio Listing */
	#root-sitemap #content-container #portfolio-all-title {margin:180px 0 0 0; }
	#root-sitemap #content-container ul li a { color:#000;}
	#root-sitemap #content-container ul#portfolio-list {
		width:550px;
		margin:0;
/*		float:left;
*/	}
	#root-sitemap #content-container ul#portfolio-list li {
		height:20px;
/*		float: right;
*/		margin:0 10px 0 0 ;
	}
	#root-sitemap #content-container ul#portfolio-list li img {
		display:none;
	}

	
	
/* Home Page ----------*/
	#home-text { padding-top:640px;}
	.boxy-box { border:1px solid #7AA9BD; background-color:#232A30; padding:25px; color:#CCC; text-align:center; }
	.boxy-box h2, .boxy-box a { color:#FFF; }
	
/* About Index Page ------------------------------------------------------ */
	/* Staff photos */
	.about-photo {
		border: 1px solid #FFFFF0;
		position: absolute;
		height: 80px;
		width: 80px;
		left: 323px;
		top: 60px;
		z-index:10;
	}
	#ricardo-fernandes 	{ left: 134px; top: 266px; }
	#brian-kreck 		{ left: 68px; top: 88px; }
	#dante-kreck 		{ left: -1px;top: 195px; }
	#kurt-kunde 		{ left: 346px; top: 192px; }
	#lydia-revelos 		{ left: 200px; top: 154px; }
	#sage-versteegh		{ left: 297px ;top: 77px; }
	#sandra-versteegh 	{ left: 507px; top: 262px; }
	#michael-yeary 		{ left: 463px; top: 106px; }
	#lucy-yeary 		{ left: 300px; top: 310px; }
	
	/* Tool Tips */
	.tooltip-container {position:relative; height:500px;}	
		.about-photo {z-index:1;}
		.tooltip {
			color: #000000;
			outline: none;
			cursor:pointer;
			text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
	}
		.tooltip:hover span {
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		* html a:hover { background: transparent; }
		.classic { padding: 0.8em 1em; background: #FEF4F5; border: 1px solid #FFAD33; z-index:25;}





	#pragmatic-brilliance ul li {color:#FFF6EC; padding:7px 0;}	
	
	
	/* About:Our Methods and Our Process Slideshows ----------*/
	
	.section-about #slides {
		margin-top:20px;
	}
	.section-about .slide-wrapper {
		width:880px;
		height:375px;
		margin:2px auto;
		background:transparent url(/images/theme-hills-02-rep.jpg) repeat-x center;
	}
	.section-about .slide-details {
		float:left;
		width:390px;
		padding:25px;
	}
	/* slideshow controls */
	.section-about #slide-controlpanel {
		top:0px;
	}
	
/* Services: Custom applications and Logo/Identity Slideshows */

	.section-services #slides { margin:0 0 55px 0; padding:0; border:0;}
	.section-services .slide-wrapper {
		width:430px;
		height:300px;
		margin:0px auto; padding:0;
	}
	.section-services .slide-details {
		position:absolute; 
		z-index:10; 
		bottom:-1px; 
		background: url(/images/screen-75-black.png) repeat;
		width:420px;
		display:block;
		height:35px;
		left:-1px;
		padding:5px;
	}
	.section-services .slide-details h3 {
		color:#fff;
		margin-bottom:.1em; padding:0;
	}
	.section-services .slide-details p {
		color:#fff;
		font-size:.9em;
	}
	/* slideshow controls */
	.section-services #slide-controlpanel {
		top:320px;
	}
	#services-logo .slide-details {display:none;}
#services-cms #slide-controlpanel {

			left:0px;
		}

/* Portfolio Index Page Styles -------------------------------------------- */

	/* Thumbnails */
	ul#portfolio-list				{ margin: 36px 0 0 0; padding: 0; list-style: none; }
	ul#portfolio-list li			{ display: block; height:215px; float: left; margin:0 15px; }
	ul#portfolio-list li a			{ color:#fff; text-decoration:none; font-size:10px;  }
	ul#portfolio-list li a:hover	{ color:#ccc;   }
	ul#portfolio-list li a	img		{ margin-bottom:5px;   }


/* Portfolio Project Detail Page Styles ----------------------------------- */
	/* Project Text Styles */
	#project-text		{ padding-top:170px; }
	#project-title		{   }
	#project-description{   }
	#project-details ul li	{ margin-bottom:4px;   }
	
	/* Project Scrolling Images Styles */
	/* Visible Container */
	#portfolio-item #scroll {
		width:530px;
		padding-top:25px;
		height:900px; 
		margin-top:50px;
	}
	
	#portfolio-item #tools 			{ height:600px; }	/* Entire Scrolling Container */
	#portfolio-item .tool 			{ width:500px; height:600px; }	/* Individual Scroll Item Container */
	#portfolio-item #details 		{ }
	#portfolio-item .details_img 	{ width:500px; padding-top:60px; height:375px; }	/* Individual Scroll Item Styles */
	#portfolio-item .details_img img	{ border:1px solid #999; }	/* Individual Scroll Image */
	#portfolio-item .details_txt 	{	/* Individual Scroll Text */
		width:500px;
		height:125px;
		position:absolute;
		top:40px;
		color:#ffffff;
		text-align:left;
		text-transform:uppercase;
	}
	/* Scrolling Navigation */
	#portfolio-item #thumbs 	{ position:absolute; width:500px; height:50px; top:15px; left:0px; }
	#portfolio-item #thumbs p	{ font-size:15px; float:left; margin-top:0; margin-right:10px; color:#DAE8FF; }
	#portfolio-item .t 		{ }
	#portfolio-item .t a {
		margin-right:10px;
		width:25px;
		height:20px;
		border:1px solid #000;
		color:#fff;
		text-align:center;
		background-color: #5B5B5B;
		padding-top: 5px;
	}
	#portfolio-item .t a.active {  background-color:#22679E; }
	#portfolio-item .t a:hover	{ background-color:#737373; }
	#portfolio-item .navi { }
	




/* codeboi hacks to the portfolio when viewed in ajax lightbox/fancybox/prettyphoto thingee */


#pp_custom {
	height:550px;
	overflow:auto;
	background-color:black;
	padding-bottom:10px;
}
#pp_custom .container_12 {
	width:850px;
}
#pp_custom .container_12 .grid_5 {
	width:305px;
}
#pp_custom .container_12 .grid_7 {
	width:505px;
}
#pp_custom h1 {
	display:none;
}
#pp_custom #scroll {
	height:auto;
	padding-top:0px;
	margin-top:0;
	width:505px;
}
#pp_custom #tools {
	height:auto;
	position:relative;
}
#pp_custom .tool {
	height:auto;
	width:502px;
}
#pp_custom #details {
	width:502px;
}
#pp_custom .details_img {
	height:auto;
	width:502px;
}
#pp_custom .details_txt {
	padding-top:2px;
}
#pp_custom #thumbs {
	top:10px;
}
#pp_custom #thumbs p {
	padding-top:5px;
}
#pp_custom p,
#pp_custom li,
#pp_custom #thumbs p,
#pp_custom #project-text h2,
#pp_custom #project-text h3,
#pp_custom #project-text li,
#pp_custom #project-text a {
	color:white;
}




/* MAILING LIST SIGNUP - SIDEBAR FORM (NEWS SECTION) */

#mailing-list-sidebar {
 margin-top:48px;
}
#mailing-list-sidebar label span {
 padding-left:3px;
 font-size:80%;
}
#mailing-list-sidebar input {
 margin:3px 0 6px;
}
#mailing-list-sidebar #btnSubmit {
 margin-top:9px;
}