/*
Christopher Webb, Developer
Conspirator Design, http://www.conspiratordesign.com

Screen Stylesheet

FONT SHORTHAND ORDER (simply as a reminder):
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
*/
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,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
ol,ul{margin:0 0 10px 20px;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
p {margin-bottom:10px;}
strong {font-weight:bold;}
em {font-style:italic;}
.clear {clear:both;}

/* Decided to try this out
@-webkit-keyframes fade-in {
	0%   { opacity: 0; }
	50%   { opacity: 0; }
	100% { opacity: 1; }
}
.portfolio,#footer {
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 1.5s;
}
*/

/* TYPOGRAPHY */
h2 {color:#99CC00;font-size:20px;text-shadow:rgba(0,0,0,.5) 1px 1px 1px;}
h3 {color:#99CC00;font-size:20px;margin-bottom:5px;}
h2 {color:#99CC00;font:normal normal normal 30px/150% 'helvetica neue',helvetica,arial,verdana,sans-serif;margin-bottom:10px;}
h4 {font-family:'helvetica neue',helvetica;font-size:30px;line-height:130%;letter-spacing:-1px;}
a {color:#333;text-decoration:none;}
a:hover {text-decoration:underline;}
#footer a {color:#ccc;text-decoration:none;}

/* BIG STUFF */
body{background:#222 url(../design/bg-foot_bot3.png) repeat;border-top:10px solid #000;color:#000;font:normal normal normal 12px/180% 'helvetica neue',helvetica,arial,verdana,sans-serif;}
#outer_wrap {background:#000 url(../design/bg-body.gif) repeat;}
#wrap {margin:0 auto;padding:0 10px 30px;width:940px;}
#header {height:100px;}
#header h1 {float:left;padding-top:30px;width:364px;}
#content_wrap {position:relative;padding-bottom:30px;}
#footer {font:normal normal normal 11px/180% 'helvetica neue',helvetica,arial,verdana,arial,sans-serif;min-height:200px;height:auto !important;height:200px;position:relative;z-index:1;}
#footer .stuff_wrap {background:#222 url(../design/bg-foot_top.png) repeat;color:#ccc;min-height:200px;height:auto !important;height:200px;}
#footer .stuff {margin:0 auto;padding:32px 10px 25px;width:940px;}
#footer .little_bit {float:left;margin-left:160px;width:540px;}
#footer .little_bit img {float:left;margin-left:-160px;opacity:.9;}
#footer .little_bit img:hover {opacity:1;}
#footer .get_around {float:right;width:220px;}
#footer .get_around table {width:100%;}
#footer .get_around td {padding-top:10px;width:50%;opacity:.8;}
#footer .get_around td:hover {opacity:1;}
#footer .social_wrap {background:#222 url(../design/bg-foot_mid2.png) repeat;color:#ccc;min-height:200px;height:auto !important;height:200px;}
#footer .social {margin:0 auto;padding:32px 10px 38px;width:940px;}
#footer .social .delicious,#footer .social .lastfm,#footer .social .flickr,#footer .social .links {background:rgba(255, 0, 0, 0.2);float:left;width:220px;margin-right:20px;}
#footer .social .links {margin-right:0;}
#footer .boring_wrap {color:#333;min-height:200px;height:auto !important;height:200px;}
#footer .boring {margin:0 auto;padding:32px 10px 38px;width:940px;}

/* MAIN NAV */
#main_nav {float:right;padding-top:53px;width:300px;}
#main_nav ul {float:right;margin:0;}
#main_nav li {float:left;list-style:none;margin:0 20px 0 0;text-align:center;width:60px;}
#main_nav li.active {border-bottom:5px solid #222;padding-bottom:5px;}
#main_nav li.item4 {margin-right:0;}
#main_nav li a {background:transparent url(../design/nav.png) no-repeat;display:block;height:10px;text-indent:-9999px;width:60px;}
#main_nav li.item1 a {background-position:8px 0;}
#main_nav li.item2 a {background-position:-151px 0;}
#main_nav li.item3 a {background-position:-71px 0;}
#main_nav li.item4 a {background-position:-231px 0;}

/* CONTENT */
#content {float:left;margin:30px 0;overflow:hidden;position:relative;width:720px;}
#big_text {color:#333;font:normal normal bold 40px/150% 'helvetica neue',helvetica,arial,verdana,sans-serif;margin:0 0 30px;text-align:center;text-shadow:#fff 1px 1px 0;}
ul.portfolio {list-style:none;margin:0;padding:0;}
ul.portfolio li {float:left;margin-right:20px;}
ul.portfolio li.last {margin-right:0;}

/* PORTFOLIO */
.portfolio span {display:block;font-size:13px;margin-top:5px;text-align:center;visibility:hidden;}
.portfolio a:hover span {visibility:visible;}
.portfolio a {-moz-box-shadow: rgba(0,0,0,.3) 1px 1px 5px;-webkit-box-shadow: rgba(0,0,0,.3) 1px 1px 5px;box-shadow: rgba(0,0,0,.3) 1px 1px;opacity:.9;text-decoration:none;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;}
.portfolio a:hover {-moz-box-shadow:rgba(0,0,0,.5) 1px 1px 5px;-webkit-box-shadow:rgba(0,0,0,.5) 1px 1px 5px;box-shadow:rgba(0,0,0,.5) 1px 1px 5px;opacity:1;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);}

.portfolio a {background:#fff;display:block;padding:10px;height:180px;}
.portfolio img {width:200px;height:180px;outline:1px solid #eee;}