/** ------------------------------------------
	workingbruno.com
	rev. 2011-04-22
	------------------------------------------- **/
/** -- reseting -------------------------------- **/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

body { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/** -- making it happen --------------------------- **/
body { font: 62.5% "Helvetica Neue", Helvetica, Arial, sans; line-height: 1.8; color: rgba(255, 255, 255, 0.95); margin-bottom: 1.5em; -webkit-font-smoothing: antialiased; }

h1 { font: 2.1em "FranklinGothicFSDemi", "Helvetica Neue", Helvetica, Arial, sans; line-height: 1.5em; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.8em; text-indent: -9999px; background: url("../img/wb_logo.png") no-repeat; width: 67px; height: 67px; margin: 0.3em 0 2em 0; }

@font-face { font-family: 'FranklinGothicFSDemi'; src: url("../font/FranklinGothic-Demi-webfont.eot"); src: url("../font/FranklinGothic-Demi-webfont.eot?iefix") format("eot"), url("../font/FranklinGothic-Demi-webfont.woff") format("woff"), url("../font/FranklinGothic-Demi-webfont.ttf") format("truetype"), url("../font/FranklinGothic-Demi-webfont.svg#webfont") format("svg"); font-weight: normal; font-style: normal; }

h2 { font: 4em "FranklinGothicFSDemi", "Helvetica Neue", Helvetica, Arial, sans; line-height: 1em; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.8em; letter-spacing: -1px; }

p { font: 1.4em "Helvetica Neue", Helvetica, Arial, sans; line-height: 1.8; color: rgba(255, 255, 255, 0.95); margin-bottom: 1.5em; }

a { color: #999999; text-decoration: none; border-bottom: 1px solid #333333; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; transition-property: all; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; }
a:visited { color: #999999; text-decoration: none; border-bottom: 1px solid #333333; }
a:hover { color: #666666; text-decoration: none; border-bottom: 0; }

ul { list-style-type: none; font: 1.3em "Helvetica Neue", Helvetica, Arial, sans; line-height: 1.8; color: rgba(255, 255, 255, 0.95); margin-bottom: 1.5em; margin: 2em 0 0 0; padding: 0; }
ul li { margin: 0; padding: 2px 0; }
ul li.twitter { background: url("../img/icon_twitter.png") no-repeat 0 50%; padding-left: 30px; }
ul li.dribbble { background: url("../img/icon_dribbble.png") no-repeat 0 50%; padding-left: 30px; }
ul li.linkedin { background: url("../img/icon_linkedin.png") no-repeat 0 50%; padding-left: 30px; }

#container { width: 36em; background: #222; margin: 15em; padding: 3em 3em 4em; }

.rgba #container { background: rgba(0, 0, 0, 0.8); }

.status { color: #598527; font-weight: 700; }

/** -- making it friendly for mobile screens --------------------------- **/
/** -- mobile portrait -- **/
@media only screen and (min-width: 320px) and (max-width: 479px) { h2 { font: 3.2em "FranklinGothicFSDemi", "Helvetica Neue", Helvetica, Arial, sans; line-height: 1em; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.8em; letter-spacing: -1px; }
  #container { width: 28em; margin: 1em auto 1em auto; padding: 3em 3em 4em; background: #000; }
  .rgba #container { background: black; } }
/** -- mobile landscape -- **/
@media only screen and (min-width: 480px) and (max-width: 767px) { h2 { font: 3.6em "FranklinGothicFSDemi", "Helvetica Neue", Helvetica, Arial, sans; line-height: 1em; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.8em; letter-spacing: -1px; }
  #container { width: 32em; margin: 1em auto 0 auto; padding: 3em 3em 4em; } }