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, b, u, i, center, 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;
}
ol, ul { list-style: none; list-style-image: none; list-style-position: outside; list-style-type: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none;}
blockquote, q { quotes: "" ""; }
a img { border: none; }
abbr, acronym { border-bottom-width : 0; }
strong { font-weight : bold; }
em { font-style : italic; }

/* =common
----------------------------------------------------------------------------------------- */
body { background: url(../images/bg.jpg) 0 0 repeat-x #dcdedd; font: 12px/16px Helvetica, Arial, sans-serif; color: #666; text-shadow: 1px 1px 0 #fff; }

/* default link color */
a {
	color: #06C;
	text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; color: #666; }

/* default paragraph and h2 styles which is used in all slides except for home */
p {
	padding: 0 0 10px;
	text-align: justify;
}
h2 {
	padding: 6px 0 10px 0;
	font: bold 16px/22px "Arial", Myriad, Helvetica, Arial, sans-serif;
	color: #455292;
}

/* give anyone of this class to the image in the about section to float it left or right */
.left { float: left; margin: 5px 16px 5px 0; }
.right { float: right; margin: 5px 0 5px 16px; }

/* =layout / divisions
----------------------------------------------------------------------------------------- */

/* This <div> holds the reflection background image. Change the image and if necessary adjust its position from the top in the background property. */
#outerWrapper {
	overflow: hidden;
	position: relative;
	width: 900px;
	margin: 0 auto;
	padding-bottom: 60px;
	background: url(../images/reflection.jpg) center 379px/* adjust this property */ no-repeat transparent;
}

#contentWrapper {
	position: relative;
	overflow: hidden;
	width: 730px;
	height: 325px;
	margin: 40px auto 0;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #c1c1c1;
	border-bottom: 0 none;
}

/* This <div> holds the content background image. */
#content {
	position: relative;
	overflow: hidden;
	width: 730px;
	height: 325px;
	background: url(../images/content-bg.gif) repeat-x 0 0 #eee;
}

#scrollWrapper { position: relative; width: 9999px; }
.section {
	position: relative;
	float: left;
	margin-right: 50px;
	width: 710px;
	height: 300px;
	padding: 0 10px 25px;
}
.pic {
	float: left;
	padding: 5px;
	margin-right: 10px;
	background-color: #fff;
	border: 1px solid #ccc;

}

/* =navMain
----------------------------------------------------------------------------------------- */

/* If you want to add more menus, change the width of #navMain here to accomodate for more space and then adjuust the left position value to center it */

#navMain {
	position: absolute;
	bottom: 1px;
	left: 281px;/* adjust this accordingly */
	overflow: hidden;
	z-index: 100;
	clear: both;
	width: 172px; /* this is the width of the nav */
	height: 20px;
	padding: 10px 0 4px 10px;
	text-align: center;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background: url(../images/navMain-bg.gif) repeat-x 0 0 #fff;
}
#navMain li { display: block; float: left; }
#navMain li a { display: block; float: left; }
#navMain li img { padding: 0 7px; }
#navMain li a { filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;  }
#navMain li a.selected, #navMain li a:hover, #navMain li a:focus { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* =home section
----------------------------------------------------------------------------------------- */
#home {
	padding: 85px 10px 25px;
	height: 294px;
}
#home h1 { margin: 0; padding: 30px 0 0; font: normal 36px/52px "Arial", Myriad, Helvetica, Arial, sans-serif; color: #333; text-align: center; }
#home h3 { font: normal 14px/18px Helvetica, Arial, sans-serif; color: #666; text-align: center; }
a.vcard { display: block; width: 34px; height: 34px; position: absolute; top: 0; right: 110px;   }
a.vcard img { width: 34px; height: 34px; font-size: 12px; line-height: 16px; filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; }
a.vcard:hover img, a.vcard:focus img { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* =gallery section
----------------------------------------------------------------------------------------- */
ul.gallery { overflow: hidden; padding: 20px 0  0 4px; }
ul.gallery li {
	float: left;
	display: inline;
	width: 70px;
	height: 95px;
	margin: 0 9px 20px;
}
ul.gallery li a {
	float: left;
	display: block;
	width: 70px;
	height: 65px;
	filter:alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
	text-align: center;
}
ul.gallery li a:hover, ul.gallery li a:focus { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* gallery Navigation */
.navGallery { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; }
.navGallery li { display: inline; }
.navGallery li a { padding: 0 4px; color: #666; }
.navGallery li a:hover, .navGallery li a:focus, .navGallery li.current a { text-decoration: none; color: #000; }
.navGallery li.current a { text-decoration: underline; }


/* project Navigation */
.navproject { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; }
.navproject li { display: inline; }
.navproject li a { padding: 0 4px; color: #666; }
.navproject li a:hover, .navproject li a:focus, .navproject li.current a { text-decoration: none; color: #000; }
.navproject li.current a { text-decoration: underline; }



/* =project section
----------------------------------------------------------------------------------------- */
#projects ul { overflow: hidden; padding: 2px 0 2px; }
#projects li {
	overflow: hidden;
	display: block;
	float: left;
	width: 320px;
	height: 46px;
	margin: 0 14px 0 0;
}
#projects li a { overflow: hidden; display: block; float: left; width: 252px; height: 36px; padding: 0; color: #666; }
#projects li a:hover, #project li a:focus { text-decoration: none; color: #333; }
#projects img { float: left; margin: 0 16px 0 10px; }
#projects li a:hover img { margin-left: 4; }
#projects strong { display: block; font: bold 14px/20px "Arial", Myriad, Helvetica, Arial, sans-serif; color: #333; }


/* =contact section
----------------------------------------------------------------------------------------- */
#addressDetails { float: left; width: 240px; margin: 0 20px 0 0; padding: 0 0 0 1px; border-right: 1px dotted #ccc; }
#addressDetails h3 { padding: 6px 0 0 0; font: bold 14px/22px; color: #333; }
#contactForm {
	float: left;
	width: 400px;
}

#note {
	color: #F00;
	font: bold 10px/12px Arial, Helvetica, sans-serif;
}
.notification_error { padding: 5px; border: 1px solid #ccc; margin-bottom: 10px; }

/* =footer/copyright
----------------------------------------------------------------------------------------- */
p#copyright { height: 20px; left: 10px; position: absolute; top:-30px; width: 990px; padding: 10px 0 18px 0; background: url(../images/layout/copyright-symbol.gif) no-repeat bottom right; color: #888; text-shadow: 1px 1px 0 #eee; text-align: right; }

/* =form
----------------------------------------------------------------------------------------- */
form { padding: 0; margin: 0; }
fieldset { clear: both; }

form .field, form .buttons { padding-bottom: 8px; }
form .field { padding-left: 120px; }

form .field label {
	display: inline;
	float: left;
	width: 60px;
	margin-left: -120px;
}
label, button, input.submit { cursor: pointer; }

input.submit { margin-left: 120px; background-color: #ccc; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; color: #555; }
input.reset { margin-left: 10px; }
input.submit:hover { background-color: #555; color: #fff; }

input.text, textarea {
	width: 280px;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	font-size: 12px;
	color: #555;
}
input.text:focus, input.password:focus, textarea:focus, select:focus { background-color: #eee; }


/* =accessibilityEnhancements
----------------------------------------------------------------------------------------- */
hr { display: none; visibility: hidden; }
/*visualHide*/
.visuallyHidden { position: absolute; top: -500px; left: 0px; width: 1px; height: 1px; overflow: hidden; }

/* =webkit / mozilla
----------------------------------------------------------------------------------------- */
::selection { color: #fff; background-color: #333; text-shadow: none; } /* webkit */
::-moz-selection { color: #fff; background-color: #333; text-shadow: none; } /* mozilla */