@import "helper.css";

/* global page definitions */

body {
    background:#919191 url("/img/bg-pattern.jpg") center 0;
    font: normal 12px/1.35em Arial, sans-serif;
}

#page_bg { background:url(/img/bg.jpg) no-repeat center 0 }

/* signet */

h1 { padding:25px 0 }

h1#signet a {
    display:block;
    width:190px;
    height:190px;
    background:url("/img/signet.png") no-repeat 0 0;
    text-indent:-999em;
    margin:0 0 0 390px;
    border:0;
}

div.hr {
  background:url(/img/border.png);
  height:16px;
  width:100%;
}

#portfolio {
  margin:0 0 3em 0;
}

/* page links */

a { color:#23738d }

a:hover { color:#b11313 !important }
a:active { outline:none }

/* typography */

span.amp {
    font-family:"Baskerville", "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
    font-style:italic;
    font-size:1.2em;
    font-weight:normal !important;
}

h2 {
    text-align:center;
    margin:54px 0 1em 0;
    padding:0 100px;
    font-family:Georgia, serif;
    font-weight:normal;
    font-size:30px;
    line-height:1.3em;
    color:#333;
    font-style:italic;
}

h3 {
    margin:20px 0 8px 0;
    padding:0 6px 7px 6px;
    color:#000;
    font-size:13px;
    border-bottom:1px dotted #555;
}

div.wrapper {
    width:960px;
    margin:0 auto 0 auto;
    position:relative;
}

div.col4 {
    width:208px; 
    margin:0 42px 0 0; 
    float:left
}

.clients_content {
    margin:38px 0 40px 0;
    width:100%;
}

.clients_content li {
    background:#fff;
    display:block;
    height:223px;
    width:223px;
    margin:20px 20px 0 0; 
    float:left;
    border:1px solid #aaa;
    position:relative;
    text-indent:-999em;
    background-position:0 -223px;
}

.clients_content li.hover {
    background-position:0 0;
}

.clients_content .last {
    margin:20px 0 0 0;
}

ul.navigation {
    padding:10px 0 10px 0;
    margin:3px 0 0 0;
    line-height:1em;
    text-align:center;
    border-top:1px dotted #666;
}

ul.navigation li {
    display:inline;
    padding:0 40px 0 38px;
    text-transform:uppercase;
    border-right:1px dotted #333;
}

ul.navigation .last {
    border-right:0;
}

ul.navigation li a {
    color:#111;
    font-size:12px;
    text-decoration:none;
    font-weight:bold;
}

ul.navigation li a.current {
    color:#999;
}

#iceberg {
    width:960px;
    height:200px;
    background:url("/img/iceberg.png");
    margin:-50px 0 0 0;
    text-align:center;
    padding:100px 0 0 0;
    
}

#iceberg_meta {
    margin:-16px 0 0 0; 
    background:transparent url(/img/bg-meta.png) repeat-x 0 0; 
    padding:30px 0 25px 0; 
    text-align:center
}

#iceberg h4,
#iceberg_meta p {
    color:#fff;
    text-transform:lowercase;
    font-weight:normal;
    font-variant:small-caps;
    font-family:Georgia, serif;
    font-size:15px;
    line-height:1.2em;
    letter-spacing:2px;
}

#iceberg p {
    color:#98acb3;
    padding:12px 240px 32px 240px;
    font-family:Arial, sans-serif;
    line-height:1.4em;
    font-size:13px;
}

.item {
    width:460px;
    float:left;
    margin:40px 40px 0 0;
    text-align:left;
    position:relative;
}

.item span {
    position:absolute;
    top:20px;
    left:20px;
}

.item .arrow {
    position:absolute;
    top:438px;
    left:220px;
}

.loader {
    display:block;
    background:#fff url(/img/loading.gif) no-repeat 49.5% 50%;
    width:420px;
    height:250px;
    position:absolute;
    left:20px;
    top:20px;
    text-align:center;
    font-size:24px;
    color:#ccc;
    padding:150px 0 0 0;
    font-family:Georgia, serif;
}

.item .panes {
    padding:19px;
    width:420px;
    height:400px;
    border:1px solid #aaa;
    background:#fff url(/img/xloading.gif) no-repeat 50% 50%;
    margin:0 0 32px 0;
}

.item .panes img {
    position:absolute;
}

.item .project_nav {
    float:right;
    width:auto;
    height:auto;
}

.item .project_nav li {
    display:block;
    position:relative;
    padding:0;
    width:11px;
    height:14px;
    float:left;
    background:url(/img/page.png);
    border:0;
    text-indent:-999em;
    margin:0 0 0 4px;
    cursor:pointer;
}

.item .project_nav li.current {
    background:url(/img/page-active.png);
}

.item img {
    display:block;
}

.item.even {
    margin:40px 0 0 0;
}

#iceberg h4 span,
#footer h3 span,
#iceberg_meta p span {
    font-weight:normal;
    font-style:italic;
    font-variant:normal;
    letter-spacing:0;
    font-family:"Times New Roman", serif;
}

h3 a, .item a {
    background:url(/img/extern-b.png) no-repeat 0 center;
    padding:0 0 0 12px;
}

.item p {
    display:block;
    width:448px;
    height:50px;
    padding:0 6px 24px 6px;
    font-family:Georgia, serif;
    font-style:italic;
    line-height:1.6em;
    color:#222;
    font-size:12px;
}

/* social media icons */

ul.contact {
    position:absolute;
    right:0;
    top:216px;
}

ul.contact li {
    float:left;
    display:block;
    height:16px;
    width:16px;
    margin:0 0 0 5px;
}

ul.contact li a {
    display:block;
    height:16px;
    width:16px;
}

.facebook, .skype, .xing {
    display:block;
    width:16px;
    height:16px;
    text-indent:-999em;
}

.facebook { background:url(/img/icons16px.png) no-repeat 0 0 }
.skype    { background:url(/img/icons16px.png) no-repeat -16px 0 }
.xing     { background:url(/img/icons16px.png) no-repeat -32px 0 }

.facebook_small, .skype_small, .xing_small {
    display:block;
    width:12px;
    height:12px;
    float:left;
    margin:2px 6px 0 0;
}

.facebook_small { background:url(/img/icons12px.png) no-repeat 0 0 }
.skype_small    { background:url(/img/icons12px.png) no-repeat -12px 0 }
.xing_small     { background:url(/img/icons12px.png) no-repeat -24px 0 }

/* styling the footer */

#footer {
    margin:50px 0 0 0;
    color:#333;
    padding:0;
}


#footer p {
  padding:0 6px 16px 6px;
  font-family:Georgia, serif;
  font-style:italic;
  line-height:1.6em;
  font-size:12px;
  color:#222;
}

#footer img {
    display:block;
    margin:-16px 0 0 6px;
}

#form-content {
    position:relative;
}

#footer label {
    font-size:11px;
    padding:0;
    margin:0 0 0 6px;
}

#footer input {
    border:0;
    border-top:1px solid #777;
    width:198px;
    padding:5px 5px 4px 5px;
    background:#fff;
    font-size:14px;
    display:block;
    margin:0 0 14px 6px;
    color:#222;
    font-family:Arial, sans-serif;
}

#footer textarea {
    border:0;
    border-top:1px solid #777;
    width:688px;
    height:130px;
    padding:5px;
    background:#fff;
    font-size:14px;
    line-height:21px;
    display:block;
    margin:0;
    color:#222;
    font-family:Arial, sans-serif;
}

#i_message {
    position:absolute;
    top:0;
    left:250px;
}

span.error {
    color:#b11313;
    line-height:1em;
}

#footer p.success {
    line-height:1em;
    text-align:center;
    background:#638146;
    border:2px solid #a8b97c;
    padding:4px 0 18px 0;
    color:#fff;
    margin:20px 0;
    font-size:21px;
    font-style:italic;
    font-family:Georgia, serif;
}

#footer p.success img {
    display:inline;
    margin:0 10px -14px 0;
    padding:0;
}

ul.navigation_footer {
    padding:0 0 4px 0;
}

ul.navigation_footer li {
    display:inline;
    padding:0 8px 0 10px;
    border-left:1px dotted #666;
}

/* button stuff */

.button-bar {
    text-align:center;
    width:100%;
    padding:0 0 2em 0;
}

a.button {
    text-decoration:none;
}

button {
    background:#fff url(/img/bg-button3.png) repeat-x 0 bottom;
    border:0;
    font-family:Georgia, sans-serif;
    font-size:11px;
    cursor:pointer;
    color:#fff;
    font-weight:bold;
    padding:5px 10px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin:0 10px;
    border-top:1px solid #888;
}

button.hover,
button:hover {
    color:#fff !important;
    background:#fff url(/img/bg-button2.png) repeat-x 0 bottom;
    border-top:1px solid #444;
}

/* meta content beneath footer */

#meta {
    color:#555;
    font-size:11px;
    padding:10px 6px;
    position:relative;
    margin:0 0 20px 0;
    font-family:Arial, sans-serif;
}

#meta a {
    color:#444;
    text-decoration:none;
}

/* overlay and expose */

#mask { 
    background:#000; 
}

#overlay {
    display:none;
    height:440px;
    width:320px;
    padding:0 20px 20px 20px;
    background:#919191 url("/img/bg-pattern.jpg") center 0;
    overflow:auto;
}

#overlay h3 { 
    padding-left:0;
}

#overlay p {
    font-family:Georgia, serif;
    font-style:italic;
    line-height:1.35em;
    margin:0 0 1.35em 0;
}

#overlay .contentWrap { 
    margin:0;
    overflow-y:auto; 
}

/* tooltip */

#demotip { 
    display:none; 
    background:transparent url(/img/black_arrow.png);
    height:29px; 
    width:185px; 
    padding:21px 20px 10px 20px; 
    color:#fff; 
    z-index:200;
    font-size:10px;
    line-height:1.4em;
}