@font-face
    {
        font-family: 'PTSansRegular'
    ;
        src: url('/css/GraublauWeb.otf')
    ;
    }
body {
    font-family: PTSansRegular, Lucida Sans, Lucida Sans Unicode, "Lucida Grande", Verdana, Arial, sans-serif; 
    font-size: 13px; 
    font-weight: normal;
    background: #111;
    color: #eee;
    position:relative;
}

/*h1 {font-size:3em}*/
/*h2 {font-size:2em}*/
/*h2 {font-size:1.6em}*/
h4{font-size:2em; margin:0; text-align:center;}
li {margin-bottom:0.5em;}
div#content {font-size:12px;}

input, textarea, select {color: #eee; background: transparent url('../img/contentback.png'); border: 1px solid #777; margin: 10px 0px;}

input:focus, textarea:focus { border: 1px solid #ffaa00; }

label { font-size: 10px; color:#999; margin-left: 1em;}

p { margin: 0 0 1em 0;}
.clear {clear:both}
.normal ul {padding:0 3em;}
.normal {text-align: justify}
.normal .note {text-align:left; font-size:10px; padding-top:1em; }
a { text-decoration: none; color: #ffc742; }
a:hover { color: #ffaa00;}
a.links  {font-size: 10px; color:#999;}
a.links:hover {font-size: 10px; color:#ffaa00;}

p.postmetadata a {color:#fff}

#background { position: fixed; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; z-index:-1;}
#background img { width: 100%; height: 100%;}

div#wrapper { width: 810px; margin:0px auto; position: relative; z-index: 1;}


/******************************HEADER***************************************/
#header #logo { margin-top:-10px; font-size:3em;}
#header { height: 46px; margin: 0; padding: 30px 20px 20px; color: #fff; position: relative; }
    div.nav { text-align: right; font-size: 14px; padding-top: 4px;}
    div.nav ul { list-style: none; margin:0; padding:0;}
    div.nav ul li { float: left; display: block; margin-left: 20px;}
    div.nav ul li a {  padding: 5px;}
    #header a {display:block;}
 /*   #header #tagline {position: absolute; left: 30px;}*/
.connections  {display:block; text-align:center; margin:0 auto; width: 132px;}
    .connections a  {display:block}
    .connections li  {float:left; padding: 5px 5px;}
    .connections ul  {list-style:none}
    
/******************************CONTENT***************************************/
.note {color:#999;font-size:10px; }

#content-rounded { 
    
    /*background: url('../img/content-back.png') top center no-repeat; */
    position: relative;
    overflow: hidden;
}

.content-tl, .content-tr, .content-bl, .content-br { width: 24px; height:24px; position: absolute; top:0;}
.content-m { height: 24px; position: absolute; top:0; left:24px; right:24px;}
.content-wrap {position: relative; height: 24px;}

.content-back { background: url('../img/contentback.png'); }
    .content-tl { background: url('../img/content-tl.png') top left no-repeat; left:0;}
    .content-tr { background: url('../img/content-tr.png') top right no-repeat; right:0;}
    .content-bl { background: url('../img/content-bl.png') bottom left no-repeat; left:0;}
    .content-br { background: url('../img/content-br.png') bottom right no-repeat; right:0;}

#content {
    position: relative;
    padding: 0 20px; 
}

table.threecolumns td {width: 33%;}
table.threecolumns td.first {padding: 0 10px 0 0;}
table.threecolumns td.second {padding: 0 10px;}
table.threecolumns td.third {padding: 0 0 0 10px;}

table.threecolumns td h2 {text-align:center; margin-top:0;}

.clients {margin: 0 -20px;}
    .clients tr td  { margin: 0 2em; width: 33%; vertical-align: bottom; }


.client {width: 238px;text-align: center; background: url('../img/contentback.png'); border-radius: 20px;  -moz-border-radius: 20px; -webkit-border-radius: 20px; overflow: hidden; position:relative; padding-top: 2em; }
    .client img{ width: 238px; height: 133px; }
    .client h3, .client p {margin:0; padding:0 0 0.5em;}
    .client .editing {position: absolute; top: 5px; right: 5px; font-size: 10px}
    .client-hover {border: 2px solid #ffaa00;} 
    div.blank {display:none}
    
.year { text-align: center;  }
    
#flashMessage {text-align: center; padding: 1em;}


.logform { }
    .logform input{ width: 200px; }
    
h3.signature {text-align:right; font-size: 14px;}

.info h1, .info h2, .info h3 {margin: 0  0 0 0;}
.info h2{font-size:24px}
.info h1,h1.year, h1.portfolio {font-size:32px}
td.info {position:relative;}
.info ul { margin:0; padding:0; }
#info ul li { list-style:none; padding:0; margin:0; color:#888}
/*.info h2 {position:absolute; bottom:0; left:0;}*/
#info {text-align:center;}
.info table tr td {width:25%; vertical-align: top;}
.info table tr td table tr td h3{ text-align: left; margin-top:0;}

.album {margin: 0 10px;}
.album table table {font-size: 11px;}
    .album td.links  {}
    .album td.number  {text-align:left;font-size: 10px; color:#999; width: 2em;}
    .album .links a {font-size: 10px; color:#999;}
    .album .links a:hover {font-size: 10px; color:#ffaa00;}
    
#paypal input { border:none; background:none; text-align:center;}

#mp3player {position:fixed; bottom:0; right:0;}

#keyboards img.screenshot{ width: 100px; height: 150px;}

.gallery  {}
    .gallery  td{ width:33%;}
    .gallery h2  {text-align:center; padding:0 0 1em 0;}
    .gallery a {  text-align: center; display:block; }
    .gallery a > img { width: 200px; height: 300px; }
    .gallery #andmore img { width: 100px; height: 150px; }
    .gallery #andmore a { width: 100px; height: 150px; float:left; }
    .gallery #andmore { margin:0 auto; width:200px; height:300px; display:block; }
    
#portfolio p {text-align:justify;}
    #portfolio #frame {overflow:hidden; width:770px;}
    #portfolio #frame #frameslider {margin-left:0; position:relative; left:0;}
    #portfolio .image { padding: 0 20px 20px 0; text-align:right; width:520px; }
    #portfolio .desc { width:250px; }
     #controls {width: 120px; margin:0 auto;}


#thumbs li {float:left; margin: 3px}
#thumbs ul {list-style: none; margin: 0; padding: 0;}

/******************************FOOTER***************************************/

#footer { color: #bbb; margin: 1em 20px; font-size: 10px;}
#footer a { color: #fff}


/******************************BITS***************************************/

.left { float: left}
.right { float: right}
.orange { color: #ffaa00; }
.blue2 {color:#3485ff;}
.justify { text-align: justify;}
.clear {clear:both}