article,aside,canvas,details,div,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block; margin: 0; padding: 0; }
:focus { outline: 0; }
a img { border: 0; }


/* text */

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1, h3, h4 { color: #fff; }
h3 { font-size: 3em; padding: 0; margin: 10px 0;}
h4 { font-size: 2.4em; padding: 0; margin: 20px 0 10px;}
h5 { font-size: 2.4em; padding: 0; margin: 0; color: #fff; letter-spacing: .06em; }
h6 { font-size: 1.6em; padding: 0; margin: 5px 0; color: #fff; }
p { font-size: 1.4em; color: #fff6ac; letter-spacing: .1em; line-height: 1.4em;}
a { text-decoration: none; }
a:hover { color: #fff; }


/* formating index */

body { background: url(images/bg.png) repeat; font-size: 62.5%; margin: 0; padding: 0; font-family: Georgia, Serif; font-weight: normal; }
#wrap, section#recent { margin: 0 auto; min-width: 1020px; overflow: hidden; background: url(images/wrap-bg.png) top center repeat-y; padding: 0;}
div#top-shade { margin: 0 auto; background: url(images/top-shade.png) top center no-repeat; min-height: 473px; }
header div { margin: 0 auto; width: 1020px; }
section#search { float: right; height: 20px; margin: 17px 0 13px 750px; color: #fff; font-size: 1.2em;}
section#menu { float: left; width: 1020px; height: 65px; }
	section#title { float: left; }
		section#title h1,h2 { display: block; width: 1px; height: 1px; float: right; margin: 0; padding: 0;}
	nav#index { float: right; }
		nav ul { float: right; margin: 0;}
		nav ul li { float: left; list-style: none; border-left: 1px solid #710303; }
		nav ul li.last { border-right: 1px solid #710303; }
		nav ul li:hover { background-color: #990000; }
			nav ul li a { display: block; float: left; margin: 0; width: 129px; height: 40px; margin: 0; padding-top: 19px; text-decoration: none; font-size: 14pt;  text-align: center; color: #ff9933; }
			nav ul li a:hover { color: #fff; }
section#main-content { float: left; width: 100%; margin: 30px 0 0 0;}
#red-button { display: block; float: left; background: #a10000; border: 1px solid #710303; color: #fff; font-size: 12pt; padding: 5px 20px; }
	#red-button:hover { background: #a10000; border: 1px solid #710303; color: #fff6ac;  }

section#main-content div section { float: left; width: 240px; margin: 0px 0 0 0; }
section#main-content div section p { font-size: 1.1em; color: #fff6ac; line-height: 1.6em;}
section#main-content div section a img { margin: 0 0 0 45px; }
/* --- the slideshow ---- */
section#main-content div div.main_view { padding: 3px; float: right; background: #a10000; position: relative; border: 1px solid #710303; }
.window { height:280px;	width: 750px; overflow: hidden; position: relative; }
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {float: left;}
.paging { position: absolute; bottom: 40px; right: 3px; width: 80px; height: 30px; z-index: 100;  text-align: center; line-height: 30px; background: #a10000; display: none; border-top: 1px solid #710303; border-left: 1px solid #710303; border-bottom: 1px solid #710303; }
.paging a { padding: 5px; text-decoration: none; color: #fff; }
.paging a.active { font-weight: bold; background: #a10000; border: 1px solid #710303; }
.paging a:hover {font-weight: bold;}


section#skills { background: url(images/skills-bg.png) repeat-x; height: 331px; }
	section#skills div h3 { display: block; margin: 0; padding: 5px 0; width: 1000px; color: #fff; font-size: 3em; }
	section#skills div section { display: block; height: 142px; float: left; width: 462px; margin: 8px 0 0 0; padding: 0px 0px 0px 35px; background: url(images/check.png) top left no-repeat;}
		section#skills div section h4 { display: block; font-size: 2.3em; float: left; width: 462px; height: 20px; margin: 0; padding: 5px 0 0 0; }
		section#skills div section p { display: block; float: left; width: 442px; font-size: 1.2em; letter-spacing: .05em; line-height: 1.6em; padding: 0; color: #ff9933; height: 90px; }
section#coffee { background: url(images/coffee.png) top left no-repeat; margin: 10px auto 0; padding: 25px 0 0 150px; width: 870px; min-height: 100px; border-bottom: 1px solid #cc0000; }
section#email { background: url(images/email.png) top left no-repeat; margin: 10px auto 0; padding: 25px 0 0 150px; width: 870px; min-height: 80px; }
	section#email span { color: #fff; }
section#resources, section#colophon { width: 490px; margin: 0 10px; float: left; }
footer { margin: 25px auto 0; min-width: 1020px; overflow: hidden; padding: 0px; background: url(images/footer-bg1.png) repeat-x; }
	section#colophon p, section#resources a { font-size: 11pt; color: #fff6ac; line-height: 18pt; letter-spacing: 1.2pt;}
	section#colophon a, section#resources a { color: #ff9933; }
	section#colophon a:hover, section#resources a:hover { color: #fff; }
	section#resources section { float: left; width: 235px; }
	section#resources section h5 { font-size: 1.8em; color: #fff6ac; padding: 0; margin: 5px 0; }
	section#resources ul li { list-style: none; margin: 0 0 0 -40px;}
section#copy { margin: 0 auto; padding: 0; min-width: 1020px; background-color: #660000; min-height: 20px; border-top: 1px solid #ff0000; }
section#copy div.wrap p { color: #cc0000; text-align: center; padding: 4px 0 0 0; margin: 0;}

/* work  */

body#body-work { background: url(images/work-bg.jpg) #000 top center fixed no-repeat; }
#work-menu { width: 100%; height: 61px; float: left; background: url(images/menu-bg-work.png) repeat-x; }
	section#work-title { float: left; }
		section#work-title h1,h2 { display: block; width: 1px; height: 1px; float: right; margin: 0; padding: 0;}
	nav#work { float: right; margin: 0 0 0 67px; }
		nav#work ul li { display: block; float: left; border-left: 1px solid rgba(153,204,204,0.3); }
				nav#work ul li:hover { background: rgba(153,204,204,0.1);}
		nav#work ul li.last { border-right: 1px solid rgba(153,204,204,0.3); }
			nav#work ul li a { margin-top: 1px; width: 129px; height: 40px; text-decoration: none; display: block; font-size: 14pt; margin: 0; padding: 19px 0 0 0; text-align: center; color: #99cccc; }
			nav#work ul li a:hover { text-decoration: none; display: block; text-align: center; color: #fff; }

body#body-work h3 { float: right; display: block; text-align: right; font-size: 2.4em; color: #fff; width: 100%; padding: 0; margin: 25px 0 0 0;}
body#body-work p.intro { float: right; display: block; text-align: right; font-size: 1.4em; color: #99cccc; width: 100%; padding: 0; margin: 0 0 25px 0;}

section.work-sample { width: 1020px; float: left; border-top: 1px solid #99cccc; padding: 25px 0;}
	section.work-sample img { display: block; float: right; border: 1px solid #99cccc; }
	section.work-sample h4 { display: block; float: left; color: #fff; width: 230px; }
	section.work-sample aside { float: left; width: 200px; margin-right: 30px; }
		section.work-sample aside a { display: block; margin: 5px 0 5px 30px; padding: 9px 0px; width: 129px; background: url(images/menu-button-work.png) no-repeat; float: left; border: none; text-decoration: none; font-size: 1.4em; margin: 9px 25px; text-align: center; color: #99cccc; }
		section.work-sample aside a:hover { color: #fff; }
		section.work-sample aside h5 { color: #fff; font-size: 1.4em; font-family: Georgia; }
		section.work-sample aside p { font-size: 1.1em; color: #99cccc; font-family: Arial; }

/* contact */

body#contact-body { background: url(images/contact-bg.jpg) #000 top left fixed no-repeat; font-size: 62.5%; margin: 0; padding: 0; font-family: Georgia, Serif; font-weight: normal; }
#contact-menu { width: 100%; height: 61px; float: left; background: url(images/menu-bg-contact.png) repeat-x; }
	section#contact-title { float: left; }
		section#contact-title h1,h2 { display: block; width: 1px; height: 1px; float: right; margin: 0; padding: 0;}
	nav#contact { float: right; margin: 0 0 0 67px; }
		nav#contact ul li { display: block; float: left; margin-top: 1px; border-left: 1px solid rgba(204, 102, 51, 0.6); }
		nav#contact ul li.last { border-right: 1px solid rgba(204, 102, 51, 0.6)}
		nav#contact ul li:hover { background: rgba(255, 102, 0, 0.1); }
			nav#contact ul li a { text-decoration: none; display: block; width: 129px; height: 40px;  font-size: 14pt; margin: 0; padding: 19px 0 0 0; text-align: center; color: #ff9933; }
			nav#contact ul li a:hover { color: #fff; }

body#contact-body h3 { float: right; display: block; text-align: right; font-size: 2.4em; color: #cc6633; width: 100%; padding: 0; margin: 25px 0 0 0;}
body#contact-body p.intro { float: right; display: block; text-align: right; font-size: 1.4em; border-bottom: 1px solid rgba(204, 102, 51, 0.6); color: #fff; width: 100%; padding: 0; margin: 0 0 25px 0;}		
section#contact-content { width: 1020px; float: left; border-top: 1px solid #99cccc; padding: 25px 0;}

table { color: #fff; }

#main-container{ width: 700px; margin:30px auto; }
#form-container, #contact-info { width: 400px; border: 1px solid rgba(204, 102, 51, 0.6); background-color: rgba(204, 102, 51, 0.1); padding: 15px; float: left; -moz-border-radius:12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; }
#contact-info { width: 500px; float: right; margin: 0 0 0 40px; }
td{ white-space:nowrap; }
label{ text-transform:uppercase; font-size: 14px; }
textarea{ color:#404040; font-family:Arial,Helvetica,sans-serif; font-size:12px; }
td > button{ text-indent:8px; }
.error{ background-color:#AB0000; color:white; font-size:10px; font-weight:bold; margin-top:10px; padding:10px; text-transform:uppercase; width:240px; }
#loading{ position:relative; bottom:9px; visibility:hidden; }
.tutorial-info{ color:white; text-align:center; padding:10px; margin-top:10px; }
		
		
/* about  */

body#body-about { background: url(images/about-bg.jpg) #ffcc00 top left fixed no-repeat; }
#about-menu { width: 100%; height: 61px; float: left; background: url(images/menu-bg-about.png) repeat-x; }
	section#about-title { float: left; }
		section#about-title h1,h2 { display: block; width: 1px; height: 1px; float: right; margin: 0; padding: 0;}
	nav#about { float: right; margin: 0 0 0 66px; }
		nav#about ul li { display: block; float: left; margin-top: 1px; border-left: 1px solid rgba(204, 102, 51, 0.6); }
		nav#about ul li:hover { background: rgba(204, 102, 51, 0.2); }
		nav#about ul li.last { border-right: 1px solid rgba(204, 102, 51, 0.6) }
			nav#about ul li a { text-decoration: none; width: 129px; height: 41px; margin: 0; display: block; font-size: 14pt; padding: 18px 0 0 0; text-align: center; color: #fff; }
			nav#about ul li a:hover { text-decoration: none; display: block; text-align: center; color: #cc6633; }

body#body-about h3 { float: left; display: block; font-size: 2.4em; color: #cc6633; width: 100%; padding: 0; margin: 25px 0 0 0;}
body#body-about h4 { float: left; display: block; font-size: 2.4em; color: #cc6633; width: 100%; padding: 0; margin: 25px 0 0 0;}
body#body-about p.intro, body#body-about section#primary p.intro { border-bottom: 1px solid rgb(204, 102, 51); border-bottom: 1px solid rgba(204, 102, 51, 0.4); float: left; display: block;  font-size: 1.4em; color: #fff; width: 100%; padding: 0; margin: 0 0 25px 0;}
body#body-about section#primary p.no-mar { margin: 0 0 10px 0;}
	body#body-about p.intro { text-shadow: 1px 0px 1px #cc6600; font-family: Georgia, Times, Serif; }
body#body-about section#primary {float: left; width: 740px; margin: 0 30px 0 0; }
	body#body-about section#primary ul li { padding: 5px 10px; }
body#body-about section#primary p {font-size: 10pt; font-style: normal; font-family: 'Lucida Grande', Helvetica, Arial; letter-spacing: .02pt; line-height: 16pt; margin: 0 0 10px 0; color: #7a5129; }
body#body-about section#primary p.intro { text-shadow: 1px 0px 1px #cc6600; font-family: Georgia, Times, Serif;  }
body#body-about section#primary p.large { text-shadow: 1px 1px 1px #ffe200; font-family: Georgia, Times, Serif; font-size: 20pt; font-style: italic; line-height: 24pt; margin: 0 0 20px 0; color: #CC6633; }
body#body-about section#primary .web, body#body-about section#primary .design { font-size: 12pt; color: #CC6633; float: left; width: 350px; margin: 0px 0 10px 0; padding: 0px; } 
body#body-about section#primary .design { margin-right: 37px; }
body#body-about section#primary .web h5, body#body-about section#primary .design h5 { font-size: 16pt; margin: 20px 0 -10px 0px; padding-left: 20px; border-bottom: 1px dotted rgb(255, 255, 255); border-bottom: 1px dotted rgba(255, 255, 255, 0.5); }
body#body-about div#skill-top { float: left; width: 250px; height: 5px; background: url(images/work-side-bg-top.png) top center no-repeat;}
body#body-about section#skill { float: left; width: 250px; background: url(images/work-side-bg.png) center repeat-y; color: #fff; font-size: 10pt; font-weight: normal; font-family: 'Lucida Grande', Helvetica, Arial;}
body#body-about div#skill-bottom { float: left; width: 250px; height: 5px;  background: url(images/work-side-bg-bottom.png) top center no-repeat;}
body#body-about section#primary ul li { padding: 5px 0; margin-right: 10px; list-style: none; margin-left: -15px; border-bottom: 1px dotted rgb(255, 255, 255); border-bottom: 1px dotted rgba(255, 255, 255, 0.5); }
body#body-about section#skill ul { display: block; float: left; padding: 0; width: 250px; margin: 0; }
body#body-about section#skill ul li { list-style: none; display: block; float: left; padding: 4px 20px 4px; width: 210px; color: #fff; text-shadow: 1px 0px 1px #cc6600; font-size: 9pt; letter-spacing: .01pt; border-bottom: 1px solid #e19c06; margin: 0; }
body#body-about section#skill ul li span { display: block; float: right; }
body#body-about section#skill ul li.cat { font-size: 12pt; color: #CC6633; text-shadow: none; padding: 4px 10px; width: 230px;}
body#body-about section#skill h3 { color: #fff; padding: 10px 10px; text-shadow: 1px 1px 1px #cc6600; border-bottom: 1px solid #e19c06; width: 230px; margin: 0; }
body#body-about section#skill p { padding: 8px 10px 2px; display: block; color: #fff;  text-shadow: 1px 0px 1px #cc6600; font-size: 9pt; letter-spacing: .01pt; border-bottom: 1px solid #e19c06; border-top: #fedd00; width: 230px; margin: 0; }
body#body-about section#primary p.one, body#body-about section#primary p.two, body#body-about section#primary p.three, body#body-about section#primary p.four, body#body-about section#primary p.five { margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid rgba(204, 102, 51, 0.4);}
body#body-about section#primary p.one span, body#body-about section#primary p.two span, body#body-about section#primary p.three span, body#body-about section#primary p.four span, body#body-about section#primary p.five span { display: block; float: left; width: 22px; height: 28px; margin: 3px 20px 0 0; background: url(images/numbers.png) center center no-repeat; padding: 8px 0px 0 15px;}




/* common classes */

.clear { clear:both; }
.wrap { margin: 0 auto; width: 1020px; }
.hidden { text-indent: -9999px; border: none; margin: 0; padding: 0;}