/* @group CSS Reset*/
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,label,input,textarea,p,blockquote,q {margin:0; padding:0; font-size:1em; font-weight:normal;}
	fieldset,img {border:0;}
	ol,ul {list-style:none;}
	caption,th {text-align:left;}
	a {outline:none;}
/* @end */


/* @group General */
	body, html {font-family:helvetica, arial, sans-serif; text-align:left; height:100%; min-width:945px; background:#c7cfd6 url(/images/body-background.jpg) repeat top left;}
	
	.container, #sliderContainer, #slider {margin:0 auto;}
	.container {width:865px;}
	
	.bodygradient {background:url(/images/body-gradient.jpg) repeat-y center; }
	.bodygradient.pageTop{min-height: 100%;}
	.bodygradient.pageBottom{min-height: 100%; overflow: hidden;}
	* html .bodygradient.pageTop {height: 100%;}

	#lightgradient {background:url(/images/light-gradient.jpg) repeat-y center;}
	
	.leftside, .floatleft {float:left; display:inline; /*"This tag prevents IE6 from adding it's own margins to a floating element, strangely."*/}
	.floatright {float:right; display:inline;}		
	.clear {clear:both;}
	
	h1, legend {overflow:hidden; color:#3b4a5a;}
	h2, h3, p, ul, label {color:#66778a;}
	a {text-decoration:none; color:#4d94db;}	
	a:hover {color:#9ba8b7;}
	strong {font-weight:bold;}
	em {font-style:normal;}
	input, textarea {font-family: helvetica, arial, sans-serif; color: #343e4a;}
	
	.shadows {background-image:url(/images/shadows.png); background-repeat:no-repeat;}	
	.shadows.top {height:43px; background-position:center 0;}	
	.shadows.bottom {height:51px; background-position:center -43px;}
	.shadows.divider {height:43px; margin-bottom: 55px; background-position:center -94px; clear:both;}
	.shadows.simpledivider {height: 2px; width: 550px; text-align: left; background-position: center -171px; clear: both;}
	
	.list{float:left; display:inline; overflow:hidden;}
	.list.bullet {height:8px; width:8px; margin:4px 10px 0 0; background:url(/images/bullet.png) no-repeat 0 -15px;}
	.list.checkmark{height:15px; width:16px; margin:2px 9px 0 0; background:url(/images/bullet.png) no-repeat 0 0;} /*" class is necessary here to get sprite method working in IE "*/ 
		
	* html #logoimage, h1 img, h2 img, #button img, .list, .shadows, .fadeout, .scrollButtons, .submitbutton, #services-note, #message-success, ul.navigation a, ul.navContainer a, .photo span { behavior: url(/css/iepngfix.htc) }
/* @end */


/* @group Header */
	#header, #logo {height:115px;}
	#header {background:#051f3c url(/images/header-background.png) repeat-x;}
	#logo {position:relative; left:-215px; background:url(/images/logo-background.png) no-repeat bottom left;}
	#logoimage {position:relative; top:56px; left:210px;}
/* @end */


/* @group Portoflio Intro */
	#intro #intro_container {height:84px; min-height:84px;}
	#intro .leftside {width:556px;}
	#intro .rightside {margin-left:584px;}
	
	#intro h1 {font-size:2em; height:38px; padding:36px 0 8px 0; text-align: left;} /*" height necessary for Safari to Firefox to render proper height using jquery image replacement technique "*/
	#intro h2, #intro ul {color:#738190;}
	#intro h2 {font-size:1.406em; padding-top: 3px;}
	#intro ul {font-size:1.063em; padding-left:34px; margin-top: 3px; padding-top: 4px; background:url(/images/divider-vertical.jpg) repeat-y top left;}
	#intro ul li {padding-bottom:7px;}	
	
	#intro #button {position:relative; top:7px; left:7px;}
	#intro .shadows.top {margin-top:-10px;}
/* @end */


/* @group Portfolio Showcase*/
	#main {background:#f2f5f7 url(/images/light-background.jpg) repeat;}

	.photo {float: left; display: inline; position: relative; width: 510px; height: 319px; margin-left: -2px;}
	.photo img{margin: 16px 0 0 17px;}
	.photo span {width: 510px; height: 319px; display: block; position: absolute; top: 0px; left: 0px; background: url(/images/frame.png) no-repeat;}

	#next1, #next2, #next3, #next4 {width: 510px; height: 319px; position: absolute;  z-index: 10; cursor: pointer;}
	#next1:hover, #next2:hover, #next3:hover, #next4:hover {background: url(/images/screenshot-cycle-button.png) 17px 276px no-repeat; overflow:hidden; cursor: pointer;}
	#slideshow1, #slideshow2, #slideshow3, #slideshow4 {position: relative;}
	#slideshow1 img, #slideshow2 img, #slideshow3 img, #slideshow4 img {position: absolute; top: 0px;}
	
	#main .leftside {float:left; display:inline; width:510px; height: 319px; margin-left: -2px;}
	#main .rightside {margin-left:567px;}
	#main #padding {height:60px;}
	
	#main h2 {height:66px; position:relative; top:-6px; padding-bottom:25px; text-align: left;}
	#main h3 {color: #48586b; font-size:1.063em; font-weight:bold; padding:25px 0 1px 0;}
	#main p {padding:18px 0; line-height: 1.3em;}
	#main p, a, a:link, #main a:visited, #main a:hover, #main ul li {font-size:0.938em;}
	
	#main a:hover span {display: none; cursor: pointer; padding-right: 5em;}
	#main a span.onhover {display: none;}
	#main a:hover span.onhover {display: inline; cursor: pointer;}
	
	#main ul li {display:block; padding-bottom:0.3em;}
/* @end */


/* @group Slider */
	#sliderContainer .bottom {position:relative; top:97px;} /*"shadow below slider nav"*/
	#sliderContainer .top {margin:-9px 0 40px 0;} /*"shadow at the bottom of slider content"*/
	
	#slider {width:945px; position:relative;}
	.scroll {height:29em; width:945px; overflow:auto; overflow-x:hidden; position:relative; clear:left;}
	.scrollContainer div.panel {padding:35px 93px 0 93px; height:auto; width:759px;}
		
	ul.navigation {position:relative; top:-13px; height:60px; margin-left:117px; overflow:hidden;}
	ul.navigation li {position:relative; height:60px; float:left;}
	ul.navigation a {position:relative; top:0; display:block; height:180px; cursor:pointer; background-image:url(/images/slider-nav.png);}
	ul.navigation a:focus {outline:none;} 
	ul.navigation a:hover {overflow:hidden; top:-60px;}
	ul.navigation a.selected, ul.navigation a.selected:hover{top:-120px;}
	#planTab {width:167px; background-position:0 0;}
	#designTab {width:184px; left:-1px; background-position:-166px 0;}
	#codeTab {width:173px; left:-2px; background-position:-349px 0;}
	#toolboxTab {width:190px; left:-3px; background-position:-521px 0;}

	.scrollButtons{position:absolute; top:-5px; height:44px; width:44px; z-index:5; cursor:pointer; background-image:url(/images/scroll-buttons.png);}
	.scrollButtons.left {left:37px; background-position:0 0;}
	.scrollButtons.left:hover {overflow:hidden; background-position:0 -44px;}
	.scrollButtons.left:active {background-position:0 -88px;}
	.scrollButtons.right {right:37px; background-position:-44px 0;}
	.scrollButtons.right:hover {overflow:hidden;background-position:-44px -44px;}
	.scrollButtons.right:active {background-position:-44px -88px;}

	.fadeout {position:absolute; top:104px; width:40px; height:26em; z-index:10; background:url(/images/slider-sides.png);}
	.fadeout.fleft{left:0px; background-position:0 0;}
	.fadeout.fright{right:-1px; background-position:-40px 0;} 

	.hide {display:none;}

	/* @group Slider Content */	
		.panelContainer{margin: 0 auto; width: 760px;}
		.panel h1{padding: 0 0 8px 0; font-size: 1.688em; text-align: center;}
		.panel h2{font-size: 1em; color:#48586b; line-height: 1.188em; font-weight: bold; padding-bottom: 5px; text-align: left;}
		.panel h3{text-align: center; line-height: 1.375em; text-align: center; padding-bottom: 40px;}
		.panel p{font-size:0.875em; line-height: 1.375em; text-align: left;}
		.panel p a{font-size: 1em;}

		#plan .element{padding: 0 75px 35px 75px;}
		#plan h1{font-size: 1.625em;}
		#plan h2 {font-size: 1.125em; font-weight: bold; display: inline; padding-right: 0.5em;}
		#plan h3 {padding: 0 30px 40px 30px;}
		#plan p {display: inline;}
		
		#design .leftside{width:430px;}
		#design .rightside{margin-left: 480px; height: 273px; min-height: 273px; background: url(/images/design-philosophy-background.jpg) no-repeat center left;}
		#design .leftside .element{padding: 0 0 50px 0;}
		#design .rightside .element {padding: 0 0 0 50px;}
		
		#code h1, #toolbox h1{padding: 0 0 50px 0; text-align: center; clear: both; font-size: 1.688em;}
		#code .leftside {width: 345px;}
		#code .rightside {margin-left: 415px;}
		#code .element {padding: 0 0 46px 0;}
		
		#toolbox h1{padding-bottom: 46px;}
		#toolbox .leftside {width: 370px;}
		#toolbox .rightside {margin-left: 440px;}
		#toolbox .element {padding: 0 0 40px 0;}
		
		.panel li {padding: 0 75px 35px 75px; clear: both;}
		.list.setcourse{background: url(/images/map-compass.jpg) no-repeat; padding: 0 20px 0 0; margin-left: -4px; width: 76px; height: 73px;}
		.list.research{background: url(/images/paper-folder.jpg) no-repeat 5px 0; padding: 2px 36px 0 0; width: 60px; height: 62px;}
		.list.designandcode{background: url(../images/textmate-icon.jpg) no-repeat 1px 1px; padding: 0 25px 20px 0; width: 71px; height: 76px;}
		
		img.sketchicon {padding: 0 0 0 20px;}
		img.psicon {padding: 5px 25px 20px 0;}
		img.simplebutton {padding: 30px 0 24px 10px;}
		img.speednowsign {padding: 2px 28px 100px 0;}
		img.google-logo {padding:0 0 0px 35px;}
		img.htmlcssicon {padding:0 0 10px 35px;}
		img.ajaxicon {padding:0 0 10px 35px;}
		img.applexserve {padding: 5px 25px 0 0;}
		img.cmsicon {padding: 2px 0 20px 20px;}
		img.silverbackicon {padding: 10px 0 0 20px;}
	/* @end */
	
/* @end */


/* @group Contact Page */
	#contact-page.container {width: 915px;}
	
	#contact-page h1, p {text-align: left;}
	#contact-page p {font-size: 1.063em;}

	#contact-details, #contact-quick-form {margin-left: 25px; width: 31.25em;}
	#contact-details {width: 500px; margin-bottom: 25px;}
	
	#contact-details h1 {font-size: 2.25em; padding: 28px 0 12px 0;}
	#contact-details .leftside {width: 250px; margin-top: 17px;}
	#contact-details .rightside {margin-left: 260px; margin-top: 19px;}
	#contact-details a{font-size: 1em; font-weight: bold;}
	#contact-details #phone {font-size: 0.938em; padding: 0;}
	#contact-details #address {font-size: 0.938em; padding: 0;}
	
	#services-note{width: 315px; height: 307px; position: absolute; top:170px; margin-left: 595px; background: url(/images/paper-note.png) no-repeat;}
	#services-note h2{padding: 55px 0 15px 57px;}
	#services-note h3{padding: 0 0 0 58px;}
	
	#contact-quick-form-container {height: 26.5em;}
	
	#contact-quick-form h2 {font-size: 1.75em; padding: 24px 0 19px 0;}
	#contact-quick-form ol li {display: block; clear: both;}
	#contact-quick-form fieldset label.inlinelabel{display: block; float: left; padding: 8px 0 0 0;}
	#contact-quick-form fieldset label.blocklabel{display: block; float: left; padding: 3px 0 8px 0;}
	#contact-quick-form input.text-field{width:391px; height:21px; padding: 8px 5px 5px 8px; float: right; background: url(/images/text-field.png) no-repeat; border: 0; margin-bottom: 1px; font-size: 0.938em; outline: none;}
	
	#contact-quick-form textarea#message{width: 483px; height: 202px; padding: 10px 10px 8px 7px; border: 0; background: url(/images/textarea.png) no-repeat; font-size: 0.875em; resize: none; overflow: auto; outline: none;}
	#contact-quick-form #message-success{width:500px; height:26.5em; background: url(/images/success-message.png) no-repeat center 100px;}
	
	#contact-quick-form input.submitbutton{float: right; display: inline; height: 30px; width: 100px; border: 0; background:  url(/images/send-button.png); background-position: 0 0; margin-top: 5px; outline: none;}
	#contact-quick-form input.submitbutton:hover{background-position: 0 -30px;}
	#contact-quick-form input.submitbutton:active{background-position: 0 -60px;}
	
	#name-error-container, #email-error-container {height: 0.8em; padding: 1px 0 8px 0; color: #ff3333; font-size: 0.813em; display: block; clear: both; }
	#message-error-container {float: left; display: inline; color: #ff3333; font-size: 0.813em; padding: 1px 0 0 8px;}
	
	.error {background: url(../images/red-arrow.gif) no-repeat top left; padding-left: 15px;}
	.error.inlineerror { margin-left: 8em; display: inline;}

	p#contact-footer {text-align: center; color:#7f8fa1; font-size:0.875em; padding: 5px 0 10px 0;}
	p#contact-footer a {color:#7f8fa1; font-size: 1em;}
	p#contact-footer a:hover {text-decoration: underline;}
/* @end */

/* @group Footer */
	#contact h2 {height:35px; padding:0px 0 22px 0; font-size:2.05em;}
	#contact h2, #contact h3, #contact p {text-align:center;}
	#contact h3 {color:#84909f; font-size:1.75em; font-weight:bold; padding-bottom:5px;}
	#contact h3#phonenumber {font-size:1.5em;}
	#contact p {color:#7f8fa1; font-size:0.875em; padding:34px 0 10px 0;}
	#contact p a {color:#7f8fa1; font-size: 1em;}
	#contact p a:hover {text-decoration: underline;}
/* @end */


/* @group Footer Process */
	#contact-process h2 {float:left; display:inline; padding:0 10px 0 135px; font-size:1.313em; text-align:right;}
	#contact-process h3 {float:left; display:inline; color:#84909f; font-size:1.313em; font-weight:bold; padding: 0 0 5px 0; text-align: left;}
	#contact-process #phonenumber{font-size: 0.952em;}
	#contact-process p {clear:both; color:#7f8fa1; font-size:0.875em; text-align: center; padding:45px 0 10px 0;}
	#contact-process p a {color:#7f8fa1; font-size: 1em;}
	#contact-process p a:hover {text-decoration: underline;}
/* @end */


/* @group Nav */
	ul.navContainer {position:absolute; top:0;	width:332px; margin-left:533px; z-index:10;}
	ul.navContainer li {position:relative; overflow:hidden; height:38px; padding:0 2px; float:left;}
	ul.navContainer a {position:relative; top:0; display:block; height:152px; cursor:pointer; background-image:url(/images/nav.png);}
	ul.navContainer a:focus {outline:none;}
	ul.navContainer a:hover {overflow:hidden; top:-76px;}/*" overflow:hidden necessary to make IE7 support the hover pseudo-class (this is a personnal trick!) "*/
	ul.navContainer a:active {top:-114px;}
	ul.navContainer a.navSelected, ul.navContainer a.navSelected:hover{top:-38px;}
	
	#portfolioNav {width:108px; background-position:0 0;}
	#processNav{width:107px; background-position:-108px 0;}
	#blogNav {width:81px; background-position:-215px 0;}
	#contactNav {width:105px; background-position:-296px 0;}
/* @end */