body {
  margin:0;
  padding:0;
  background:url(../img/body.jpg);
  font-family:georgia
}

* {
  outline:none
}

a {color: #990000}

a img {
  border:none
}

.full {
  width:100%;
  min-width:1000px;
  margin:auto
}

.pan {
  width:1000px;
  margin:auto
}

.clear {
  clear:both;
  height:0;
  line-height:0
}

.clear.c25 {
    height:25px;
    line-height:25px
}

#header {
  height:100px;
  background:url(../img/header.png) center top repeat-x
}

#logo, #logohover {
  margin:0;
  padding:0;
  position:absolute
}

#logohover {
  display:none
}

#logo a {
  display:block;
  width:250px;
  height:100px;
  text-indent:-999px;
  background:url(../img/logo.png) top no-repeat
}

#logohover a {
  display:block;
  width:250px;
  height:100px;
  text-indent:-999px;
  background:url(../img/logo.png) bottom no-repeat
}

#headerslogan {
  float:left;
  margin:68px 0 0 115px
}

#mainmenu {
  list-style:none;
  float:right;
  margin-top:35px
}

#mainmenu li {
  float:left;
  margin-left:25px
}

#mainmenu li a {
  display:block;
  text-indent:-999px;
  overflow:hidden;
  background-image:url(../img/menu.png);
  background-repeat:no-repeat;
  height:20px
}

#mainmenu #menu-home a {
  background-position:0 -20px;
  width:65px
}

#mainmenu #menu-home a:hover, #mainmenu #menu-home.active a {
  background-position:0 0
}

#mainmenu #menu-company a {
  width:108px;
  background-position:-96px -20px
}

#mainmenu #menu-company.active a, #mainmenu #menu-company a:hover {
  background-position:-96px 0
}

#mainmenu #menu-port a {
  width:97px;
  background-position:-235px -20px
}

#mainmenu #menu-port.active a, #mainmenu #menu-port a:hover {
  background-position:-235px 0
}

#mainmenu #menu-contact a {
  background-position:-365px -20px;
  width:88px
}

#mainmenu #menu-contact.active a, #mainmenu #menu-contact a:hover {
  background-position:-365px 0
}

#mainmenu #menu-journal a {
  width:71px;
  background-position:-484px 0
}

#maincontent {
  margin:25px 0
}

#portfolio-homepage {
  width:650px;
  height:333px;
  background:url(../img/portfolio-homepage.png) no-repeat;
  float:left;
  overflow:hidden;
  font-family:arial
}

.portfolio-homepage {
  background:url(../img/column3.png) 0 -10px repeat-x
}

.port-container {
  padding:17px 17px 17px 442px;
  height:266px;
  background-repeat:no-repeat;
  background-position:17px;
  font-size:12px
}

#portfoliopager {
  position:absolute;
  margin-top:250px;
  margin-left:450px;
  z-index:100
}

#portfoliopager a {
  background:url(../img/pager.png) no-repeat;
  color:#fff;
  text-decoration:none;
  padding:5px 9px;
  margin-left:10px;
  font:11px arial
}

#portfoliopager a.activeSlide {
  background:url(../img/pageractive.png) no-repeat
}

.portfolio-homepage-image {
  float:left;
  margin-right:10px
}

.portfolio-homepage-desc {
  float:left;
  width:200px
}

#expertise {
  float:right;
  width:350px
}

#expertise img {
  float:left;
  margin:0 0 25px 25px
}

#footer {
  background:url(../img/footer.png) top no-repeat;
  font:bold 11px georgia;
  padding:10px 0 5px;
  color:#333
}

#footer span {
  color:#990000
}

#splash {
  color:#555;
  margin:0 auto 25px;
  text-indent:-9999px;
  overflow:hidden;
  background:url(../img/splash.png) center no-repeat;
  height:117px;
  width:761px
}

.column {
  width:293px;
  margin:50px 10px 0;
  float:left;
  padding:10px;
  font-size:13px
}

.column.tweet {
  color:#302C26
}

.column.tweet ul li a {
  color:#222;
  text-decoration:underline
}

.column.tweet ul {
  margin:0;
  padding:39px 0 0;
  background:url(../img/twitter-head.png) top right no-repeat
}

.column#journal-list ul {
  margin:0;
  padding:39px 0 0;
  background:url(../img/journal-head.png) top right no-repeat
}

.column.tweet span, .column#journal-list span {
  font:11px arial;
  color:#444;
  font-weight:bold
}

.column.quotation {
  background:url(../img/column.png) top no-repeat;
  margin-top:93px;
  text-align:center
}

.column h3 {
  color:#550000;
  margin:0;
  font-size:20px
}

#social-bar {
  position:fixed;
  right:0;
  top:250px;
  width:32px;
  height:148px;
  background:url(../img/social-bar.png) no-repeat;
  padding:10px 7px 10px 13px
}

#social-bar a img {
  display:block;
  margin-bottom:10px
}

.column ul {
  padding:0;
  list-style:none;
  margin:8px 0
}

.column ul li {
  padding:10px 0;
  background:url(../img/column2.png) 0 -8px repeat-x
}

.column ul li a {
  color:#222;
  text-decoration:none
}

.column ul li.error a {
  color:#990000
}

.column li a:hover {
  text-decoration:underline
}

#people, #note, #studio {
  margin-right: 40px;
  width: 750px;
  padding: 0;
  font-size: 14px;
}

#studio dl {
  margin: 30px 0	
}

#people .description {
  margin: 10px 0;
}

#people em {
    display: block;
    font-size:12px;
    color:#555
}

#people a:hover {
  text-decoration: none;
  color: #990000
}

#thepeople li {
  background: none;
  float: left;
  padding: 10px
}

.input input, .input textarea, .input file {
  margin: 10px 0;
  display: block
}

div.error .error-message {
  float:left;
  color:#fff;
  max-width:300px;
  padding:7px;
  background:#8a1f11
}

#about, #portfolio, #quotation {
  margin-top: 40spx
}

.avatarsNormal {
  width:150px;
  margin: 20px 0 20px 10px
}

.avatars {
    width: 128px;
    margin: 20px 0 20px 10px
}

.avatars span {
    margin-top: 9px;
    margin-left: 8px
}

.avatars span.frame {
    display: block;
    z-index: 1000;
    background: url(../img/pict-frame.png) no-repeat;
    width: 128px;
    height: 138px;
    position: absolute;
    margin-top: -161px;
    margin-left: 0
}

.avatars canvas {
    position: absolute;
    margin: 9px 0 0 6px
}

.avatars img {
  max-width:150px
}

.details {
  width:590px
}

.floatleft {
  float:left
}

.floatright {
  float:right
}

dt {
  font-weight:bold;
  color:#5f2a00
}

ul.profile-links li {
  float:left;
  margin-right:10px;
  background:none
}

ul.profile-links li a {
  display:block;
  width:32px;
  height:32px;
  background-repeat:no-repeat;
  text-indent:-999px
}

a.profile-facebook {
  background-image:url(../img/profile-facebook.png)
}

a.profile-twitter {
  background-image:url(../img/profile-twitter.png)
}

a.profile-linkedin {
  background-image:url(../img/profile-linkedin.png)
}

.avatars .backbtn {
    margin-top: -20px
}

.backbtn a {
  padding-right:16px;
  font:italic normal 11px arial;
  color:#999;
  background:url(../img/top-arrow.png) right no-repeat
}

#quotation {
  width:750px
}

#quotation fieldset {
  padding:0;
  border:none;
}

#quotation input[type=text]:focus, #quotation input[type=text]:hover, #quotation select:focus, #quotation select:hover, #quotation textarea:focus, #quotation textarea:hover {
  border:2px solid #990000
}

#quotation input[type=text], #quotation select, #quotation textarea {
  border:2px solid #888;
  margin:0 10px 10px 0;
  float:left
}

input[style=display:none] {
  margin:0
}

#quotation select {
  padding:4px
}

#quotation textarea {
  width:350px;
  height:200px;
  font:12px arial;
  padding:3px
}

#quotation input[type=text] {
  width:250px;
  padding:5px
}

#quotation input[type=text].short {
  width:150px
}

#quotation label {
  display:block;
  font:italic normal 12px arial;
  padding:0;
  margin-top:10px
}

#quotation .floatleft {
  margin-right:10px!important
}

input[type=checkbox] {
  float:left;
  margin:0 10px 0 0
}

.bubbleInfo {
    position: relative;
}

.popup {
    position: absolute;
    display: none; /* keeps the popup hidden if no JS available */
    font-size:12px;
    color:#333;
    font-style:italic;
    font-family:arial;
    font-weight:bold
}

.port-container h3 a {
    font:italic bold 14px georgia;
    color:#fff;
    text-decoration:none
}

.port-container {
    color:#555
}

dd {
    padding-bottom:10px
}

.works, .paging {
    background:url(../img/column.png) 0 -8px repeat-x;
    padding:10px
}

.works h3 {
    font-style:italic
}

.works .screenshot {
    float:left;
    margin-right:10px
}

.works .description {
    width:314px;
    float:left;
    padding:10px 0
}

.works .visit {
    margin-top:25px;
    text-align:center
}

.works .visit a {
    font:italic bold 20px georgia;
    color:#fff;
    text-decoration:none;
    padding-right:50px;
    background:url(../img/arrow.png) right no-repeat
}

.paging {
    text-align:right;
    font-size:18px
}

.paging span {
    margin:0 10px;
    font-style:italic;
    font-weight:bold
}

.paging span a {
    text-decoration:none
}