/* Rob Mason [dot] org - Main stylesheet */

/* Main stuff */
* { margin: 0; padding: 0; } 
body { background: #eee url('../images/back.png') repeat top left fixed; color: #555; font: 62.5% 'AftaserifRegular', Verdana, Georgia, Times, serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h3, h1 a { line-height: 1.6em; text-transform: uppercase;  font-family: 'LeagueGothicRegular', 'Trebuchet MS', Arial, sans-serif; }
h1 { font-size: 6em; color: #555; text-shadow: #eee 2px 2px 0px, 3px 3px 0px #bbb; }
h2 { font-size: 2.8em; color: #888; padding: 0 0 10px 0; margin: 0 0 20px 0; font-weight: normal; line-height: 1.2em; text-shadow: #fff 1px 1px 1px; }
h3 { font-size: 4.6em; text-align: center; letter-spacing: 0.05em; color: #BE361F; background: url('../images/footer.png') repeat-x bottom left; margin-bottom: 10px; text-shadow: #eee 1px 1px 0px, 2px 2px 0px #bbb; }
p, li { font-size: 1.4em; padding: 0 0 0.5em 0; text-shadow: #fff 0px 1px 1px; }
li { list-style: none; list-style-image: url('../images/bullet.png'); }
img { border: none; }
a { color: #BE361F; text-decoration: none; }
a:hover, a:active, a:focus  { color: #222; }
a:hover, img:hover { transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear; }
a:active { position: relative; top: 1px; }
ul { margin: 0 0 0 20px; }
em { font-weight: bold; }
abbr, acronym { cursor: help; text-decoration: none; border-bottom: dotted 1px #888; }
figure, header, footer, nav, article, section, hgroup, figcaption { display: block; }

/* Layout elements */
#top  { width: 100%; height: 12px; background: #BE361F url('../images/top.png') repeat-x top left; position: fixed; top: 0; }
#wrapper { width: 760px; margin: 20px auto 0 auto; padding: 0 10px; }
/* Not used anymore
#rob { clear: both; display: block; margin: 10px auto 0 auto; background: #fff; width: 160px; padding: 5px; box-shadow: 5px 5px 5px #bbb; -webkit-box-shadow:5px 5px 5px #bbb; -moz-box-shadow: 5px 5px 5px #bbb; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); text-align: center; font-size: 0.8em; font-style: italic; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
#rob:hover { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
*/

/* Header */
header { padding: 0; margin-bottom: 30px; width: 320px; padding: 0 10px; position: fixed; float: left; text-align: left; z-index: 1; }
header h1 a { color: #555; }
header h1 a:hover { background: none; color: #BE361F; text-decoration: none; text-shadow: #eee 2px 2px 0px, 3px 3px 0px #bbb; }
header img { background: none; margin: 10px 0 0 0; }

/* Sections */
section { width: 390px; float: right; z-index: -1000; padding: 10px 0 20px 0; }
section ul {margin: 0 0 1.5em 0; }
section img { color: #fff; padding: 5px; margin-bottom: 5px; background: #fff; border: 0; -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4); box-shadow:0 0 10px rgba(0,0,0,0.4); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
section img:hover { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -moz-box-shadow:0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow:0 0 10px rgba(0,0,0,0.9); box-shadow:0 0 10px rgba(0,0,0,0.9);}
#projects li, #experiments li { list-style: none; margin: 15px 0; padding-bottom: 30px; background: url('../images/footer.png') repeat-x bottom left; }

/* Footer */
footer { clear: both; color: #888; background: url('../images/footer.png') repeat-x top left; margin-top: 2em; padding: 30px 0 10px 0; text-align:center; }
footer p { margin-bottom: 1em; }

/* Random bits and bobs */
.jta-clear { display: none; }
#creditfooter { display: none; }
.clear, .link { clear: both; }
.and { font-family: "FontleroyBrownRegular", 'Trebuchet MS', Arial, sans-serif; font-size: 1.5em; padding: 0; }
.thumbs { margin: 10px 0 0 15px; }
.thumbs li { list-style: none; float: left; margin: 10px; }
.price { margin-bottom: 0.5em; }
figcaption { font-style: italic; text-align: center; padding: 0.5em 0; }
.version { font-size: 60%; }
p.delicious-extended { font-size: 1em; }

/* Flickr badge */
#flickr_badge_uber_wrapper {text-align:center; }
#flickr_badge_wrapper { }
.flickr_badge_image {  }
.flickr_badge_image img { width: 75px; height: 75px; float: left; margin: 0 10px 10px 0 ;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#BE361F;}
#flickr_badge_uber_wrapper img:hover, #lastfmrecords img:hover{ box-shadow: 5px 5px 5px #888; -webkit-box-shadow:5px 5px 5px #888; -moz-box-shadow: 5px 5px 5px #888; }

/* Last FM */
#lastfmrecords img, .flickr_badge_image img  { box-shadow: 5px 5px 5px #bbb; -webkit-box-shadow:5px 5px 5px #bbb; -moz-box-shadow: 5px 5px 5px #bbb; }
#lastfmrecords img:hover, .flickr_badge_image img:hover  { position: relative; top: -5px; }
.f { font-style: italic; font-size: 1.5em;  }
#lastfmrecords { }
#lastfmrecords img { width: 75px; height: 75px; margin: 0 10px 10px 0 ;}
#lastfmrecords a:hover { background:inherit !important; }

::selection { background: #BE361F; color: #fff; text-shadow: rgba(0,0,0,0.4) 1px 1px 1px; }
::-webkit-selection { background: #BE361F; color: #fff; text-shadow: rgba(0,0,0,0.4) 1px 1px 1px; }
::-moz-selection { background: #BE361F; color: #fff; text-shadow: rgba(0,0,0,0.4) 1px 1px 1px; }


/* Font Face embedding */

@font-face {
	font-family: 'FontleroyBrownRegular';
	src: url('../fonts/FontleroyBrown-webfont.eot');
	src: local('?'), url('../fonts/FontleroyBrown-webfont.woff') format('woff'), url('../fonts/FontleroyBrown-webfont.ttf') format('truetype'), url('../fonts/FontleroyBrown-webfont.svg#webfontt6SSWifx') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/League_Gothic-webfont.woff') format('woff'),
         url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('../fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AftaserifRegular';
    src: url('../fonts/AftaSerifThin-Regular-webfont.eot');
    src: url('../fonts/AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/AftaSerifThin-Regular-webfont.woff') format('woff'),
         url('../fonts/AftaSerifThin-Regular-webfont.ttf') format('truetype'),
         url('../fonts/AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}