body, html{
  margin:0;
  padding:0;
}

body{
  background:#292929;
  font-family: Arial, sans-serif;
  font-size:12px;
  color:#fff;
}

h1, h2, h3, h4, p{
  margin:0;
  padding:0;
  margin-bottom:.7em;
}

h1{
    font-size:3em;
}

a img{
    border:0;
}

/* Main grid */

#wrapper{
  background:#262626;
  border:3px solid #232323;
  border-top-width:0;
  
  overflow:hidden;
}

#wrapper, #footer{
    width:900px;
    margin:0 auto;
}

#header, #main{
  float:left;
  width:840px;
  margin:30px;
}

#footer{
    margin-top:2em;
    text-align:center;
    color:#fff;
    font-size:.8em;
    margin-bottom:10em;
}

#footer img{
    position:relative;
    top:5px;
}


/* Takk */

#takk{
    margin-bottom:1em;
}

#takk h1{
    margin-bottom:0;
}

#takk .box_inner{
    margin:0;
    padding:.5em 2em;
}

/* Home page */

.box.green .tshirt_image{
  background-image:url(/images/tskjorte_2008.png);
}

.box.blue .tshirt_image{
  background-image:url(/images/tskjorte_2007.png);
}

.box.red .tshirt_image{
  background-image:url(/images/tskjorte_2006.png);
}

.box.yellow .tshirt_image {
  background-image:url(/images/tskjorte_2009.png);
}

#newsletter {
  margin:30px 0;
}

#newsletter h2{
  font-size:1.5em;
}

#newsletter #left_newsletter_column {
  float:left;
  width:375px;
}

#newsletter #right_newsletter_column {
  float:right;
  width:375px;
}

#newsletter label,
#newsletter button,
#newsletter input{
  display:block;
}

#newsletter button {
  margin-top:1em;
}

#songs{
	margin-top:30px;
	text-align:center;
}

#songs #play_song,
#songs #download_lyrics{
	float:none;
	display:inline-block;
	width:140px;
}

/* Header */

#header{
  margin-bottom:0; /* Because #main has a 30px top margin */
  overflow:hidden;
}

#header_image{
  display:block;
  height:52px;
  width:234px;
  background-image:url(/images/logo_bluesosken.png);
}

#header_bar{
  display:block;
  float:left;
  height:3px;
  width:600px;
  background:#fff;
  margin-top:.7em;
  margin-right:.5em;
  margin-left:3em;
}

#header_text{
  float:left;
  font-weight:bold;
  margin-bottom:0;
}

/* Boxes */

.box{
  display:block;
}

.box_border{
  border-width:4px;
  border-style:solid;
  overflow:hidden;
}

.box_inner{
  margin:20px;
  overflow:hidden;
}

.box.main{
  width:100%;
}


/* The main mox needs more paddingz!!!. Here be dragons. */

.box.main h2{
	font-size:3em;
}

.box.main.green .arial_black{
	margin-left:140px;
}

.box.main.green .price{
	left:200px;
}

.box.main.green .black_button{
	right:150px;
}

.box.main .tshirt_image{
	right:150px;
}

.box.left,
.box.right{
  width:400px;
  float:left;
  margin-top:30px;
}

.tshirt_home .box_inner{
  height:225px;
}

.box.black .box_inner,
.box.white .box_inner{
	height:auto;
}

.box.left{
  margin-right:40px;
}

.box.green{
  background: -webkit-gradient(linear, left top, left bottom, from(#214c15), to(#082c06));
	position:relative;
  background-color:#082c06; /* In case of none-webkit!1 */
  margin-bottom: 40px;
}

.box.blue{
  background: -webkit-gradient(linear, left top, left bottom, from(#5eaceb), to(#1866a3));
  position:relative;
  background-color:#1866a3;
}

.box.red{
  background: -webkit-gradient(linear, left top, left bottom, from(#ff525a), to(#e80014));
  position:relative;
  background-color:#e80014;
  margin-bottom: 40px;
}

.box.black{
  background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#000));
  background-color:#000;
}

.box.white{
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-color:#fff;
  color:#000;
}

.box.yellow {
  background: -webkit-gradient(linear, left top, left bottom, from(#f5c43e), to(#e09d0e));
  position:relative;
  background-color:#f2b22a;
  color:#000;
}

.article .box_border{
  /*
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-color:#fff;
  color:#000;
  */
	padding: 0 160px 0 100px;
}

.article h2, .article h3 {
  color:#fff;
}

.box.green .box_border{
  border-color:#124620;
}

.box.blue .box_border{
  border-color:#1b75bb;
}

.box.red .box_border{
  border-color:#ff1c24;
}

.box.black .box_border{
  border-color:#111;
}

.box.white .box_border{
  border-color:#eee;
}

.box.yellow .box_border {
  border-color:#f2b22a;
}

/*
.box.article .box_border{
  border-color:#eee;
}
*/

/* Specific box stylingz */

.box.green h1{
  font-size:4em;
  margin:0;
  padding:0;
}

.tshirt_home p,
.tshirt_home h2{
    width:170px;
    position:absolute;
    z-index:2;
}

.tshirt_home h2{
    top:60px;
}

.tshirt_home p.price{
    position:absolute;
    top:170px;
    left:40px;
    font-style:italic;
}

.tshirt_home p.price span{
    font-size:4em;
    font-weight:bold;
    display:block;
}

.tshirt_home a.black_button{
    position:absolute;
    right:20px;
    bottom:20px;
}


.tshirt_image{
  background-repeat:no-repeat;
  display:block;
  width:348px;
  height:372px;
  position:absolute;
  right:-40px;
  top:-30px;
}


/*####################
Sjappa!
####################*/

#back_to_home{
    float:right;
    margin-bottom:1em;
}

#tshirt_inventory h1{
    margin-bottom:0;
}

#tshirt_inventory h2,
#tshirt_cart h2,
#submit_cart h2{
    font-size:1.5em;
}

#tshirt_inventory p#tshirt_intro_text{
    width:500px;
}

#tshirt_inventory .tshirt{
  display:block;
  float:left;
  width:160px;
  padding:1em 0;
  margin-right:40px;
  text-align:center;
  border:1px transparent;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
}

#tshirt_inventory .tshirt.rightmost {
  margin-right:0;
}

#tshirt_inventory .tshirt ul,
#tshirt_inventory .tshirt li{
  margin:0;
  padding:0;
  list-style-type:none;
}

#tshirt_inventory .tshirt.last{
  margin-right:0;
}

#tshirt_inventory .tshirt .black_button{
    margin-top:1em;
}

#tshirt_inventory .cartButton{
  margin-top:10px;
}

#tshirt_cart{
  margin-top:30px;
}

#tshirt_cart_listing_wrapper{
  margin:0 50px;
}

ul#tshirt_cart_listing,
#tshirt_cart_listing li{
  margin:0;
  padding:0;
  list-style-type:none;
}


#tshirt_cart_listing .listingContainer{
  float:left;
  text-align:center;
  width:224px;
  margin-bottom:30px;
}

ul.listingItem,
ul.listingItem li{
  margin:0;
  padding:0;
}

#tshirt_cart_listing .listingContainer .listingItem{
  position:relative;
  text-align:center;
}

#tshirt_cart_listing .black_button{
    position:absolute;
    top:100px;
    left:100px;
}


#tshirt_cart_listing .cartButton{
  position:absolute;
  top:100px;
  left:80px;
}

#tshirt_cart_summary{
  border-top:2px solid #000;
  padding-top:2em;
}

#tshirt_cart_summary .count{
  float:left;
  width:50%;
}

#tshirt_cart_summary .price{
  float:right;
  width:50%;
  text-align:right;
}

#tshirt_cart_summary h3{
  margin:0;
  padding:0;
  font-size:1.6em;
}

#submit_cart{
  margin-top:30px;
}

#submit_cart .form_column{
  width:250px;
  float:left;
  margin-right:5px;
}

#submit_cart .form_column input,
#submit_cart .form_column textarea{
  padding:3px;
  margin-bottom:10px;
  width:220px;
}

#submit_cart .form_column textarea{
  height:80px;
}

#submit_cart .form_column a.cartButton{
  margin-left:20px;
  margin-top:60px;
}

/* Those black buttons */

.black_button{
  height:20px;
  line-height:20px;

  display:block;
  padding:0 1.5em;
  font-size:.8em;
  float:left;
  
  font-family: "Arial Black", Arial, sans-serif;
  text-transform:uppercase;
  
  background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#111));
  background-color:#333;
  border:1px solid #393939;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
}

.black_button:active{
    background: -webkit-gradient(linear, left top, left bottom, from(#111), to(#555));
}

/*####################
Stuff
####################*/

.arial_black{
  font-family: "Arial Black", Arial, sans-serif;
  text-transform:uppercase;
}

p.left_column{
  float:left;
  margin-right:2em;
}

p.right_column{
  float:left;
}

p.left_column,
p.right_column{
  width:200px;
}

/*####################
Utilities
####################*/

.hidden{
  display:none;
}

.clear{
  clear:both;
}