/* ---------------------------------------------------------------------------

  1 Million T-Shirts Master Styles
  http://www.1milliontshirts.com

  author: nGen Works
  http://www.ngenworks.com

--------------------------------------------------------------------------- */
@import url("reset.css");

/* --------------------------------------------------------------------------
	=Cufon hide until processed
--------------------------------------------------------------------------- */
.cufon-loading nav ul li a { display: none !important; }

/* --------------------------------------------------------------------------
  =layout
--------------------------------------------------------------------------- */

body { 
  background: url(images/_bg-tile.jpg) repeat 0 0;
  color: #1a1818;
  font: small/1.5em Helvetica, Arial, Verdana, sans-serif;
}
	
#container {
  margin: 0 auto;
  /*width: 952px;*/
  width: 710px;
}

#content {}

#content-main {}

#content-secondary {}
	
footer { background: url(images/_bg-footer.jpg) repeat-x 50% 0; clear: both; padding-top: 34px; height: 105px; }

/* ---------------------------------------------------------------------------
  =links
--------------------------------------------------------------------------- */

a:link { color: #6f482e; text-decoration: none; }
a:visited { color: #999; }
a:hover { color: #b9561e; text-decoration: underline; }

/* ---------------------------------------------------------------------------
  =typography
--------------------------------------------------------------------------- */

h1 { font-size: 2.5em; margin-bottom: 20px; }
h2 { font-size: 30px; margin-bottom: 10px; }
h3 { font-size: 24px; margin-bottom: 10px; text-transform: uppercase; }
h4 { font-size: 1.75em;	margin-bottom: 20px; }
h5 { font-size: 1.5em; margin-bottom: 20px; }
h6 { font-size: 1.25em;	margin-bottom: 20px; }

h1, h2, h3, h4, h5, h6 { color: #271c13; line-height: 1.0em; }

p { margin-bottom: 24px; }

/* ---------------------------------------------------------------------------
  =lists
--------------------------------------------------------------------------- */

ul { margin-left: 18px; }

article.post ul,
article.page ul {
  list-style: disc;
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------------------
  =logo
--------------------------------------------------------------------------- */
#logo {
  background: url(images/_bg-top.jpg) repeat-x 50% 0;
  margin-bottom: 32px;
  padding-top: 38px;
  height: 108px;
}

#logo a {
  background: url(images/logo-screen.png) no-repeat 0 0;
  display: block;
  margin: 0 auto;
  text-indent: -9999px;
  width: 952px;
  height: 80px;
}

/* ---------------------------------------------------------------------------
  =header
--------------------------------------------------------------------------- */
header.page { width: 710px; }

#hero { text-indent: -9999px; width: 710px; }
#home #hero { background: url(images/hero-home.jpg) no-repeat 0 0; height: 411px; }

/* ---------------------------------------------------------------------------
  =navigation
--------------------------------------------------------------------------- */

nav { background: url(images/div-line-nav.png) no-repeat bottom left; padding: 16px 0 14px 12px; }
nav ul { font-size: 24px; margin: 0; text-transform: uppercase; }

nav li {
  float: left;
  margin-right: 40px;
}

nav li a {
  color: #271c13 !important;
  display: block;
  padding-bottom: 3px;
  width: 100%;
  height: 100%;
}
nav li a:hover,
nav li.current a { color: #b9561e !important; text-decoration: none; }
nav li.current a { border-bottom: 3px solid #c0ab8c; padding-bottom: 0; }

/*nav li.current a { background-color: #dbcaac; }*/

/* ---------------------------------------------------------------------------
  =content-main
--------------------------------------------------------------------------- */
#content { float: left; margin-bottom: 20px; padding-bottom: 32px; position: relative; width: 710px; }

article.post,
article.page {
  background: url(images/div-line-vert.png) no-repeat bottom left;
  float: right;
  padding: 38px 20px 50px 110px;
  width: 413px;
  
  position: relative;
    left: -4px;
}
article.post .older-link { float: left; }
article.post .newer-link { float: right; }

article.post #date-stamp { 
  background: url(images/bg-date-stamp.png) no-repeat 0 0;
  color: #83b2c4;
  font-size: 15px;
  padding-top: 12px;
  text-align: center;
  text-indent: -4px;
  text-transform: uppercase;
  
  width: 74px; 
  height: 81px;
  
  position: absolute;
    top: 20px;
    left: 18px;
}
article.post #date-stamp .day-num { font-size: 41px; display: block; letter-spacing: -0.15em; line-height: 0.8em; margin-bottom: -8px; text-indent: -8px; }

/* article meta */
article.post .meta { font-size: 14px; line-height: 1.0em; text-transform: uppercase; }
article.post .meta .author { margin-right: 4px; }
article.post .meta .date { margin: 0 4px; }
article.post .meta .num-comments { margin-left: 4px; }

article.post { font-size: 12px; line-height: 18px; }
article.post .intro { font-size: 14px; font-weight: bold; line-height: 24px; }

/* article as page (without date badge) */
article.page { padding-left: 40px; width: 483px }

/* Recent posts */
#content #recent-posts { float: left; margin-top: 100px; width: 167px; }
#content #recent-posts h3 { background: url(images/div-line-recent-posts.png) no-repeat bottom left; color: #b9561e; padding-bottom: 10px; padding-left: 12px; }
#content #recent-posts ul { font-size: 14px; font-weight: bold; list-style: disc; margin-left: 30px; }
#content #recent-posts ul li { margin-bottom: 10px; padding-right: 10px; }
#content #recent-posts ul li a { display: block; }

/* ---------------------------------------------------------------------------
	=blog comments
--------------------------------------------------------------------------- */
#comments {
  background: url(images/div-line-nav.png) no-repeat top left;
  clear: both;
  padding: 0 24px 0 206px;
  
  position: relative;
    top: -4px;
}

#comments h2 { font-size: 24px; margin-bottom: 30px; padding-top: 44px; text-transform: uppercase; }

#comments article {
  background-color: #d7c8ac;
  margin-left: 72px;
  margin-bottom: 14px;
  
  position: relative;
}

#comments article header {
  background: url(images/comment-arrow.png) no-repeat 0 0;
  color: #b9561e;
  font-size: 11px;
  line-height: 1.0em;
  margin-left: -10px;
  margin-bottom: 12px;
  padding: 10px 12px 8px 20px;
  text-transform: uppercase;
}

#comments article header .comment-author { font-weight: bold; }
#comments article header .comment-author a { color: inherit; text-decoration: none; }
#comments article header .comment-author a:hover { color: #271c13; }
#comments article header .comment-date { float: right; }

#comments article aside {
  background-color: #f48218;
  width: 46px;
  height: 46px;
  
  position: absolute;
    top: 0;
    left: -72px;
}

#comments article p { line-height: 16px; margin: 0; padding: 0 12px 12px; }

/* site owner */
#comments article.site-owner header { background-position: 0 -50px; color: #f48218; }
#comments article.site-owner aside { background-color: #b9561e; }

/* comment form */
#comments form { margin-top: 0px; }
#comments form h2 { margin-bottom: 14px; }
#comments form fieldset { padding-left: 72px; }
#comments form label { font-size: 10px; text-transform: uppercase; }
#comments form input,
#comments form textarea { background-color: #d7c8ac; border: none; font-size: 16px; padding: 6px 8px; }

#comments form #comment-submit {
  background-color: #06283b;
  border: none;
  color: #83b2c4;
  cursor: pointer;
  display: block;
  float: right;
  font-size: 18px;
  line-height: 1.0em;
  padding: 2px 8px 4px;
  text-transform: uppercase;
}
#comments form #comment-submit:hover { background-color: #004d7a; }
/*#comments form #comment-submit:hover { background-color: #83b2c4; color: #06283b; }*/

/* ---------------------------------------------------------------------------
  =sidebar
--------------------------------------------------------------------------- */
#sidebar { float: right; width: 230px; margin-top: -468px; }

/* callouts */
#shirts-sent,
#send-shirt { margin-bottom: 14px; }

#send-shirt,
#how-help { display: block; text-indent: -9999px; }

/* T-Shirts sent / num shirts */
#shirts-sent { background: url(images/bg-num-tshirts.jpg) no-repeat 0 0; color: #e6d8be; padding: 18px 20px 10px 20px; height: 95px; position: relative; }
#shirts-sent h3 { background: url(images/div-line-num-shirts.png) no-repeat bottom left; color: #e6d8be; margin-bottom: 2px; padding-bottom: 8px; }
#shirts-sent .shirts-num { font-size: 50px; letter-spacing: -0.1em; text-align: right; }
#shirts-sent .dirty-wrapper {
  background: url(images/num-shirts-dirty-layer.png) no-repeat 0 10px;
  display: block;
  margin: 10px;
  width: 208px;
  height: 103px;
  
  position: absolute;
    top: 0;
    left: 0;
  z-index: 999;
}

/* Send your shirt */
#send-shirt { background: url(images/callout-send-shirt.jpg) no-repeat 0 0; height: 130px; }
#send-shirt:hover { background-position: 0 -130px; }

/* How to help */
#how-help { background: url(images/callout-how-help.jpg) no-repeat 0 0; height: 130px; }
#how-help:hover { background-position: 0 -130px; }

/* Facebook */
#facebook-callout { 
  background: url(images/div-line-sidebar.png) no-repeat bottom left;
  font-size: 24px;
  margin-bottom: 30px;
  padding: 16px 10px 17px;
  text-transform: uppercase;
}
#facebook-callout a { background-image: url(images/icon-facebook.png); }

/* Twitter */
#twitter-callout { font-size: 12px; line-height: 16px; margin-bottom: 26px; }
#twitter-callout h3 { background: url(images/div-line-sidebar.png) no-repeat bottom left; padding: 0 10px 12px; }
#twitter-callout h3 a { background-image: url(images/icon-twitter.png); }
#twitter-callout p { margin-bottom: 0; padding: 0 10px; }
#twitter-callout .meta { font-size: 10px; margin-top: 4px; text-transform: uppercase; }
#twitter-callout .twitter-time,
#twitter-callout .twitter-client { font-weight: bold; }

#twitter-callout #our-tweets { background: url(images/div-line-sidebar.png) no-repeat bottom left; margin-bottom: 12px; padding-bottom: 18px; }

#twitter-callout #tagged-tweets ul { margin-left: 0; }
#twitter-callout #tagged-tweets ul li { background: url(images/div-line-sidebar.png) no-repeat bottom left; margin-bottom: 6px; padding-bottom: 12px; }
#twitter-callout #tagged-tweets ul li.last { background: none; }

/* Flickr */
#flickr-callout { }
#flickr-callout h3 { background: url(images/div-line-sidebar.png) no-repeat bottom left; padding: 0 10px 12px; }
#flickr-callout h3 a { background-image: url(images/icon-flickr.png); }
#flickr-callout ul { margin-left: 0; }
#flickr-callout li { border: 1px solid #ae9b7e; float: left; margin-right: 7px; margin-bottom: 8px; width: 70px; height: 42px; }
#flickr-callout li a { background-repeat: no-repeat; background-position: 50% 50%; display: block; width: 100%; height: 100%; text-indent: -9999px; }
/*#flickr-callout li img { border: 1px solid #ae9b7e; vertical-align: middle; }*/
#flickr-callout li.row-end { margin-right: 0; }

#flickr-callout li.first { 
  background: url(images/flickr-main-bg.jpg) repeat 0 0;
  border: none;
  float: none;
  margin-right: 0;
  margin-bottom: 12px;
  padding: 10px;
  width: 210px;
  height: 150px;
}
/*#flickr-callout li.first img { border-width: 0; }*/

#flickr-callout .more { float: right; }

/* YouTube */
#youtube-callout { 
  background: url(images/div-line-sidebar.png) no-repeat bottom left;
  font-size: 24px;
  margin-bottom: 30px;
  padding: 16px 10px 12px;
  text-transform: uppercase;
}
#youtube-callout a { background-image: url(images/icon-youtube.png); }

/* Common */
#facebook-callout a,
#twitter-callout h3 a,
#flickr-callout h3 a,
#youtube-callout a { background-repeat: no-repeat; background-position: top right; color: #271c13 !important; display: block; height: 24px; }
#facebook-callout a:hover,
#twitter-callout h3 a:hover,
#flickr-callout h3 a:hover,
#youtube-callout a:hover { color: #b9561e !important; text-decoration: none; }

#twitter-callout h4,
#flickr-callout h4 { margin-bottom: 8px; padding: 0 10px; }

/* ---------------------------------------------------------------------------
  =footer
--------------------------------------------------------------------------- */
footer section { margin: 0 auto; position: relative; width: 952px; }
footer a { color: #271c13; }
footer #copyright { font-size: 18px; margin-left: 12px; margin-bottom: 10px; text-transform: uppercase; }
footer #send-to { font-size: 16px; margin-left: 12px; text-transform: uppercase; }
footer #site-by { position: absolute; top: -6px; right: 0; }
footer #site-by a { background: url(images/site-by-ngen.png) no-repeat 0 0; display: block; text-indent: -9999px; width: 124px; height: 29px; }
footer #harmony-badge { position: absolute; top: 40px; right: 0; }
footer #harmony-badge a { background: url(images/powered_by_harmony-8bit.png) no-repeat 0 0; display: block; text-indent: -9999px; width: 160px; height: 25px; }

/* ---------------------------------------------------------------------------
  =misc
--------------------------------------------------------------------------- */
.last { border: none !important; }

.older-link,
.newer-link,
.more a { background-color: #06283b; color: #83b2c4 !important; display: block; font-size: 18px; line-height: 1.0em; padding: 2px 8px 4px; text-transform: uppercase; vertical-align: middle; }

.older-link:hover,
.newer-link:hover,
.more a:hover { background-color: #83b2c4; color: #06283b !important; text-decoration: none; }

/* ---------------------------------------------------------------------------
  =Forms
--------------------------------------------------------------------------- */
form { font-size: 12px; line-height: 1.4em; }

form p { margin-bottom: 12px; }

form label {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
}

form .confirm-field { display: none; }

form input,
form textarea {
  border: 1px solid #ccc;
  font-size: 14px;
  padding: 4px 3px;
  width: 96%;
}
form textarea { height: 10em; }

form #submit { 
  background-color: #ccc;
  border: none;
  cursor: pointer;
  display: block;
  padding: 8px 20px;
  text-transform: uppercase;
	
  /*width: 106px;*/
  /*height: 27px;*/

  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}
form #submit:hover { background-color: #333; color: #eee; }

form p.checkbox { padding-left: 26px; }
form p.checkbox label { display: inline; text-align: left; }
form p.checkbox input { border: none; display: inline; float: left; margin-left: -26px; margin-right: 6px; width: auto; }

/* errors
-------------------------------------- */
.form-message {
  margin-bottom: 20px;
  padding: 7px 15px;
  color: #789700;
  border: 2px solid #dcdcdc;
  font-weight: bold;
}

.form-message.error { background-color: #f7c2c2; border-color: #f39797; }

.form-message p {
  margin-bottom: 0;
  padding-left: 18px;
}

.form-message ul { 
  margin: 0;
  margin-left: 0 !important;
  list-style: none;
}

.error { color: #333; }

.error li, label.error {
  padding: 0 0 0 18px;
  margin: 3px 0;
  font-weight: normal;
  background: url(images/icon_error.gif) no-repeat 0 50%;
}

.error span, label span { 
  color: #c00; 
  font-weight: bold;
}

label.required { color: #961616; }
label.required span { background: url(images/_required.png) no-repeat 50% 50%; width: 10px; display: inline-block !important; text-indent: -9999px; }

/* ---------------------------------------------------------------------------
  =windowshade
--------------------------------------------------------------------------- */
#windowshade {
  background-color: rgba(51,51,51,0.75);
  *background: url(images/windowshade.png) repeat 0 0;
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
    top: 0;
    left: 0;
  z-index: 200;
}

/* ---------------------------------------------------------------------------
  =clearing
--------------------------------------------------------------------------- */

#container:after,
ul:after,
#flickr-callout:after,
#flickr-callout div:after {
  content: "."; 
  display: block; 
  height: 0;
  clear: both; 
  visibility: hidden;
}