/* Reset */
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%; font-weight: normal; vertical-align: baseline; background: transparent; }

body { line-height: 1; background: #111; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 1em; min-width: 980px;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

img { border: none; }

/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* End Reset */

/* Main Structure (Wrappers)*/
#wrapper, #navigationWrapper, #contentWrapper, #footerWrapper { position: relative; float: left; width: 100%; float: left; min-width: 900px; margin: 0 auto; }
#wrapper { border-top: 3px solid #111; background: url(../images/header_bg.jpg) repeat-x 0 0; margin: 0 auto; height: 219px; }

#navigationWrapper { border-top: 1px solid white; border-bottom: 1px solid white; height: 26px; background: #4eb84a; }

#contentWrapper { margin: 0 auto; margin-top: 25px; width: 980px; background: transparent url(../images/main_content_reflection.jpg) no-repeat bottom; padding-bottom: 35px; }

#footerWrapper { margin-top: 30px; min-height: 216px; height: auto !important; height: 216px; background: #111 url(../images/footer_bg.png) repeat-x 0 0; border-top: 1px solid #fff; }

#mainWrapper { width: 980px; margin: 0 auto; }

#logo { position: relative; float: left; margin: 45px 0 0 40px; width: 186px; height: 57px; display: inline; }


/* MAIN AREA */

#main {position: relative; float: left; width: 900px; margin-left: 38px; background: white; min-height: 500px;	height: auto !important; height: 500px; display: inline; }

/* MAIN TEXT */
#main h2 { position: relative; float: left; margin: 10px 0 0 30px; font-weight: bold; font-size: 1.4em; color: #a5a5a5; display: inline; z-index: 10; }
#main .breadcrumb a{ color: #a5a5a5; text-decoration: none; font-weight: normal; }
#main .breadcrumb a:hover { color: #606060; }
#main p, #main .home, #main .left { font-size: .9em; color: #303030; line-height: 1.5em; }
#main .left, #main .home { position: relative; float: left; margin: 5px 0 15px 0; width: 520px; clear: none; }
#main .left { margin-left: 80px; display: inline; }

#main #navigation { position: relative; float: left; margin: 3px 0 0 5px; width: 888px; height: 30px; background: transparent url(../images/navigation_bg.jpg) repeat-x 0 0; border: 1px solid #7e7e7e; border-bottom: 2px solid #141414; display: inline; }

#main #mainContent { position: relative; float: left; margin-top: 25px;}
#main #mainContent h1 { position: relative; float: left; margin: 0; font-weight: bold; font-size: 1.4em; color: #606060; text-transform: lowercase; }

#main #mainContentTop, #main #mainContentBottom, #main #services, #main #about { position: relative; float: left; }
#main #mainContentBottom h1, #main #services h1, #main #about h1, #main #contact h1 { margin-left: 80px; display: inline; }
#main #mainContentTop img, #main #mainContentBottom img { border: 4px solid #737373; border-bottom: 5px solid #737373; }
#main #mainContentBottom, #main #services, #main #about { padding-bottom: 20px; }
#main #services h2 { position :relative; float: left; margin: 0; margin-left: 80px; color: #606060; font-weight: bold; font-size: 1.2em; color: #606060; text-transform: lowercase; clear: both; }
#main #services p, #main #about p { position: relative; float: left; margin: 5px 0 15px 80px; width: 520px; font-size: .9em; color: #303030; line-height: 1.5em; clear: both; display: inline; }
#main #services a, #main #about a { color: #606060; font-weight: bold; text-decoration: underline; }
#main #services a:hover, #main #about a:hover { color: #252525; }

#main .imgLeftHome { position: relative; float: left; margin-left: 80px; padding: 0 40px 30px 0; display: inline; }
#main .imgRight { position: relative; float: right; margin: 33px 75px 0 0; padding: 0 0 30px 40px; display: inline; }
#main .imgRight img { border: 4px solid #737373; border-bottom: 5px solid #737373; }

/* TAGLINE / RECENT WORK */
#main #recentWork, #main #tagline { position: relative; float: left; margin: -3px 0 0 5px; height: 185px; width: 885px; border: 2px solid #cdcdcd; display: inline; background: transparent url(../images/recent_work_bg1.jpg) repeat-x 0 0; }
#main #tagline { height: 65px; width: 885px; background: transparent url(../images/tag-line-bg.jpg) repeat-x 0 0; }
#main #tagline h1 { position: relative; float: left; margin: 20px 0 0 75px; color: #606060; font-size: 1.5em; width: 745px; display: inline; }

#main #recentWorkRight { position: relative; float: right; margin: 10px 75px 0 0; height: 160px; width: 325px; border: 2px solid #606060; display: inline; }
#main #recentWorkRight img { margin: 0; }

#main #recentWorkLeft { position: relative; float: left; margin: 20px 0 0 75px; width: 350px; display: inline; }
#main #recentWorkLeft h2 { margin: 0; font-weight: bold; font-size: 1.7em; color: #606060; }
#main #recentWorkLeft p { margin-top: 2em; clear: both; font-size: .95em; line-height: 1.5em; color: #606060; }
#main #recentWorkLeft a { color: #606060; font-weight: bold; text-decoration: underline; text-transform: uppercase; }
#main #recentWorkLeft a:hover { color: #252525; }


/* PORTFOLIO / PROJECT PAGE */
#main .projectTitleDetail, #main .projectTitle {
position: relative; float: left; margin: 0; font-weight: bold; font-size: 1.4em; color: #606060; text-transform: lowercase; width: 330px; padding-bottom: 5px; }
#main .projectTitleDetail { font-size: 1.6em; }
#main .projectDetailInfo { position: relative; float: left; width: 330px; border-top: 1px solid #b7ff70; border-bottom: 1px solid #b7ff70; height: 20px; background: #3c3c3c; clear: both; }

#main .projectDetailInfoReg, #main .projectDetailInfoBold { position: relative; float: left; margin: 3px 0 0 5px; font-size: .8em; color: #b7ff70; }
#main .projectDetailInfoReg { color: #f4f4f4;}

#main .projectDetailsWrapper2, .projectDetailsWrapper { position: relative; float: left; margin-top: 5px; width: 328px; background: #f1f1f1; border: 1px solid #ddd; }
#main .projectDetailsWrapper2 { background: #fff; }

#main .projectDetails2, #main .projectDetails { position: relative; float: left; color: #303030; margin: 8px 10px; line-height: 1.4em; font-size: .9em; padding-bottom: 10px; }
#main .projectDetails2 { padding-bottom: 0; }
#main .projectDetails2 p { margin-bottom: 15px; }
#main .projectDetails2 a { color: #303030; font-weight: bold; text-decoration: underline; }
#main .projectDetails2 a:hover { color: #606060; }

#main .projectImage { float: left; padding-left: 22px; }
#main .projectImage img { float: left; }

/* PORTFOLIO / PROJECT LINKS */
#main .projectExternalLink, #main .projectLink { margin-top: 5px; position: relative; float: left; width: 330px; text-align: center; text-transform: uppercase; padding-bottom: 10px; }
#main .projectExternalLink { margin-top: 0; font-size: 1.4em; }
#main .projectExternalLink a, #main .projectTitle a, #main .projectLink a { text-decoration: underline; color: #3c3c3c; }
#main .projectExternalLink a:hover, #main .projectTitle a:hover, #main .projectLink a:hover { color: #111; }

#main .projectTitle a, #main .projectTitle a:hover { text-decoration: none; }
/* EO MAIN*/



/* FOOTER CSS */
#footer {  width: 900px; margin: 0 auto; margin-top: 15px; }
#footer h3 { font: 1em bold; color: #fff; margin: 8px 0 0 20px; }

#footer .footerBoxHireMeBg, #footer .footerBoxesBg { position: relative; float: left; width: 280px; height: 150px; margin-right: 30px; background: transparent url(../images/footer_boxes_bg.png) repeat-x 0 0; display: inline; }
#footer .footerBoxHireMeBg { margin-right: 0; }

#footer .footerInfoLinks, #footer .footerInfoLinks1, #footer .footerInfo { position: relative; float: left; margin: 15px 0 0 20px; font-size: .8em; display: inline; width: 240px; }
#footer .footerInfoLinks { width: 85px; }
#footer .footerInfoLinks1 { width: 140px; }

#footer .footerImageRight { position: relative; float: right; margin-top: 15px; }

#footer .copyright { position: relative; float: left; color: #747474; font-size: .7em; margin: 5px 0 0 17px; width: 200px; }
/* EO FOOTER */



/* LISTS */
#navigation ul { width: 885px; height: 30px; }
#navigation li { float: left; display: inline; text-transform: uppercase; border-right: 1px solid #50524e; height: 30px; font-size: .9em; }
#navigation li a, #navigation li a:visited { float: left; color: #ffefef; text-decoration: none; padding: 8px 20px; }
#navigation ul li a:hover { color: #2A2A2A; background: transparent url(../images/navigation_hover.jpg) repeat-x 0 0; }


/* MAINCONTENT & PROJECT LIST */
#mainContent ul, #project ul { width: 785px; height: 100%; margin-left: 75px; }
#mainContent li, #project li { position: relative; float: left; display: inline; margin-top: 5px; height: 340px; width: 330px; padding: 0 15px 25px 25px; }
#mainContent li img { border: none; }

#project li { height: 100%; }
#project li img { position: relative; float: left; margin-bottom: 20px; border: 1px solid #a5a5a5; }
#project li.details { position: relative; float: left; margin-top: 35px; }


/* FOOTER LISTS */
#footer ul.links, #footer ul.links1, #footer ul.links2, #footer ul.aboutFooter, #footer ul.hireMeFooter { border-left: 2px solid #fff; width: 115px; }
#footer ul.links { position: relative; float: left; height: 96px; width: 80px; }
#footer ul.links1 { position: relative; float: left; height: 96px; width: 140px; }
#footer .links li, #footer .links1 li { height: 20px; padding: 2px 0; width: 80px; }
#footer .links1 li { width: 140px;  }
#footer .links a, #footer .links1 a { width: 100px; color: #fff; text-decoration: none; padding: 15px; }
#footer .footerRecent { font-weight: bold; color: #bbb; margin-left: 15px; border-bottom: 1px solid #bbb; width: 100px; padding-right: 40px; }
#footer .links a:hover, #footer .links1 a:hover { color: #b0ff64; background: url(../images/footer_list_rollover.gif) no-repeat 0 center; }


#footer ul.aboutFooter { width: 160px; }
#footer ul.hireMeFooter { width: 240px; }
#footer .aboutFooter li, #footer .hireMeFooter li, #footer .paddingBottom li { line-height: 1.4em; padding-left: 15px; color: #fff; font-size: .9em; }

#footer .hireMeFooter li.paddingBottom  { padding-bottom: 10px; }
#footer .hireMeFooter a, .hireMeFooter a:hover { color: #fff; font-weight: bold; text-decoration: underline; }
#footer .hireMeFooter a:hover { color: #b0ff64; }
/* END OF LISTS */