/* ------------------------   HTML   ------------------------ */

body {margin: 0; padding: 0; font: 13px Arial, sans-serif; background: #fff; color: #000; }
a:link, a:visited {text-decoration: none; color: #7C88B9; background-color: inherit; } 
a:hover {color: #473f7a; background-color: inherit; }
p {margin-top: 0; }
img {border: 0; }
h2, h3 {margin-top: 0; }

/* -------------------------   COMMON   ------------------------- */

.hidden {position: absolute; top: -10000px; left: 0; }
.clear-left {clear: left; } 
.clear-right {clear: right; } 
.clear-both {clear: both; }
.small-text {font-size: .9em; }
.large-text {font-size: 1.1em; }
.red {color: #f00; background-color: inherit; }
.grey {color: #999; background-color: inherit; }
.definition {background: #4CB14C; color: #fff; padding: 4px 5px 5px; margin: 0 0 12px 0; }
.close-def {float: right; padding: 0 0 6px 6px; }
.feedback {margin: 8px 0; padding: 6px; background: #4CB14C; color: #fff; font-weight: bold; }
.warning {margin: 8px 0; padding: 6px; background: #f00; color: #fff; font-weight: bold; }
.action {margin: 8px 0; padding: 6px; background: #f00; color: #fff; font-weight: bold; }

/* ------------------------   STRUCTURE   ------------------------ */

#background {position: fixed; width: 100%; }
	#background img {width: 100%; }

#foreground {z-index: 1; position: absolute; margin: 0; padding: 0; }

#left {position: absolute; left: 10px; top: 10px; width: 290px; }

#right {margin: 0 10px 0 310px; padding: 10px 0 48px 0; max-width: 670px;  }

/* ----------------------   LEFT CONTENT   ---------------------- */

#left-top {padding: 22px 0 0 21px; background-image: url("../media/architecture/left_bg_top.gif"); background-position: top left; background-repeat: no-repeat; }
#left-content {background: #fff; color: #000; border-left: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; }
#left-bottom {height: 32px; background-image: url("../media/architecture/left_bg_bottom.gif"); background-position: bottom left; background-repeat: no-repeat; }

h1#logo {margin: 0; font-size: 1.3em; color: #636; background-color: inherit; }

#nav-main {width: 240px; margin: 4px 0 0 0; padding: 5px 0 0 6px; list-style-type: none; font-size: 1.3em; font-weight: bold; color: #473f7a; background-color: inherit; border-top: 1px solid #d0d0d0; }
	#nav-main li {float: left;  }
	#nav-main li a {text-decoration: none; color: #7C88B9; background-color: #fff;  }
	#nav-main li a:hover {color: #473f7a; background-color: #fff; }
	.list-divider {font-size: .9em; color: #d0d0d0; background-color: inherit; font-weight: normal; }

#left-about {padding: 24px 6px 32px 26px; }
	#left-about ul {margin: 0; padding: 0;  list-style-type: none; font-size: 1.1em; }
	#left-about li {background-image: url("../media/architecture/bullet_list.gif"); background-position: 0 5px; padding-left: 12px; background-repeat: no-repeat; }
	#left-about li.more-info {margin: 12px 0 0 0; background-image: none; padding: 0 0 0 12px; font-weight: bold; }
	#left-about h2 {margin: 0 0 12px 0; font-size: 1.1em; }

#left-portfolio {padding: 24px 6px 32px 26px; }
	#left-portfolio h2 {margin: 0 0 4px 0; font-size: 1.1em; color: #333; background-color: inherit; }
	#left-portfolio ul {margin: 0 0 6px 4px; padding: 0; list-style-type: none; font-size: 1.1em; color: #473f7a; background-color: inherit; }

	#left-portfolio li {padding-left: 12px; background-color: inherit; background-image: url("../media/architecture/bullet_link.gif"); background-position: 0 5px; background-repeat: no-repeat; }
	#left-portfolio li.active {padding-left: 12px; background-image: url("../media/architecture/bullet_link.gif"); background-position: 0 -11px; background-repeat: no-repeat; }

	#left-portfolio li a  {text-decoration: none; color: #7C88B9; background-color: inherit; }

	#left-portfolio li a:hover, #left-portfolio li.active a {color: #473f7a; background-color: inherit;  }


#left-prices {padding: 24px 24px 32px 26px; }

#left-contact {padding: 24px 24px 32px 26px; }

#left-privacy {padding: 24px 24px 32px 24px; }
	#left-privacy h2 {margin: 0 0 6px 0; font-size: 1.1em; }

#legal {width: 240px; border-top: 1px solid #d0d0d0; margin: 0 0 0 26px; padding-top: 8px; font-size: .8em; color: #666; background-color: inherit; }

/* ---------------------   RIGHT CONTENT   --------------------- */

#right-top {height: 24px; width: 100%; }
#right-content {padding: 0 18px 6px; background: #fff; color: #000; border-left: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0; }
#right-bottom {height: 24px; width: 100%; }
#right-top img, #right-bottom img {width: 100%; }

/* --------------   ABOUT   -------------- */

#info-list {margin: 0; padding: 0; list-style-type: none; }
	#info-list li {margin: 0 0 6px 0; padding: 4px 6px 6px 90px; background-color: #E5E5E5; background-position: 4px 4px; color: #000; }
	#li-access {background-image: url("../media/architecture/icon_accessibility.gif"); background-repeat: no-repeat; }
	#li-cont-mgt {background-image: url("../media/architecture/icon_content_management.gif"); background-repeat: no-repeat; }
	#li-corporate {background-image: url("../media/architecture/icon_corporate.gif"); background-repeat: no-repeat; }
	#li-ecommerce {background-image: url("../media/architecture/icon_ecommerce.gif"); background-repeat: no-repeat; }
	#li-promotion {background-image: url("../media/architecture/icon_promotion.gif"); background-repeat: no-repeat; }
	#li-hosting {background-image: url("../media/architecture/icon_hosting.gif"); background-repeat: no-repeat; }
	#li-multimedia {background-image: url("../media/architecture/icon_multimedia.gif"); background-repeat: no-repeat; }
	#li-photography {background-image: url("../media/architecture/icon_photography.gif"); background-repeat: no-repeat; }
	.li-gap {height: 10px; }
	
/* --------------   PORTFOLIO   -------------- */

.pf-web {padding: 16px 0 16px 0;   }
	.pf-web-content {background-color: #F3F5FA; color: #000; border: 1px solid #d0d0d0; padding: 8px; }
	.pf-web-img {float: right; width: 200px; height: 117px; padding: 0 0 6px 6px; position: relative; }
	.pf-quote {background: inherit; color: #E48C0E; margin: 0; padding: 4px; }

#graphic {text-align: center; }
	.logo-img {/*height: 236px;*/ }
	
#prev-next {font-size: 1.1em; color: #ccc; background-color: inherit; }

/* --------------   PRICES   -------------- */

#included {margin: 0 0 24px 32px; padding: 0; }

#pricelist {width: 100%; margin-bottom: 12px; }
#pricelist th {background: #ddd; color: #000; padding: 4px 8px; }
#pricelist td {background: #eee; color: #000; padding: 4px 8px; }

.fn {vertical-align: top; font-size: .9em; color: #f00; background-color: inherit; }

.notes {font-size: .9em; }
	.notes p {margin-bottom: 2px; }

/* --------------   CONTACT   -------------- */

#contactform {margin: 0; padding: 24px 0 0 0; }
	#contactform fieldset {margin: 0 0 6px 0; padding: 0; border: 0; clear: both; }
	#contactform label {float: left; width: 36%; padding: 0 6px 0 0; text-align: right; font-weight: bold; }
	.input-220 {width: 220px; }
	.button {margin: 2% 0% 0% 37%; }
	.form-error {margin: 1% 0% 0% 38%; font-size: 0.9em; color: #f00; background-color: inherit; }

/* --------------   BRIEF   -------------- */

#brief {margin: 0; padding: 0; }
	#brief h2 {font-size: 1.3em; margin: 0 0 6px 0; }
	#brief h3 {font-size: 1.2em; color: #fff; background-color: #473f7a; padding: 4px; }
	.brief-section {background-color: #F3F5FA; color: #000; border: 1px solid #473f7a; margin: 0 0 12px 0; height: 1%; }
	.brief-section-content {padding: 0 8px 8px; }

	#brief fieldset {margin: 0 0 6px 0; padding: 0; border: 0; clear: both;  }
	#brief fieldset.fs-right {float: right; padding-top: 24px; } 
	.input-lines {margin: 0 0 24px 0; }
	.label-line {float: left; width: 30%; padding: 0 6px 0 0; font-weight: bold; }
	#brief textarea {width: 99%; }

	.brief-error-1 {margin: 1% 0% 0% 31%; color: #f00; background-color: inherit; }
	.brief-error-2 {margin: 0; color: #f00; background-color: inherit; }
	.brief-error {color: #f00; background-color: inherit; }