﻿body { background-color: #fff; font-family: Arial, Sans-Serif; font-size: 62.5%; }
.clear { clear: both; }
a { color: #c06000; }
em { font-style: italic; }
strong { font-weight: bold; }
#page { margin: 30px auto 0 auto; position: relative; width: 808px; }

h1, h1 a { display: block; height: 72px; width: 808px; }
h1 a { background: url(Images/header.png) no-repeat top left; text-indent: -10000px; }
h1 a:focus { -moz-outline: none; }
h2 { display: block; height: 0; text-indent: -10000px; }

#tabs { float: right; height: 30px; margin-top: 40px; }
#tabs li { float: left; margin-left: 1px; }
#tabs li, #tabs li a { display: block; height: 30px; width: 95px; }
#tabs li a { background-image: url(Images/tabs.png); overflow: hidden; text-indent: -10000px; }
#tabs li a:focus { -moz-outline: none; }
#tabs li a.home { background-position: 0 0; }
#tabs li a.contact { background-position: -96px 0; }
#tabs li a.projects { background-position: -192px 0; }
#tabs li a.about { background-position: -288px 0; }
.body-home #tabs li a.home, .body-home #tabs li a.home:hover { background-position: 0 -30px; }
.body-contact #tabs li a.contact, .body-contact #tabs li a.contact:hover { background-position: -96px -30px; }
.body-projects #tabs li a.projects, .body-projects #tabs li a.projects:hover { background-position: -192px -30px; }
.body-about #tabs li a.about, .body-about #tabs li a.about:hover { background-position: -288px -30px; px; }
#tabs li a.home:hover { background-position: 0 -60px; }
#tabs li a.contact:hover { background-position: -96px -60px; }
#tabs li a.projects:hover { background-position: -192px -60px; }
#tabs li a.about:hover { background-position: -288px -60px; }

.content { background-color: #d8ebff; overflow: auto; padding: 15px; }
#tabs + .content { clear: both; }
.content p { text-align: justify; }
.content p, .content dl, .content ul { font-size: 1.6em; line-height: 1.5em; margin: 0 15px 1em 15px; overflow: auto; }
.content h3 { background-color: #7c9ec4; clear: both; color: #fff; display: block; font-size: 2.4em; font-weight: bold; margin-bottom: 0.5em; padding: 6px; }
.content dl dt { clear: left; float: left; width: 25%; }
.content dl dd { display: block; float: left; margin-bottom: 0.5em; width: 69%; }
.content dl + h3 { margin-top: 1em; }
.content ul { list-style-position: inside; list-style-type:disc; padding-left: 3em; }

.body-home .content h3 { margin-bottom: 0; padding: 0; }
.body-home .diagram { background-image: url(Images/diagram.png); height: 429px; position: relative; text-indent: -10000px; width: 778px; }
.body-home #diagram-big-texts { height: 100px; left: 70px; position: absolute; text-indent: 0; top: 185px; width: 250px; }
.body-home #diagram-big-texts img { left: 0; position: absolute; top: 0; }

#home-projects, #home-testimonials { height: 200px; margin-top: 15px; overflow: hidden; width: 366px; }
#home-projects { float: left; }
#home-testimonials { float: right; }
#home-projects h3, #home-testimonials h3 { display: block; height: 35px; text-indent: -10000px; }
#home-projects h3 { background: #7c9ec4 url(Images/recent-projects-text.png) no-repeat top left; }
#home-testimonials h3 { background: #7c9ec4 url(Images/testimonials-text.png) no-repeat top left; }
#home-projects img, #home-testimonials img { margin-top: 20px; }

#footer { clear: both; font-size: 1.2em; margin: 15px 0 20px 0; }
#footer p { font-size: 1.2em; margin: 0; text-align: right; }

.portfolio-item { margin: 40px 1em 10px 1em; overflow: auto; }
.portfolio-item img { border: solid 2px #7c9ec4; float: left; margin: 0 20px 4px 0; position: relative; top: 4px; }

.about-item { margin: 40px 0 10px 1em; min-height: 120px; overflow: auto; position: relative; }
.about-item img { border: solid 2px #7c9ec4; position: absolute; top: 4px; }
.about-item p, .about-item ul { margin-left: 130px; }
.about-item em { border-bottom: solid 1px #fff; border-top: solid 1px #fff; display: block; font-size: 0.9em; line-height: 1.2em; margin: 0 80px 0 40px; padding: 10px 0 10px 0; }
