/* -------------------------------------- */
/* Designed by Kim Long (www.kimlong.org) */
/* -------------------------------------- */



/* Reset */

body, html, div, blockquote, img, label, pre, ul, ol,  
li, dl, dt, dd, form, a, fieldset, input, th, td, h2 
{  
margin: 0; padding: 0; border: 0; outline: none;  
}  


/* Body and Headings */

body{
	line-height: 1.65em;
	font-size: .7em;
	font-family: Verdana, Arial, sans-serif;
	color: #777;
	text-align:center;
	height: 100%;
	background-color: white;
	background-image:url(../../images/layout/main/background.jpg);
	background-attachment: fixed;
	background-position: center;
	}


html {
    height: 100%;
	}
	
h1{
	font-weight: normal;
	font-size: 1em;
	display: inline;
	}
	
h2{
	font-style: italic;
	font-weight: normal;
	font-size: .9em;
	color: #333;
	}

a img{
	border: 0;
	}

/* Link properties */

a:link{
	text-decoration: none;
	color: #444;
	}
	
a:visited{
	text-decoration: none;
	color: #444;
	}
	
a:active{
	text-decoration: none;
	color: #444;
	}
	
a:hover{
	text-decoration: overline underline;
	color: #000;
	}


/* Topbar */

#topwrap{
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 125px;
	background-image: url(../../images/layout/main/topbar_repeat.png);
	}

#title{
	margin: auto;
	padding: 0px;
	width:800px;
	height:100px;
	background-image: url(../../images/layout/main/title.png);
	background-position: center;
	}
	
#menuwrap{
	margin: auto;
	padding: 0px;
	width:500px;
	height:25px;
	}


/* Menu */

#home a{
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -0px 0px;
	}
	
#about a{
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -100px 0px;
	}
	
#services a{
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -200px 0px;
	}
	
#gallery a{
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -300px 0px;
	}
	
#contact a{
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -400px 0px;
	}


/* Menu Hover */

#home a:hover{
	background-position: 0px -25px;
	border: none;
	}

#about a:hover{
	background-position: -100px -25px;
	border: none;
	}

#services a:hover{
	background-position: -200px -25px;
	border: none;
	}

#gallery a:hover{
	background-position: -300px -25px;
	border: none;
	}

#contact a:hover{
	background-position: -400px -25px;
	border: none;
	}
	
	
	/* Menu Selected */

#home_on {
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -0px -50px;
	}
	
#about_on {
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -100px -50px;
	}
	
#services_on {
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -200px -50px;
	}
	
#gallery_on {
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -300px -50px;
	}
	
#contact_on {
	float: left;
	margin: auto;
	width: 100px;
	height: 25px;
	background-image: url(../../images/layout/main/menu.png);
	background-position: -400px -50px;
	}


/* HTML Mains */

#content_1{
	padding-bottom: 75px;
	margin: auto;
	width: 500px;
	}
	
#content_2{
	padding: 25px;
	margin: auto;
	width: 800px;
	}

	/* About Page */
	
#about1{
	width: 825px;
	background-image: url(../../images/layout/main/self.png);
	background-position: 100% 20px;
	background-repeat: no-repeat;
	}
	
#about2{
	text-align: justify;
	padding-left: 10px;
	}
	
#aboutme{
	text-align: justify;
	width: 370px;
	padding-left: 10px;
	margin: auto;
	float: left;
	}

#questions{
	border-right: 1px dotted #45891a;
	float: left;
	padding-right: 30px;
	width: 475px;
	}
	
#equipment{
	padding-left: 30px;
	float: left;
	}
	
	/* Services Page */
	
#services1{
	width: 825px;
	}
	
#services2{
	text-align: justify;
	padding-left: 10px;
	}
	
#service{
	text-align: justify;
	width: 370px;
	padding-left: 10px;
	margin: auto;
	float: left;
	}

#service_questions{
	border-right: 1px dotted #45891a;
	float: left;
	padding-right: 30px;
	width: 475px;
	}

	/* Contact Page */

#contactwrap {
	padding-left: 25px;
	width: 825px;
	height: 575px;
	margin: auto;
	background-repeat: no-repeat;
	background-image: url(../../images/layout/gallery/gallery_bg.png);
	}

#contactme{
	text-align: justify;
	padding: 30px 25px 25px 35px;
	margin: auto;
	width: 470px;
	height: 475px;
	float: left;
	background-image: url(../../images/layout/main/cardbg.png);
	background-position:  bottom;
	background-repeat: no-repeat;
	}
	
#formmain{
	text-align: left;
	padding: 30px 0 0 10px;
	float: left;
	width: 235px;
	margin: auto;
	}

	/* Main Formats */

#main{
	margin: auto;
	position: relative;
	}

#topshadow{
	width: 100%;
	min-height: 125px;
	background-image: url(../../images/layout/main/shadow_gradient.png);
	background-repeat: repeat-x;
	}

#wrap{
	width: 800px;
	margin: auto;
	padding: 50px 10px 10px 10px;
	position: relative;
	background-image: url(../../images/layout/main/shadow_name.png);
	background-repeat: no-repeat;
	}
	
/* Gallery */

#gallerywrap {
	padding-left: 25px;
	width: 825px;
	height: 575px;
	margin: auto;
	background-repeat: no-repeat;
	background-image: url(../../images/layout/gallery/gallery_bg.png);
	}

.pictureframefirst {
	background-repeat: no-repeat;
	padding-top: 10px;
	margin-right: 5px;
	margin-left: 15px;
	float: left;
	position: relative;
	width: 120px;
	height: 470px;
	background-image: url(../../images/layout/gallery/gallery_frame.png);
	}
	
.pictureframe {
	background-repeat: no-repeat;
	padding-top: 10px;
	margin-right: 5px;
	float: left;
	position: relative;
	width: 120px;
	height: 470px;
	background-image: url(../../images/layout/gallery/gallery_frame.png);
	}
	
/* Gallery Pages */

#one {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/one.png);
	}
	
#two {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/two.png);
	}
	
#three {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/three.png);
	}
	
#four {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/four.png);
	}
	
#five {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/five.png);
	}
	
#six {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/six.png);
	}
	
#seven {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/seven.png);
	}
	
#eight {
	background-position: 0 10px;
	background-image: url(../../images/layout/gallery/eight.png);
	}

/* Footer */

.wrapper, .footer, .push, body, html {
	margin: 0;
	}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding-top: 125px;
    margin: -125px auto -75px;
	}

.footer {
	margin: auto;
	height: 75px;
	width: 400px;
	background-image: url(../../images/layout/main/footer.png);
	background-repeat: no-repeat;
	}
	
.footerwrap {
	height: 40px;
	padding-top: 35px;
	}

.push {
    height: 75px;
	}
	
/* Footer Links */	
	
.footer a:link{
	text-decoration: none;
	color: #777;
	}
	
.footer a:visited{
	text-decoration: none;
	color: #777;
	}
	
.footer a:active{
	text-decoration: none;
	color: #777;
	}
	
.footer a:hover{
	text-decoration: overline;
	color: #000;
	}

/* Slider */
	
.slider-wrap { 
	padding-left: 25px;
	width: 825px;
	height: 575px;
	margin: auto;
	background-repeat: no-repeat;
	background-image: url(../../images/layout/gallery/gallery_bg.png);
	}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 500px; overflow: hidden;}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden;
	float: left;
	margin: 0;
	width: 800px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 525px;
	clear: both;
	}
		
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
	}
		
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	position: relative;
	width: 800px; /* Also specified in  .stripViewer  above */
	}
		
.stripViewer .panelContainer .panel .panelwrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 35px 0 0 25px;
	}
		
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
	display: none;
	}
		
.stripNav ul { /* The auto-generated set of links */
	list-style: none;
	}
		
.stripNav ul li {
	float: left;
	margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
	}
		
.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 32px;
	background: #c6e3ff;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 15px;
	}
		
.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }
		
.stripNav li a:hover {
	background: #333;
	}
		
.stripNav li a.current {
	background: #000;
	color: #fff;
	}
		
.stripNavL a {
	display: block;
	height: 25px;
	width: 100px;
	}
		
.stripNavR a {
	display: block;
	height: 25px;
	width: 50px;
	}
	
.stripNavL a:hover {
	background-position: 0px -25px;
	border: none;
	}
	
.stripNavR a:hover {
	background-position: -100px -25px;
	border: none;
	}
		
.stripNavL a{
	background: url("../../images/layout/gallery/gallery_nav.png") no-repeat;
	background-position: 0px 0px;
	float: left;
	margin-left: 625px;
	width: 100px;
	height: 25px;
	}
		
.stripNavR a{
	background: url("../../images/layout/gallery/gallery_nav.png") no-repeat;
	background-position: -100px 0px;
	float: left;
	width: 50px;
	height: 25px;
	}