@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700);

/**
* Project: CSSKarma
* Auhtor: Tim Wright - csskarma.com
* Created on: 08.15.2010
----------------------------------*/

body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td                 { margin:0;padding:0; }
body                             { line-height:1;color:#333; }
h1,h2,h3,h4,h5,h6,p              { font-size:100%;font-weight:400; }
ol,ul                            { list-style:none; }
caption,cite,code,th             { font-style:normal;font-weight:400; }
fieldset,img                     { border:0; }
caption,th                       { text-align:left; }
:focus                           { outline:1px dotted #eee; }
table                            { border-collapse:collapse;border-spacing:0; }
label,
button,
input[type="submit"],
input[type="checkbox"],
input[type="radio"]              { cursor:pointer;}
a                                { overflow:hidden; }

/*
	HTML 5
------------------------- */
article,aside,figure,footer,header,
hgroup,menu, nav, section        { display: block; }

/*
	HTML Elements
------------------------- */
html                             { background:#dddcd7 url(../images/bkg.jpg) repeat center 0 fixed; }
body                             { max-width:960px;text-shadow:0 1px 0 rgba(255,255,255,.8);position:relative;margin:auto;font:12px/1.3 Arial, Sans-serif;-webkit-font-smoothing:antialiased;
                                   background:url(../images/bg_stripe.png) repeat-y 674px 0; }
h2                               { font:300 38px/1.3 "Yanone Kaffeesatz", Arial, Sans-serif;margin:0 0 15px; }
h3                               { font:300 40px/1.3 "Yanone Kaffeesatz", Arial, Sans-serif; }
h4                               { font-size:18px;font-weight:700;letter-spacing:-1px; }
h5                               { font-size:16px;font-style:italic; }
h6                               {  }
p,ul,ol,dl                       { font-size:14px;line-height:1.7;margin-bottom:15px; }
li                               {  }
strong                           { font-size:110%;color:#222; }
pre                              { background:#f3f3f3;padding:10px;margin:20px 0; }

a                                { text-decoration:none;color:#1a6e8f }
a:hover,
a:focus                          { color:#555; }

/*
	Utiliy Classes
------------------------- */
.accessibility                   { position:absolute;top:-9999px;left:-9999px; }
.feedback                        { font-size:20px;text-align:center;padding:15px 0;-moz-border-radius:10px;border-radius:10px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5); }
.loading                         { display:block;margin:10px auto;width:auto; }
.smashing-magazine a             { background:url(../images/icon_smashing.png) no-repeat 3px 0; }
.sitepoint a                     { background:url(../images/icon_sitepoint.png) no-repeat 3px 0; }
.usc a                           { background:url(../images/icon_usc.gif) no-repeat 3px 0; }
.css-tricks a                    { background:url(../images/icon_csstricks.png) no-repeat 3px 0; }
.yahoo a                         { background:url(../images/icon_yahoo.gif) no-repeat 3px 0; }
.penn a                          { background:url(../images/icon_penn.gif) no-repeat 3px 0; }
.web-designer-depot a            { background:url(../images/icon_wdd.gif) no-repeat 3px 0; }

img.left                         { float:left;padding:10px 10px 0px 0; }

.sidebar                         { position:absolute;font-size:16px;top:130px;left:700px;width:140px;color:#fff;color:rgba(255,255,255,.7);text-shadow:none; }
.sidebar cite                    { display:block;padding:0 0 0 10px;font-style:italic;font-size:90%; }
.sidebar cite:before             { content:"- " }

.subscribe a                     { margin:0 0 10px -20px;display:block;float:left;background:#bfa08f;padding:5px 20px;-moz-border-radius:30px;border-radius:30px;
                                   color:#fff;text-shadow:0 0 0;}
.subscribe a:hover               { background:#9f8577 }
.oops                            { background:rgba(223,141,97);background:rgba(223,141,97,.7); }
.yay                             { background:rgb(104,223,97);background:rgba(104,223,97,.7) }
.spammer                         { font-size:16px;font-weight:700;margin:30px 0 0 }
.spammer-message                 { width:75%;margin:10px auto;background:#fff;background:rgba(255,255,255,.8);-moz-border-radius:5px;border-radius:5px;padding:20px; }

.msg                             { background: #fffedf;background:rgba(255, 254, 223, .5);margin: 0 auto 15px;border: 1px solid #e5e6a4;border-radius: 7px;padding:10px; }
.msg p                           { margin:0;color:#777;line-height:1.3; }

/*
	Grouping
------------------------- */

/* image glowing */
.sites img,
#portfolio-sites a,
.presentations a,
#gallery a img,
.talks a img,
#more-sites a img,
#blog #content-sub a img         { opacity:.95;background:#eee;background:rgba(255,255,255,.5);display:block;padding:15px;-moz-border-radius:3px;
                                   border-radius:3px; }
.sites img:hover,
#portfolio-sites a:hover,
.presentations a:hover,
#gallery a:hover img,
.talks a:hover img ,
#more-sites a:hover img,
#blog #content-sub a:hover img   { opacity:1;background:#fff;background:rgba(255,255,255,.8);-webkit-transition-property:opacity;transition-property:opacity;
                                   -webkit-transition-property:background;-webkit-transition-duration:.3s;transition-property:background;
                                   transition-duration:.3s; }

/* icons */
.smashing-magazine a,
.sitepoint a,
.usc a,
.css-tricks a,
.yahoo a,
.penn a,
.web-designer-depot a,
.csskarma a                      { padding-left:27px; }

/*
	Layout Elements
------------------------- */
header                           { padding:20px 40px 30px 0;position:relative; }
header h1 a                      { display:block;height:62px;width:302px;background:url(../images/logo.png) no-repeat 0 0;text-indent:-9999px; }
header h1 a:hover                { opacity:.8; }
header p                         { position:absolute;top:65px;left:135px;color:#666; }
header:hover p                   { color:#333; }

#sitesearch                      { position:absolute;left:71%;top:20px;width:258px; }
#sitesearch button               { position:absolute;left:-9999px;top:-9999px; }
#sitesearch p                    { clear:both;position:static;margin:0;float:right;padding:0;font-size:12px;line-height:1.3; }
#sitesearch p a                  { font-weight:700;font-size:12px;color:#333;position:relative;z-index:99; }
#sitesearch input#q              { border:0;-moz-border-radius:3px;border-radius:3px;width:246px;font-size:25px !important;padding:0 5px;font-size:14px;color:#666;
                                   background:#eaeaea !important;background:rgba(255,255,255,.8) !important; }
#sitesearch label                { position:absolute;top:-9999px;left:-9999px; }

nav                              { float:right;text-align:right;width:100px;padding:0 0 10px; }
nav ul                           { font:300 28px/1.3 "Yanone Kaffeesatz", Arial, Sans-serif; }
nav li a                         { text-transform:capitalize;color:#333;display:block; }
nav li a:hover                   { color:#666 }

#content:after                   { content:".";display:block;clear:both;visibility:hidden; }

h2#pagetitle                     { font-size:90px;padding:0 0 0 195px;font-weight:400;line-height:1.3; }

#content-main                    { width:66%;padding:10px;float:left; }

/*
	Lab
*/

.html ul,
.css ul,
.php ul,
.javascript ul                   { margin:10px 10px 0 20px;font-size:16px; }

.html li,
.css li,
.php li,
.javascript li                   { list-style:disc;line-height:1.2;margin-left:25px;padding:5px 0px;float:left; }

body#lab h3                      { clear:both; }


/*
	Portfolio
*/

#portfolio-nav                   { overflow:hidden; }
#portfolio-nav ul                { font:300 30px/1.3 'Yanone Kaffeesatz', Arial, sans-serif;margin:0 0 0 80px; }
#portfolio-nav li                { width:180px;float:left;text-align:center; }
#portfolio-nav a                 { overflow:visible;white-space:nowrap;position:relative;opacity:.7;color:#aaa;display:block;text-indent:-9999px;width:150px;float:left;
                                   background: url(../images/bg_portfolio_section_nav.png) no-repeat 0 0;height:40px;padding:150px 0 0; }
#portfolio-nav a:hover           { color:#666;opacity:1;text-indent:0; }

#portfolio-nav li.articles a     { background-position:-160px 0; }
#portfolio-nav li.talks a        { background-position:-320px 0; }

#portfolio-nav li.active         { background: url(../images/bg_portfolio_section_nav.png) no-repeat -502px 160px; }
#portfolio-nav li.active a       { text-indent:0;padding-top:215px;color:#333;opacity:1; }

#portfolio-nav a span            { position:absolute;bottom:1px;left:99px;z-index:99; }

#more-sites                      { position:relative;top:-8px;float:left;margin:0 0 0 20px;width:185px; }
#more-sites ul                   { margin:0;padding:0; }
#more-sites ul                   { overflow:hidden; }
#portfolio-sites img,
#more-sites img,
.presentations img               { display:block; }
#more-sites img                  { margin:0 auto 10px; }
#portfolio-sites li              { display:inline-block;float:left; }

#portfolio-sites .split          { clear:both;display:block; }
#portfolio-sites .split-start    { margin-top:10px;clear:both;overflow:hidden; }

#portfolio-sites a               { margin:5px 10px 5px 0;display:block;float:left; }
#more-sites a img                { width:90px;padding:10px; }

#more-sites h3                   { text-align:center;padding:0 0 10px }

#portfolio-articles              { padding:0 0 0 30px;clear:both; }

#portfolio-sites #expand         { clear:both; } 
#portfolio-sites #expand a       { padding:5px 10px;margin:10px 0; }

.presentations a[href="#"]       { position:relative; }
.presentations a[href="#"]:after { content:"I haven't given this talk yet";position:absolute;top:25%;left:0;background:#000;background:#fff;
                                   text-shadow:none;color:#000;padding:5px 10px;font-size:12px;font-weight:700; }

.writings ul                     { margin:10px 0 0 0;font:300 22px 'Yanone Kaffeesatz', Arial, sans-serif; }
.writings li                     { line-height:1;padding:0; }
.writings li a                   { display:block;line-height:.9;padding-bottom:20px }

.presentations li                { float:left;margin-left:20px;margin-bottom:20px; }

.display                         { overflow:hidden;padding:0 0 50px 0; }
#gallery                         { -moz-border-radius:3px;border-radius:3px;clear:left;overflow:hidden; }
#gallery h3                      { margin:0 0 10px;font:400 50px/1.5 "Yanone Kaffeesatz", Arial, Sans-serif;text-align:center; }
#gallery a img                   { margin:auto; }
#gallery ul                      { padding:15px 30px;font-size:14px;color:#444; }
#gallery li                      { margin-bottom:17px;line-height:1.4; }

#gallery a .award img            { padding:0;background:none;positon:relative;display:block;margin-top:-85px;margin-bottom:30px; }
#gallery a:hover .award img      { background:none;opacity:1; }

/*
	Contact form
*/
#contactform                     { width:470px;margin:50px auto 30px; }
#contactform ul                  { margin:0;list-style:none; }
#contactform li                  { margin:0 0 10px; }
#contactform li input,
#contactform textarea            { background:#f6f6f6;background:rgba(255,255,255,.8);font:300 24px/1.3 'Yanone Kaffeesatz';width:440px;border:5px solid #fff;
                                   -moz-border-radius:8px;border-radius:10px;padding:5px; }
#contactform li input:focus,
#contactform textarea:focus      { background:#fff; }
#contactform textarea            { height:200px; }
#contactform label               { font:300 24px/1.3 'Yanone Kaffeesatz';display:block; }
#contactform button              { padding:5px 0;display:block;width:230px;font:300 24px/1.3 'Yanone Kaffeesatz';border:5px solid #fff;
                                   border-color:rgba(255,255,255,.6);-moz-border-radius:10px;border-radius:10px;color:#fff;background:#90a6b1; }
#contactform button:hover        { -webkit-transition-property:background-color;-webkit-transition-duration:.3s;transition-property:background-color;
                                   transition-duration:.3s;background:#6d99af; }
body#search #content-main        { background:#fff;padding:10px;-moz-border-radius:7px;border-radius:7px; }
iframe                           { width:640px; }

/*
	Bookmarks
*/
body#bookmarks #content-main ul  { clear:both;list-style:disc;font-size:16px; }

/*
	Home page
*/

#home h2,
#lab h2,
#portfolio h2,
#contact h2,
#bookmarks h2,
#blog h2,
#search h2                       { font-weight:600;font-size:50px; }
#home #content-main ul           { margin:0 0 30px -20px; }
#home #content-main li           { border-top:1px dashed #fff;font:300 30px/1.2 "Yanone Kaffeesatz", Arial, Sans-serif;padding:10px 0 10px 55px;
                                   background:url(../images/bullet_home.png) no-repeat 5px center; }
#home #content-main li:first-child { border:0; }
#home #content-main ul span      { display:block;font:italic 12px/1.3 Arial, sans-serif; }
#home #content-main ul a         { font-weight:400; }

/*
	Blog
*/

#bloglist                        { font-size:24px;margin:0;line-height:1.1; }
#bloglist li                     { padding:10px 0 }
#blog #content-main              { min-height:100px;float:left; }
#blog #content-main h3           { font-size:30px;font-weight:500;border-bottom:2px solid #444;margin:10px 0 10px 0;clear:both; }
#blog #content-main p            { font-size:16px;line-height:1.5;margin-bottom:20px; }
#blog #content-main a:hover      { border-bottom:2px solid #666; }
#blog #content-sub               { position:relative;top:0;float:left;margin:0 0 0 20px;width:185px; }
#blog #content-sub a img         { width:90px;padding:10px;margin:0 auto 10px; }
#blog #content-sub h3            { text-align:center;padding:0 0 10px }

#blog #content-main p.post-meta  { margin:0;color:#111;font-weight:700;font-size:12px;text-align:right; }

@media only screen and (max-width: 800px) {
	body{ background:none; }
	nav { float:none;text-align:left;padding:0;width:100%; }
	#home #content-main li{ background:none;}
	nav ul{ text-align:center; }
	nav li{ display:inline-block;padding:0; }
	nav li a { display:inline-block;padding:0 10px; }
	#home h2,
	#lab h2,
	#portfolio h2,
	#contact h2,
	#bookmarks h2{ text-align:left;font-size:35px;padding:0 0 0 10px; }
	blockquote.sidebar{ display:none; }
	#sitesearch { left:auto;right:10%; }
}

@media only screen and (max-width: 480px) {

	body{ background:none;width:auto; }
	header h1{ padding:0; }
	header h1 a{ padding:0;background-position:center;margin-left:10px; }
	header p{ display:none; }
	#sitesearch { display:none; }
	#home h2,
	#lab h2,
	#portfolio h2,
	#contact h2,
	#bookmarks h2{ text-align:center;font-size:40px; }
	
	#content-main{ width:100%;padding:0; }
	#home #content-main ul{ margin:0 0 50px; }
	#home #content-main li{ background:none;padding:10px 20px; }
	
	.html,.css,.php,.javascript{ width:66%;margin:0 auto 30px;float:none; }
	#contactform { width:66%;margin:50px auto 30px; }
	#contactform li input,#contactform textarea,#contactform button{ width:100%; }
	#portfolio-nav  {  }
	#portfolio-nav ul { font:300 30px/1.3 Sans-serif;width:100%;padding:0;margin:0 0 30px;text-align:center; }
	#portfolio-nav li { display:inline;width:auto;float:none;text-align:center; }
	#portfolio-nav a {  display:inline;padding:0;overflow:hidden;white-space:wrap;position:relative;opacity:1;color:#aaa;padding:0 5px;width:auto;float:none;background:none; }
	#portfolio-nav li.active { background:none; }
	#portfolio-nav li.active a       { text-indent:0;padding-top:0;color:#333;opacity:1; }
	#portfolio-nav a span{ position:static; }
	
	#portfolio-sites ul,
	#portfolio-talks ul{ text-align:center; }
	
	#bookmarks #content-main ul{ margin-left:30px; }
	#portfolio-sites li,
	#portfolio-talks li{ float:none;text-align:center; }
	#more-sites{ display:none; }
	#gallery img { max-width:90%;margin:auto; }

}