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-image: -webkit-gradient(linear, left top, left bottom, from(#214c15), to(#082c06));
    background-image: -moz-linear-gradient(top, #214c15, #082c06);
    position:relative;
    background-color:#082c06; /* In case of none-webkit!1 */
    margin-bottom: 40px;
}

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

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

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

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

.box.yellow {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5c43e), to(#e09d0e));
    background-image: -moz-linear-gradient(top, #f5c43e, #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;
}