body {font-family: Arial, helvetica, Sans-Serif; background-color: #e4e2e0; margin: 0; padding: 10px 0; font-size: 80%;}

/* TAG STYLES */
p, li, td, label, input, select, textarea {font-family: verdana, myriad, Arial, helvetica, Sans-Serif; font-size: 1em;}
p {color: #23211f; margin: 1em 0;}
h1, h2, h2, h4, h5, h6 {font-family: Arial, helvetica, Sans-Serif; color: #3c3086;}
h1 {font-size: 1.5em; margin: 0.7em 0;}
h2 {font-size: 1.3em; margin: 0.9em 0 0.7em 0;;}
form, label, input, select, textarea {margin: 0; padding: 0;}
a {font-weight: bold; text-decoration: none; color: #484da8;}
a:visited {color: #3c3086;}
a:hover {text-decoration: underline; color: #23211f;}
img {border: none;}
li {margin-bottom: 10px;}


/* COMMON  AND GENERAL*/
#container {width: 720px; margin: 0 auto; background: transparent url(../img/bg.gif) repeat-y top left;}
#content {padding: 10px 50px 10px 50px;}
#shortcuts {display: block; position: absolute; top: -10em; z-index: 0} 
#shortcuts a {padding: 0 0.5em; left: 0; z-index: 0}
#shortcuts a:focus, #shortcuts a:active {display: inline; z-index: 2; background-color: #000000; color: #ffffff; text-decoration: none; position: absolute; top: 10em;}

.fimg {float: right; margin: 0 0 5px 10px;}
.clear {clear: both; height: 0px; overflow: hidden; margin: 0;}
.clear2 {clear: both; height: 5px; overflow: hidden; margin: 0;}
.c {text-align: center;}
.top  {margin-top: 0;}
.flink {text-align: right;}


/* HEADER AND MENUS */
#header {background: transparent url(../img/butterfly.png) no-repeat top right;}
#header h1, #logo {margin: 0; padding:  39px 0 13px 71px;}
h1 a {text-decoration: none;}
#menu {list-style: none; font-size: 1em; margin: 20px 33px 0px 33px; padding: 0; height: 2.2em; background: transparent url(../img/menubg.gif) repeat-y 0 0;}
#menu a,#portfoliosubmenu a {color: #484da8;}
#menu a:hover, #portfoliosubmenu  a:hover {color: #23211f;}
#menu li {float: left; margin: 0 0 0 20px; padding: 0; line-height: 2em;}
#menu li#linkhome {margin: 0 0 0 18px;}
#home li#linkhome a {color: #23211f;}
#portfolio li#linkportfolio a {color: #23211f}
#portfoliobrochure li#linkportfolio a {color: #23211f}
#portfoliobrochure li#linkbrochure a {color: #23211f}
#portfolioecommerce li#linkportfolio a {color: #23211f}
#portfolioecommerce li#linkecommerce a {color: #23211f}
#portfoliolanding li#linkportfolio a {color: #23211f}
#portfoliolanding li#linklanding a {color: #23211f}
#contact li#linkcontact a {color: #23211f;}



/* PORTFOLIO */
.portfoliotype {background-position: 0px 3em; background-repeat: no-repeat; background-color: transparent;}
.portfoliotype h2 {border-top: 1px solid #cccccc; margin-top: 0; padding: 10px 0 0 0;}
.portfoliotype h2 a {display: block; padding: 0 0 225px 0;}
#brochuresites {background-image: url(../img/screenshots/brochuresites.jpg)}
#ecommercesites {background-image: url(../img/screenshots/ecommercesites.jpg)}
#landingpages {background-image: url(../img/screenshots/landingpages.jpg)}

.case {clear: both; background-color: #e4e2e0; padding: 10px; min-height: 135px; margin: 0 0 10px 0;}
.case img {border: 1px solid #8e8176; float: left; margin: 0 10px 0 0; width: 180px; height: 133px;}
.case h2{margin: 0px; line-height: 1em; padding-top: 2px; font-size: 1.2em;}
.case p {margin: 10px 0 0 0;}

#casenotes {float: left; width: 420px; padding: 0 0 10px 0;}
#casenotes p {text-align: justify;}
#illustrations {float: right; width: 182px;}
#illustrations img {border: 1px solid #8e8176; margin-bottom: 10px;}
#illustrations h2 {margin-top: 0;}
#illustrations p {font-size: 0.9em; margin-top: 0;}



/* FOOTER */
#footer {clear: both; background-color: #e4e2e0; padding-top: 5px;}
#copyright {color: #8e8176; font-size: 0.9em; text-align: center; margin: 0;}



#sitemap li {margin-bottom: 0;}