@charset "UTF-8";

* { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; }

body { background-color: #42474d; font-family:Helvetica, Arial, sans-serif; overflow: hidden; }

/* #################################################### 
# HEADINGS
####################################################### */

h1 { position: relative; color: #fff; font-size:19pt; font-weight:normal; text-shadow: rgba(0,0,0,0.75) 0px 1px 2px; }
	h1 span { background: url(../i/textGradient.png) repeat-x; position: absolute; display: block; height: 30px; width: 100%; clear: both; }

h3 { font-size: 10pt; }

/* #################################################### 
# LEFT SIDE ELEMENTS
####################################################### */

#left-side { background: #4f545a url(../i/leftSide.png) repeat-y; background-position:right; height:auto; position:absolute; left:0px; right:57%; top:0px; bottom:0px; width:auto; }

#title { cursor:pointer; height:450px; line-height:26px; margin-top:-225px; position:absolute; top:50%; right:265px; text-align:center; width:auto; }
	.sub-title { color:#a2a0a0; font-size:10pt; text-shadow: rgba(0,0,0,0.5) 0px 1px 2px; }

ul#social { list-style: none; }
	ul#social li { display: inline; float: left; margin: 0 5px; }

#arrow-wrapper { height:286px; margin-top:-143px; position:absolute; top:50%; right:170px; width:12px; }
	#arrow { background-image:url(../i/highlightArrow.png); height:20px; position:absolute; left:0px; top:22px; width:12px; }

/* #################################################### 
# BUTTONS
####################################################### */

#buttons-wrapper { height:286px; margin-top:-143px; position:absolute; top:50%; right:15px; width:145px; }

	#about-button-wrapper { height:64px; position:absolute; left:0px; top:3px; width:145px; }
		#about-button { background-position:0px 0px; }
	
	#portfolio-button-wrapper { height:64px; position:absolute; left:0px; top:76px; width:145px; }
		#portfolio-button { background-position:0px -64px; }
	
	#services-button-wrapper { height:64px; position:absolute; left:0px; top:148px; width:145px; }
		#services-button { background-position:0px -128px; }
	
	#contact-button-wrapper { height:64px; position:absolute; left:0px; top:221px; width:145px; }
		#contact-button { background-position:0px -192px; }
	
	.nav-button { background-image:url(../i/icons.png); cursor:pointer; height:64px; position:absolute; left:0px; top:0px; width:65px; z-index:2; }
		.nav-caption { height:40px; opacity:0; position:absolute; left:50px; top:16px; width:75px; z-index:1; }
			.nav-caption-text { color:#c2c2c2; font-size:11pt; text-shadow: rgba(0,0,0,0.5) 0px 1px 2px; }
				.nav-sub-caption-text { color:#898989; font-size:8pt; text-shadow: rgba(0,0,0,0.5) 0px 1px 2px; }

/* #################################################### 
# CONTENT ELEMENTS
####################################################### */

#content-panel-wrapper { background-image:url(../i/panelBack.png); height:280px; margin-top:-140px; overflow:hidden; position:absolute; top:50%; left:100%; right:0px; width:auto; }
	#content-panel-edge { background-image:url(../i/panelEdge.png); height:280px; position:absolute; left:0px; top:0px; width:30px; }

.content { height:185px; padding-top:45px; position:absolute; left:37px; top:27px; width:565px; }
	.content-title { color:#434242; font-size:16pt; height:30px; position:absolute; left:0px; top:0px; text-shadow: rgba(255,255,255,0.75) 0px 1px 0px; width:565px; }

/* ABOUT */
#about-content { display:none; }
	#about-text { color:#434242; font-size:10pt; height:144px; overflow:auto; text-shadow: rgba(255,255,255,0.75) 0px 1px 0px; }

/* PORTFOLIO */
#portfolio-content { background-image:url(../i/sliderBack.png); background-position:-3px 50px; background-repeat:no-repeat; display:none; }
#portfolio-slider { height:139px; overflow:hidden; position:absolute; left:8px; top:60px; width:541px; }

#image-wrapper { height:139px; position:absolute; left:0px; top:0px; width:541px; }
	#img-list ul { list-style:none; }
		#img-list li { display:inline; float:left; }

#slider-toolbar { background-image:url(../i/navbarBack.png); height:48px; position:absolute; top:85px; left:193px; width:154px; z-index:3; }
	.slider-button { background-image:url(../i/navButtons.png); cursor:pointer; height:31px; position:absolute; top:8px; width:32px; }
		#prev-button { background-position: 0px 0px; left: 26px; }
		#prev-button:active { background-position: 32px 0px; }
		
		#next-button { background-position: 0px -62px; left: 99px; }
		#next-button:active { background-position: 32px -62px; }

/* SERVICES */
#services-content { display: none; }
	.service-column { color:#434242; font-size:8pt; height:165px; line-height:12pt; position:absolute; top:55px; text-shadow: rgba(255,255,255,0.75) 0px 1px 0px; width:165px; }
		#service-column1 { left: 0px; }
		#service-column2 { left: 200px; }
		#service-column3 { left: 400px; }

/* CONTACT */
#contact-content { display:none; }
	#contact-form-wrapper { height: 150px; position: absolute; left: 2px; top: 67px; width: 350px; }
		#contact { line-height: 7px; letter-spacing: 1px; text-align: right; }

			#name, #email, #message { border: 1px #a5a5a5 solid; background-color: #fff; color: #888; font-size: 10pt; resize: none; }
				#name, #email { height: 20px; padding: 4px 2px 2px 2px; width: 166px; }
				#message { height: 51px; padding: 4px 2px 2px 2px; width: 344px; }

			#success-message { background-image:url(../i/sentBadge.png); display:none; height:27px; position:absolute; left:0px; top:102px; width:129px; z-index:3; }
			
			#submit { height: 27px; padding-top: 6px; width: 84px; }