body { background:#FFFFFF; color:#333; text-align:center; font-family:arial, sans-serif; font-size:13px; }

/* STYLING */
.alignleft { float:left; display:block; margin:0 20px 20px 0; }
.alignright { float:right; display:block; text-align:right; margin:0 0 20px 20px; }
h2 { font-size:22px; margin:0 0 20px; color:#336699; }
h3 { margin:0 0 20px; color:#1b4363; font:normal bold 60px/54px "Times New Roman, serif"; }
h3 span { font-size:14px; font:normal normal 14px/14px arial, sans-serif; color:#1b4363; }
h4 { font-size:22px; line-height:20px; margin:0 0 20px; color:#336699; }
h4 span { font-size:14px; font-weight:normal; color:#1b4363; text-transform:uppercase; }
h5 { font-size:15px; line-height:24px; margin:0 0 20px; }
h6 { font-size:14px; font-weight:bold; margin:0 0 5px; }
p { line-height:24px; margin:0 0 20px; }
ul { line-height:24px; }
ol { line-height:24px; }
a { color:#336699; text-decoration:none; }
a:hover { color:#433a2d; }

/* MAIN STRUCTURE */
#page { width:100%; clear:both; overflow:hidden; padding:73px 0 0; display:block; }
.container { clear:both; overflow:hidden; position:relative; display:table; height:1%; width:100%; }
.container .inner { padding:0; width:960px; margin:auto; text-align:left; }
#whatIDo,#aboutMe,#myPortfolio,#getInTouch { background:#fff url(../images/pattern.jpg) repeat-x; border-top:1px solid #99ccff; border-bottom:1px solid #000; }

/* HEADER */
#header { overflow:hidden; position:fixed; display:block; height:72px; width:100%; z-index:10; background:#02080f url(../images/header.jpg) no-repeat top center; border-bottom:1px solid #336699; }
#header .inner { padding:0; width:960px; margin:auto; text-align:left; }
#header .inner h1 { line-height:50px; height:50px; float:left; display:block; }
#header .inner h1 a { color:#FFFFFF; margin:0; text-decoration:none; padding:0; float:left; display:block; font-size:30px; }
#header .inner ul.nav { display:block; float:right; margin:27px 0 0; }
#header .inner ul.nav li { float:left; display:block; line-height:20px; margin:0 0 0 30px; }
#header .inner ul.nav li a { color:#3399cc; text-decoration:none; }
#header .inner ul.nav li a:hover { color:#FFFFFF; }
#header .inner ul.nav li.active a { color:#FFFFFF; font-weight:bold; }

/* BANNER */
#banner { background:#010408 url(../images/feature.jpg) no-repeat center; height:348px; margin:0; padding:0; }
#banner .inner { padding:40px 0 10px; }
#banner .screenshot { float:right; display:block; width:100%; margin-left:300px; position:relative; overflow:hidden; }
#banner .screenshot a.bannerPortfolioLink { width:175px; height:79px; position:absolute; bottom:60px; right:20px; display:block; }
#banner p { font-size:20px; line-height:24px; margin:0; color:#fff; width:450px; float:left; margin:0 0 0 420px; }
#banner .screenshot img { margin:26px 0 0 26px; }
#banner h2 { font-size:40px; font:normal normal 60px/50px "Times New Roman, serif"; color:#fff; margin:12px 0 0 420px; }
#banner h2 span { font:normal bold 14px/14px Arial, sans-serif; color:#fff; font-weight:normal; }

/* SERVICES */
ul.services { overflow:hidden; width:1000px; padding:10px 0 0; }
ul.services li { display:block; float:left; width:300px; margin:0 30px 0 0; }

/* PORTFOLIO */
#myPortfolio h3 { float:left; display:block; }
#myPortfolio .inner { width:1000px; position:relative; overflow:hidden; }
.portfolioTop { height:120px; margin:0 0 0 20px; clear:both; }
.portfolioButtons { float:right; display:block; width:71px; height:39px; margin:30px 20px 0 0; background:url(../images/portfolioButton.jpg) no-repeat; }
.portfolioButtons a.left { float:left; display:block; width:36px; height:39px; background:url(../images/portfolioButton.jpg) no-repeat top left; }
.portfolioButtons a.left:hover { background:url(../images/portfolioButtonHover.jpg) no-repeat top left; }
.portfolioButtons a.right { float:right; display:block; width:33px; height:39px; background:url(../images/portfolioButton.jpg) no-repeat top right; }
.portfolioButtons a.right:hover { background:url(../images/portfolioButtonHover.jpg) no-repeat top right; }
.portfolioArea { clear:both; position:relative; overflow:hidden; display:block; height:500px; width:1000px; }
.portfolioLeftSide { background:url(../images/portfolioLeftSide.png) no-repeat; width:20px; height:1000px; position:absolute; top:120px; left:0; display:block; z-index:2; }
.portfolioRightSide { background:url(../images/portfolioRightSide.png) no-repeat; width:20px; height:1000px; position:absolute; top:120px; right:0; display:block; z-index:2; }
ul.portfolioSlider { display:block; width:100000px; position:absolute; top:0; left:0; }
ul.portfolioSlider li { display:block; float:left; width:300px; margin:0 10px 0 20px; }
ul.portfolioSlider li img { border:2px solid #433a2d; width:296px; height:auto; }

/* ABOUT */
#aboutMe .left { width:630px; display:block; float:left; margin:20px 0; overflow:hidden; }
#aboutMe .right { width:300px; display:block; float:right; margin:20px 0; overflow:hidden; }
ul.links { line-height:30px; font-weight:bold; letter-spacing:.5px; }

/* GET IN TOUCH */
input { background:url(../images/input.jpg) repeat-x #eff4fa; border:1px solid #1B4363; padding:10px 10px 0; height:24px; width:300px; color:#4c4437; font-size:13px; font-family:arial, sans-serif; }
input:focus { border:1px solid #4c4437; }
textarea { background:url(../images/input.jpg) repeat-x #eff4fa; border:1px solid #1B4363; padding:10px 10px 0; height:120px; width:400px; color:#4c4437; font-size:13px; font-family:arial, sans-serif; }
textarea:focus { border:1px solid #4c4437; }
#submit { background:url(../images/submit.jpg) no-repeat; width:192px; height:39px; border:none; text-indent:-99999px; }
#getInTouch .left { float:left; display:block; width:600px; }
#getInTouch .right { float:right; display:block; width:300px; }

/* FOOTER */
#footer { height:114px; margin:0; background:url(../images/footer.jpg) no-repeat center #010408; padding:0; }
#footer .inner { padding:70px 0 0; }
#footer p { color:#f7f2ea; font-size:13px; text-align:center; }
#footer p a { color:#ffefd8; }
#footer p a:hover { color:#FFFFFF; }