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

Title : Soul Survivor Homepage Stylesheet
Author : Soul Survivor
URL : http://www.soulsurvivor.nl
Description : BASE Screen CSS

Coding by Elmar / http://elmarbeckmann.com
Coding and design by Arjen Scherff / http://aratramba.nl
(c)2007, Soul Survivor

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

body, html{
margin: 0;
padding: 0;
color: white;

}
body{
font: 62.5% Verdana, Arial, "Microsoft Sans Serif", verdana, geneva, helvetica, sans-serif;
background: #1B1B1B;
}
#container{
text-align: left;
}

#header h1, #header h2, #header ul{
display: none;
}

.cnt{
text-align: center;
}
.innercnt{
width: 960px;
margin: 0 auto;
position: relative;
text-align: left;
}

h1, h2, h3, h4, h5{
margin: 0;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Position Is Everything Clearfix 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 header 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#quicklinks{
height: 30px;
background: #282828;
position: relative;
z-index: 2;
}

  #quicklinks ul#inner{
  padding: .7em 0 0 0;
  margin: 0;
  position: absolute;
  right: 0;
  list-style-type: none;
  }
  
  #quicklinks ul#outer{
  padding: .7em 0 0 0;
  margin: 0;
  position: absolute;
  left: 0;
  list-style-type: none;
  }
    
    #quicklinks ul li{
    position: relative;
    float: left;
    margin-left: .6em;
    color: #7799AA;
    padding: .20em;
    width: 62px;
    font-size: 1.1em;
    text-align: center;
    background: #414040 url(../../img/button_rounded_gray_left.gif) no-repeat top left;
    }
    
    #quicklinks ul li.big{
    width: 100px;
    }
    
      #quicklinks ul li a{
      color: #79A;
      text-decoration: none;
      }
      
      #quicklinks ul li a:hover{
      color: #fff;
      }
      
      #quicklinks ul li.emphasized a{
      color: #E0E0E0;
      text-decoration: none;
      }
      
      #quicklinks ul li.emphasized a:hover{
      color: #000;
      }
    
      #quicklinks ul li span{
      position: absolute;
      right: 0;
      top: 0;
      height: 20px;
      width: 6px;
      background: url(../../img/button_rounded_gray_right.gif) no-repeat top right;
      }
      
    #quicklinks ul li.emphasized{
    color: #E0E0E0;
    background: #4B626F url(../../img/button_rounded_blue_left.gif) no-repeat top left;
    }
      #quicklinks ul li.emphasized span{
      background: url(../../img/button_rounded_blue_right.gif) no-repeat top right;
      }
      
      
    #quicklinks ul li .quicklinks_dropper{
      margin: 0;
      display: none;
      padding: .3em .8em .3em 0;
      list-style-type: none;
      position: absolute;
      left: -78px;
      top: 20rpx;
      width: 139px; 
      background: #414040 url(../../img/quick_gray_dropper_background.gif);
      border: 1px solid #323232; 
    }
    
    #quicklinks ul li.emphasized .quicklinks_dropper{
    background: #4B626F url(../../img/quick_blue_dropper_background.gif);
    border: 1px solid #354853;
    }
    
    #quicklinks ul li:hover ul,
    #quicklinks ul li.hovered ul{
    display: block;
    }
    
      #quicklinks ul li .quicklinks_dropper li{
      background: none;
      display: inline;
      text-align: left;
      width: 93%;
      border-bottom: 1px solid #323232;
      line-height: 1.5em;
      }
    
      #quicklinks ul li.emphasized .quicklinks_dropper li{
      border-bottom: 1px solid #374C57;
      }
      
          #quicklinks ul li .quicklinks_dropper li a{
          text-decoration: none;
          color: white;
          width: 100%;
          height: 100%;
          display: block;
          padding: 0;
          text-indent: 10px;
          background: url(../../img/arrow.gif) no-repeat 1% .6em;
          }
          
          #quicklinks ul li .quicklinks_dropper li a:hover{
          background: url(../../img/arrow.gif) no-repeat 1% .6em;
          color: #1E1E1E;
          }
          #quicklinks ul li.emphasized .quicklinks_dropper li a:hover{
          background: url(../../img/arrow.gif) no-repeat 1% .6em;
          color: #282828;
          }

#header{
background: #8E0004 url(../../img/header.jpg) no-repeat 50% 0;
background: #005d8e url(../../img/header.jpg) no-repeat 50% 0;
height: 250px;
position: relative;
z-index: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 menu 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#main_nav{
padding: 0;
height: 35px;
margin: 0;
background: url(../../img/menu_background.gif) top left;
}

#main_nav .innercnt{
z-index: 500;
}

  #main_nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  background: url(../../img/menu.gif) top left;
  }
  
    #main_nav ul li{
    float: left;
    margin: 0;
    padding: 0;
    height: 35px;
    position: relative;
    z-index: 109;
    }
    
    /*
	#main_nav ul li#menu_events{ width: 109px;   }
    #main_nav ul li#menu_soul_action{ width: 108px;   }
    #main_nav ul li#menu_soul_worship{ width: 108px;   }
    #main_nav ul li#menu_magazine{ width: 108px;   }
    #main_nav ul li#menu_shop{ width: 109px;   }
    #main_nav ul li#menu_media{ width: 116px;   }
	*/
	
	#main_nav ul li#menu_events{ width: 77px;   }
    #main_nav ul li#menu_soul_action{ width: 113px;   }
    #main_nav ul li#menu_soul_worship{ width: 123px;   }
    #main_nav ul li#menu_magazine{ width: 93px;   }
    #main_nav ul li#menu_shop{ width: 60px;   }
    #main_nav ul li#menu_media{ width: 84px;   }
    
      #main_nav ul li a{
      text-decoration: none;
      margin: 0;
      padding: 0;
      border: none;
      width: 100%;
      height: 100%;
      display: block;
      }
      
      #main_nav ul li a img{
      display: none;
      }
      
      #main_nav ul li:hover a img,
      #main_nav ul li.hovered a img{
      display: block;
      border: none;
      text-decoration: none;
      }
      
      #main_nav ul li a:hover{
      border: none;
      }
      
      /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Menu dropper - something that 
      drops always goes down imo, so we
      will call this one the menu dropper
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      
      #main_nav ul li ul.menu_dropper{
      margin: 0;
      display: none;
      padding: .5em;
      list-style-type: none;
      position: absolute;
      left: 0;
      width: 250px;
      background: #282828 url(../../img/dropper_background.gif) top left;
      border: 1px solid #444;
      }
      
      #main_nav ul li.hovered ul.menu_dropper{
      display: block;
      }
      
      #main_nav ul li:hover ul.menu_dropper{
      display: block; 
      }
      
        #main_nav ul li ul.menu_dropper li{
        float: none;
        font-size: 1.1em;
        border-bottom: 1px solid #3B3B3B;
        margin: 0;
        height: auto;
        line-height: 2em;
        }
        
          #main_nav ul li ul.menu_dropper li a{
          background: url(../../img/arrow.gif) no-repeat 1% 1em;
          text-decoration: none;
          color: white;
          width: 99%;
          height: 100%;
          display: block;
          text-indent: 1em;
          padding: .2em 0 .2em .2em;
          }
          
          #main_nav ul li ul.menu_dropper li a:hover{
          background: #232323 url(../../img/arrow.gif) no-repeat 1% 1em;
          color: #CFE0FF;
          }
          
          #main_nav ul li ul.menu_dropper li p{
          font-size: .9em;
          margin: 0 0 .2em 0;
          line-height: 1.6em;
          padding-left: 1.2em;
          width: 85%;
          }
          
          
      /* magazine dropper */
      #main_nav ul li#menu_magazine ul.menu_dropper{
      width: 300px;
	  left: -94px;
      }
      
      #main_nav ul li#menu_magazine ul.menu_dropper em{
      font-style: normal;
      color: #CFE0FF;
      }

      
      /* shop dropper */
      #main_nav ul li#menu_shop ul.menu_dropper{
      margin: 0;
      padding: .5em;
      list-style-type: none;
      left: -107px;
      width: 220px;
      text-transform: capitalize;
      }
      
        #main_nav ul li#menu_shop ul.menu_dropper li{
        padding: 0;
        }
    
        
              #main_nav ul li#menu_shop ul.menu_dropper li a img{
              width: 50px;
              float: left;
              border: 3px solid #222;
              display: block;
              }
              
              #main_nav ul li#menu_shop ul.menu_dropper li p{
              font-size: .8em;
              margin: .4em .2em .4em 0;
              line-height: 1.6em;
              padding-left: 0;
              width: 100%;
              border-top: 1px solid #3F3F3F;
              border-bottom: 1px solid #3F3F3F;
              height: 60px;
              overflow: hidden;
              }
              
                #main_nav ul li#menu_shop ul.menu_dropper li p a{
                text-indent: 0;
                }
                
                #main_nav ul li#menu_shop ul.menu_dropper li p a:hover{
                color: #D2FFC5 !important;
                }
      
        #main_nav ul li#menu_shop ul.menu_dropper li.checkout{
        border: none;
        background: #111 url(../../img/lighter_striped_background.gif) repeat top left;
        height: 4em;
        margin: 0;
        padding: 1.5em 0 0 0;
        }
      
          #main_nav ul li#menu_shop ul.menu_dropper li.checkout a{  
          width: 100%;
          text-align: center;
          text-indent: 0;
          font-size: 1.4em;
          font-family:  "Trebuchet MS", Tahoma, Verdana, Arial;
          text-transform: uppercase;
          font-weight: bold;
          display: block;
          padding: 0;
          background: none;
          }
          
          #main_nav ul li#menu_shop ul.menu_dropper li.checkout a:hover{
          text-decoration: underline;
          color: #CFE0FF;
          background: none;
          }
          
      /* media dropper */
      #main_nav ul li#menu_media ul.menu_dropper{
      margin: 0;
      padding: .5em;
      list-style-type: none;
      left: -167px;
      width: 220px;
      text-transform: capitalize;
      }
      
      
      /* the border */
      
      #main_nav ul li ul span.border{
      position: absolute;
			top: -1px;
			left: 0;
			background: #282828 url(../../img/dropper_background.gif) bottom right;
			border: none;
			height: 1px;
			z-index: 120;
			margin: 0;
			padding: 0;
			line-height: 0;
			display: block;
			font-size: 0;
			}
			
			#main_nav ul li#menu_media ul span.border{
      left: 135px;
      width: 95px !important;
			}
			
			#main_nav ul li#menu_shop ul span.border{
      left: 25px;
			}

      




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Footer
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer{
background: #1b1b1b url(../../img/footer_background.gif) repeat-x bottom left;
margin: 6em 0 0 0;
line-height: 34px;
}

  #footer ul{
  list-style-type: none;
  margin: 0 0 0 45px;
  padding: 0;
  font-size: 1em;
  display: block;
  height: 30px;
  }
  
    #footer ul li{
    display: inline;
    border-right: 1px solid #696969;
    padding: 0 .4em;
    color: #fff;
	font-size: 1.1em;
    }
    
      #footer ul li.last_list_item{
      border: none;
      }
      
        #footer ul li a{
        color: white;
        text-decoration: none;
        }
        
        #footer ul li a:hover{
        text-decoration: underline;
        }
		
		#footer ul li a img{
		border: none;
		width: auto;
		height: auto;
		text-decoration: underline;
		}
        
		
		
		
		
		
   ul#footer_info{
  list-style-type: none;
  padding: 4em 0 1.2em 0;
  font-size: 1em;
  margin: 0;
  }
  
  .other ul#footer_info{
  padding: .4em 0;
  margin: 0 0 0 0;
  line-height: 30px;
  }
  
  .other .soulmate ul#footer_info{
  margin-bottom: 10px;
  }
  
  .homepage ul#footer_info,
  .nieuws ul#footer_info{
   font-size: .9em; 
  }

     ul#footer_info li{
    display: inline;
    border-right: 1px solid #696969;
    padding: 0 .4em;
    color: #fff;
    }
    
       ul#footer_info li.last_list_item{
      border: none;
      }
      
         ul#footer_info li a{
        color: white;
        text-decoration: none;
        }
        
         ul#footer_info li a:hover{
        text-decoration: underline;
        }
		
		 ul#footer_info li a img{
		border: none;
		text-decoration: none;
		display: inline;
		width: auto;
		height: auto;
		}
		
        
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 Tables
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/        
        
table {
	width: 465px;
	padding: .1em;
	margin: 0 0 2em 0;
	border: 1px dotted #3C3C3C;
}

caption {
	padding: 0 0 5px 0;
	width: 465px;	 
	font: 2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	margin: 0 0 0 15px;
	color: white;
}

td {
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #1B1B1B;
}


td.alt {
	background: #F5FAFA;
	color: #1B1B1B;
}

th {
	text-transform: none;
	color: #1B1B1B;
	background: #CAE8EA url(../../img/table_background.gif);
	text-align: left;
	padding: 6px 6px 6px 12px;
	font: 1.1em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.heading {
	font: bold 1.1em Verdana, Arial, "Microsoft Sans Serif", verdana, geneva, helvetica, sans-serif;
	color: #C5D8FF;
	text-transform: uppercase;
	background: #2A2A2A url(../../img/lighter_striped_background.gif);
}

table.normal {
	margin: 0; padding: 0;
	line-height:100%;
	font: 1.1em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
} 
table.normal td {
	margin: 0;
	padding: 0 0 4px 0;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 input
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/   

form{
margin: 0;
}
input,select{
 color: #111;
 font: .9em Verdana, Arial, "Microsoft Sans Serif", verdana, geneva, helvetica, sans-serif;
}

 textarea{
 color: #111;
 font: .9em Verdana, Arial, "Microsoft Sans Serif", verdana, geneva, helvetica, sans-serif;
}
 
.button{
	border: 2px solid #777;
	background: #666 url(../../img/arrow.gif) no-repeat 5px 50%;
	color: white;
	text-indent: 4px;
}
	
.button_extra{
  border: 2px solid #bbb;
  background: none;
}

.special{
border: 3px #fff solid;
width: 30px;
}

.extraspecial{
	border: 1px #555 outset;
	background: #222;
	color: #fff;
	padding: 3px;
}