/* Foundation and global rules*/

* { padding: 0; margin: 0; } /* Globally reset default browser padding and margin */
body { font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */ color: #ccc; background: #000 url('../img/1px-red.png') 0 124px repeat-x; text-align: center; min-width:750px; }
#wrapper { margin: 0 auto; width: 750px; background: #ccc; position: relative; }
hr { display: none; }
img { border: 0; }
.clear { clear: both; margin: 0; padding: 0; }
.center { text-align: center; }
h1, h2, h3, h4 { font-family: 'Trebuchet MS', Verdana, Sans-Serif; }

/* Links */

a, a:hover { color: #990000; text-decoration: none; }
h1 a, h1 a:hover { color: #666; }
a:hover { text-decoration: underline; }
a:visited { color: #666; }
.backlink a:visited { color: #990000; }

/* Header */

#header { background: transparent url('../img/1px-red.png') 0 124px repeat-x; height: 150px; }
#header h1 { padding: 16px; margin: 0; font-size: 2em; font-weight: normal; letter-spacing: -1px; color: #333; }
#header h2 { text-align: left; padding: 10px 0; margin-left: 10px; text-transform: uppercase; font-size: 4em; font-weight: bold; letter-spacing: -1px; float: left; color: #fff; }
#header p { text-align: right; padding: 16px 100px 0 0; margin-right: 10px; font-size: 1.6em; font-style: italic; float: right; }

/* Complete cross-hair */
#wrapper { background:#000  url('../img/1px-red.png') 760px 0 repeat-y; padding-right: 15px; }
#pin-globe { display: block; position: absolute;  /* 4 safari + firefox */ left: 100%; top: 25px; /* img width */ margin-left: -105px; z-index: 99; }

/* Side*/

#side{ background: #000; float: left; text-align: left; width: 240px; }
#side h4, #side p, #side ul, #side img { padding-left: 10px; }
#side { font-size: 1.5em; }
h4, h4 a, h4 a:hover, h4 a:visited { text-decoration: none; color: white; margin-bottom: 10px; }
h4 { font-weight: normal;  }
#side img { float: left; margin-bottom: 10px; }
.icon-title { margin-left: 58px; font-size: 0.8em; font-weight: bold; padding-top: 20px; }
.icon-detail { margin-left: 58px; font-size: 0.8em; font-style: italic; padding-bottom: 10px; }
#side li { font-size: 0.8em; }
#side ul li { list-style-type: none; list-style-image: none; }
.download { position: relative; margin-top: 28px; margin-left: -32px; }
.box { background: #2d2d2d; padding: 0; }
.box-top { background:  url('../img/side-top.png') center top no-repeat; height: 9px; margin-top: 20px; }
.box-bot { background:  url('../img/side-bot.png') center bottom no-repeat; height: 9px; }
#topper { margin-top: 0; }

/* Main */

#main { background:#000; float: right; line-height: 2.5em; text-align: justify; width: 500px; }
#main.gowide { float: none; width: 750px; }
#main h2, #main h3, #main h4, #main p { padding:0 10px; }
#main h3 { font-size: 2.5em; text-align: left; }
#main h4 { font-size: 2em; text-align: left; color: #666; }
#main p, #main ul { font-size: 1.5em; margin: 13px 0; }
h3 { margin-top: 40px; margin-bottom: 10px; }
#main img, #main object { padding-left: 10px; }
#main ul {padding-left: 30px; }
#big-icon { display: block; margin: 0; }
.example { display: block; font-size: 0.8em; background-color: #2d2d2d; margin: 0 10px; padding: 0; }
.example-top { background:  url('../img/example-top.png') center top no-repeat; height: 9px; margin-top: 20px; }
.example-bot { background:  url('../img/example-bot.png') center bottom no-repeat; height: 9px; margin-bottom: 20px; }
.example p { margin: 0 !important; }
.geo-iconize { padding: 2px 0 2px 35px !important; background: url('../img/geotag-16px.png') 10px center no-repeat; }
.underline { text-decoration: underline; }
#domain { text-align: right; margin-right: 10px; color: #666; }
#overlay { margin-left: -29px; }
.code { font: 9px Monaco, Arial, monospace; color: #000; white-space: pre; color: green; }
img.showcase { float: left; width: 128px; padding-top: 8px; }
p.showcase { margin-left: 138px !important; }
p.devname { float: left; width: 128px; margin-top: 10px; }
.socialdel{ display: block; padding: 2px 0 2px 20px; background: url('../img/delicious-small.png') left center no-repeat; }
.socialdig{ display: block; padding: 2px 0 2px 20px; background: url('../img/digg-small.png') left center no-repeat; }
.socialsu{ display: block; padding: 2px 0 2px 20px; background: url('../img/stumbleit.png') left center no-repeat; }
.socialtwit{ display: block; padding: 2px 0 2px 20px; background: url('../img/twitter.png') left center no-repeat; }
#diggjs { position: relative; bottom: -4px; }

/* Footer */

#footer { background:#000; padding: 10px; clear: both; margin-top: 30px; }
#design { color: #333; padding: 10px; }