@import url(http://fonts.googleapis.com/css?family=Copse);
@font-face {
 font-family: 'AllerRegular';
 src: url('../files/aller_rg-webfont.eot');
 src: local('@'), url('../files/aller_rg-webfont.woff') format('woff'), url('../files/aller_rg-webfont.ttf') format('truetype'), url('../files/aller_rg-webfont.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}
/*html {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}*/
.clearfix:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
.clearfix{display:inline-block}
html[xmlns] .clearfix{display:block}
* html .clearfix{height:1%}
body{font-family:Arial,Helvetica,sans-serif; font-family:'AllerRegular'; font-size:62.5%; background-color:#009ECD; text-align:center; overflow:-moz-scrollbars-vertical; overflow-x:hidden; overflow-y:auto; background-image:url(../images/bg-lines.png);  background-position: center top; background-attachment:fixed; color:#fff; cursor:default}
a{color:#fff; cursor:pointer}
a:hover{text-decoration:none; color:#000; text-shadow:0px 0px 5px #fff}
h1, h2, h3, h4, h5, h6{font-family: 'Copse', arial, serif; text-shadow:0px 0px 10px rgba(255,255,255,0.5),0px 0px 2px rgba(0,0,0,0.5); letter-spacing:-2px; font-weight:normal}
body p::selection{ color:#09c;  background:#09c}
body p::-moz-selection{ color:#000;  background:#09c}
ol{list-style-type:decimal; padding:5px}
ol li{margin-left:20px; padding:1px}
.floatright{float:right}
.floatleft{float:left}
#wrapper {
background-image: url(../images/mebg.png); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; 
}
#header{font-size:3.5em; color:#FFF; font-family:'Copse'; margin-right:auto; margin-left:auto; padding:20px; margin-top:30px; border-bottom:2px solid #33add6; border-bottom:2px solid rgba(255,255,255,0.3);  -moz-border-radius: 20px; -moz-border-radius: 20px; -moz-border-radius: 20px;}
#container{max-width:1200px; padding-left:50px; padding-right:50px; margin-right:auto; margin-left:auto; text-align:left; font-size:1.3em}
#me{display: none;float:left; height:100px; width:100px; background-image:url(../images/me.jpg); background-repeat:no-repeat; background-position:center center; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin-right:20px; margin-bottom:10px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.5); box-shadow:1px 1px 2px rgba(0,0,0,0.5); box-shadow:1px 1px 2px #000; overflow:hidden}
#me p{text-indent:-100000px}
#pull{height:80px; width:66px; float:right; background-image:url(../images/pull.png); background-repeat:no-repeat; background-position:center center; margin-top:200px; margin-right:100px; cursor:n-resize; opacity:0.9; position:absolute; right:0}
#crossbar{background-color:#FFF; background-color:rgba(255,255,255,0.9); height:200px; margin-top:-190px; box-shadow:1px 1px 20px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 20px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 20px rgba(0,0,0,0.2)}
.left-box, .right-box{font-family:'AllerRegular'; width:48%; color:#fff; float:left}
p, ul, ol{line-height:1.4em; text-shadow:1px 1px 1px rgba(0,0,0,0.3)}
p{margin-bottom:10px}
.left-box{margin-right:2%}
.row{clear:both; padding:2%; border-bottom:2px solid #33add6; border-bottom:2px solid rgba(255,255,255,0.3); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
h2{font-size:2.2em; margin-bottom:10px}
h3{font-size:1.8em; margin-bottom:5px; letter-spacing:-1px}
.email{margin-right:15px}
#footer{width:98%; background-image:url(../images/jagged_white.png); background-repeat:repeat-x; background-position:center top; color:#0099ec; font-size:1.4em; padding:1%; height:10px; margin-top: 30px}
#footer a{color:#09c}
#floating-contact{width:570px; height:270px; background-color:rgba(255,255,255,1); position:fixed; left:50%; top:50%; margin-top:-150px; margin-left:-300px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:0px 0px 10px #fff; -webkit-box-shadow:0px 0px 10px #fff; -moz-box-shadow:0px 0px 10px #fff; display:none; padding:30px}
#floating-contact label{display:block; width:45%; padding:10px 0px; font-size:1.8em; font-family:'Copse'; color:#09c}
#floating-contact input{width:100%; padding:10px; background-color:#fff; border:none; border:1px solid #aeaeae; margin-top:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px}
#floating-contact *:focus{box-shadow:0px 0px 8px #09c; -webkit-box-shadow:0px 0px 8px #09c; -moz-box-shadow:0px 0px 8px #09c; border:1px solid #09c}
#floating-contact textarea{position:absolute; top:71px; right:20px; width:260px; height:160px; font-size:1.4em; font-family:'AllerRegular'; padding:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border:1px solid #aeaeae}
#floating-contact #form-submit, #floating-contact #form-cancel{float:right; width:80px; margin-left:10px; margin-top:-25px; padding:5px 10px; cursor:pointer; border:none; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:1px 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:1px 1px 1px rgba(0,0,0,0.2)}
#floating-contact #form-submit{background-color:#09c; color:#fff}
#floating-contact #form-cancel{color:#666}
.strike{text-decoration:line-through}
#services{margin-top:10px; line-height:2.2em; clear:both}
#services li{display:inline; margin-bottom:10px}
#services li a{padding:5px 10px; background-color:#33add6; background-color:rgba(255,255,255,0.2); text-decoration:none; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; font-size:0.9em; border:1px solid #48B9DB; border:1px solid rgba(255,255,255,0.2)}
#services li a:hover{background-color:transparent; color:#fff; border-color:transparent}
#services-other{padding:5px 0px; margin-top:10px; line-height:2.2em}
#services-other li{display:inline; padding:5px 10px; background-color:#0d9ecf; background-color:rgba(255,255,255,0.05); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; margin-right:5px}
.reflected{margin-bottom:1px}
.screenshot{margin-right:15px; float:left}
#iphone{background-image:url(../images/iphone/iphone.png); background-repeat:no-repeat; background-position:center center; height:240px; width:200px; float:left;margin-right:20px}
#iphone #screens{background-image:url(../images/iphone/screens.png); background-repeat:no-repeat; background-position:0px 50px; height:129px; width:89px; padding-top:50px; margin-left:20px}
.third{width:31%; float:left; margin-right:2%}
.center{text-align:center}
.third.logo .center{padding:20px; background-color:#33add6; background-color:rgba(255,255,255,0.2); border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin:10px 0px}
#item-list{height:335px; overflow:hidden; padding-right:5px}
.noscript #item-list{height:auto; overflow:visible; padding-right:5px}
.noscript .item{margin-top:40px}
.noscript #item-list .item .description{margin-top:-290px !important}
.item >div{float:left}
.item .description{background: #FFF; background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#EEEEEE)); /* webkit */ float:right; margin-top:-320px; margin-left:400px;  padding:20px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; color:#09c; box-shadow:1px 1px 5px rgba(0,0,0,0.3); -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.3); -moz-box-shadow:1px 1px 5px rgba(0,0,0,0.3); max-height:240px; overflow:auto;}
.item .description.iphone-description{margin-left:266px; margin-top:-280px}
.item .description p, .item .description h2{ text-shadow: 1px 1px 0px #fff !important;}
.item .description a{color:#09c}
#e{text-align: center; padding: 20px 0px; line-height: 2.6em;}
#e a{background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#EEEEEE)); /* webkit */ font-size: 1.2em; -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.1); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.1); box-shadow: 2px 2px 5px rgba(0,0,0,0.1); background-color: #fff; padding: 5px 10px; -moz-border-radius: 5px; color: #0AAED6; text-shadow: 1px 1px 1px #fff; text-decoration: none;}
#play-pause{width:63px; height:24px; background-image:url(../images/play-pause.png); background-repeat:no-repeat; background-position:0px 0px; cursor:pointer; float:right}
#prev, #skip{width:16px; height:24px; background-position:center center; background-repeat:no-repeat; float:right; cursor:pointer; margin-top:1px; margin-right:3px}
#prev{background-image:url(../images/prev.png)}
#skip{background-image:url(../images/skip.png)}
.noscript #form{height:700px}
.noscript #body{margin-top:560px}
.noscript #back{margin-top:552px}
.noscript #top{display:none}
#form-wrap{margin-top:80px; height:180px; transform:rotate(3deg); -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); width:440px}
#form{background-color:#fff; height:150px; width:340px; z-index:100; margin-top:-90px; margin-left:8px; padding:30px; overflow:hidden; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -moz-box-shadow:1px -1px 5px rgba(0,0,0,0.2)}
#form label{display:block; color:#09c; font-family:Georgia,"Times New Roman",Times,serif; font-family:'Copse'; font-size:1.4em}
#form #submit, #form #cancel{background-color:#09c; -moz-border-radius:5px; color:#fff; border:none; box-shadow:0px 0px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5); -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5)}
#form #cancel{color:#999; background-color:#eee; border:1px solid #ddd; width:100px; font-size:0.6em; padding:5px; float:right; margin-right:10px}
#form label input, #form textarea{width:330px; margin:10px 0px; padding:5px; border:1px solid #ddd; font-size:1.2em; font-family:Arial,Helvetica,sans-serif; font-family:'AllerRegular'}
#callback{display:inline !important; width:30px !important}
#form textarea{height:200px}
#body, #top, #back, #form{position:absolute}
#body{width:420px; height:178px; background-image:url(../images/envelope/bottom.png); z-index:101}
#top{margin-top:-115px; margin-left:2px; width:412px; height:115px; background-image:url(../images/envelope/top.png)}
#back{margin-top:-8px; margin-left:2px; width:412px; height:82px; background-image:url(../images/envelope/back.png)}
#twitter-music{margin-left:450px}
#twitter{float:right; width:45%; margin-right:5%}
.tweet p{margin-bottom:0px; text-shadow:none !important}
.tweet a{color:#09c}
.tweet .dateSince{font-size:0.8em; text-align:right}
.tweet{color:#09c; background-image:url(../images/quote.png); background-position:bottom right; background-repeat:no-repeat; padding:10px; padding-bottom:15px; margin-bottom:10px}
.tweet:nth-child(2n){ background-position:bottom left}
#lastfm{width:50%; float:right}
#artists li{padding:0; margin:0}
.nowplaying{padding-left:20px; background-image:url(../images/play.png); background-repeat:no-repeat; background-position:left top; margin:10px 0px}
.artist{height:85px; display:block; overflow:hidden}
.album{float:left}
.album img{position:absolute}
.artwork{margin-left:5px}
.album-name{font-size:1.4em; font-weight:bold}
.album-name, .artist-name{margin-left:90px}
.album-name{margin-top:13px}
#based, #charges{padding:12px; float:left; width:47%; font-size:1.2em; color:#09c; text-align:left}
#based *, #charges *{text-shadow:none}
#charges a{color:#09c}
#based h3{font-size:1.6em; margin-top:10px}
#based img{margin-right:10px; float:left; border:1px solid #09c; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px}
.fail{background-color:#FF9797; border:2px solid #B30000; padding:5px; line-height:1.4em; margin-bottom:10px}
.success{background-color:#7F7; padding:5px; margin-bottom:10px; border:2px solid #090; color:#060; line-height:1.4em}
#logo-fade{width:150px;height:150px;overflow:hidden;float:right;margin-left:30px}
.files li {float: left;}.files li a {margin: 10px;border: 10px solid #fff;display: block;width: 150px;height: 104px;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.6)}