/* CSS Document for Alpha Crucis Ensemble */

body {
 margin: 0;
 padding: 0;
 background: #080808;
 font-family: garamond, georgia;
}

#wrapper {
  min-width: 800px;
  margin: 0;
  background: #080808 url('../images/background.jpg') no-repeat scroll top center;
}

  #header {
    background-color: transparent;
    width: 800px;
    height: 323px;
    margin: auto;
    display: block;
  }
	 /* Make logo clickable */
    #header h1 {
      font-size: 0;
      color: transparent;
    }
    #header h1 a {
      margin: auto;
      width: 800px;
      height: 323px;
      display: block;
    }
  
  #body {
    background-color: #FFFFFF;
    padding: 40px 0 30px 0;
    margin: auto;
    width: 800px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-border-radius:10px;
  }
  	
    #body h1 {
      color: #535353;
      font-size: 55pt;
      margin: 40px 0 50px 30px;
    }
    
    /* Homepage picture thumbnails */
    #body a.thumbnail, #body a.thumbnail:visited {
      float: left;
      text-decoration: none;      
      color: #FFFFFF;
      font-size: 18pt;
      text-align: center;
      height: 130px;
      width: 230px;
      margin: 0 0 0 10px;
      background-color: #FFFFFF;
      -webkit-border-radius:10px;
      -khtml-border-radius:10px;
      -moz-border-radius:10px;
    }
      #body a.thumbnail span {
        position: relative; 
        top: 100px;
      }
    #body a.thumbnail:hover, #body a.thumbnail:active {
      color: #E6C076;
    }
    #body h1.thumbnail {
      margin: 0;
      height: 140px;
      float: left;
    }
    a#about {background: #000000 url('../images/homelinks/home-about.jpg') no-repeat top;}
    a#concerts {background: #000000 url('../images/homelinks/home-concerts.jpg') no-repeat center;}
    a#media {background: #000000 url('../images/homelinks/home-media.jpg') no-repeat center;}
    a#about:hover {background: #000000 url('../images/homelinks/home-about-rollover.jpg') no-repeat top;}
    a#concerts:hover {background: #000000 url('../images/homelinks/home-concerts-rollover.jpg') no-repeat center;}
    a#media:hover {background: #000000 url('../images/homelinks/home-media-rollover.jpg') no-repeat center;}
    
    /* First article has different properties */
    div#article_header {
      background: #FFFFFF no-repeat top right;
      min-height: 200px;
      padding: 210px 0 0 0;
    }
      div#article_header p {
        font-size: 12pt;
        line-height: 150%;
      }
      div#article_header h3 {
        padding: 10px 0 0 24px;
      }
      div#article_header ul {
        list-style-type: none;
        padding: 10px 0 0 24px;
        margin: 0;
      }
        div#article_header ul li {
          padding: 0;
          margin: 0;
          line-height: 150%;
        }
        
    /* Most of the pages rely on this article div */
    div.article {
      background: #FFFFFF url('../images/index-banner.png') repeat-x;
      padding: 0 0 40px 0;
    }
      div.article h2 {
        font-size: 28pt;
        color: #535353;
        letter-spacing: 1px;
        margin: 30px 10px 0 30px;
        width: 630px;
      }
      div.article h3 {
        font-size: 20pt;
        color: #535353;
        letter-spacing: 1px;
        margin: 30px 10px 0 30px;
	  }
	  div.article h4 {
        font-size: 12pt;
        color: #535353;
        letter-spacing: 1px;
        margin: 30px 10px 0 30px;
	  }
       div.article h3.date {
          font-size: 20pt;
          color: #535353;
          letter-spacing: 1px;
          float: right;
          margin: -28px 0 0 0;
          padding: 0 0 0 20px;
          width: 120px;
          height: 40px;
          line-height: 40px;
          background: #CECECE url('../images/date.png') repeat-x;
          -webkit-border-bottom-left-radius:10px;
          -webkit-border-top-left-radius:10px;
          -khtml-border-radius-bottomleft:10px;
          -khtml-border-radius-topleft:10px;
          -moz-border-radius-bottomleft:10px;
          -moz-border-radius-topleft:10px;
        }
        p {
          margin: 0;
          padding: 30px 60px 0 60px;
          font-size: 12pt;
          line-height: 150%;
        }
      
    /* All inline links */
    #body a, #body a:visited {
      color: #535353;
      font-size: 12pt;
      font-weight: bold;
    }
    #body a:hover, #body a:active {
      color: #E6C076;
      text-decoration: none;
    }
      
      /* Special youTube paragraphs */
      p.youtube {
        width: 350px;
        margin: auto;
        text-align: center;
      }
        p.youtube b {
          font-size: 12pt;
          font-weight: normal;
        }
    
    	#body div.gallery {
			
		}
			#body div.gallery ul {
				list-style-type: none;
				width: 720px;
				margin: 30px 0 0 20px;
			}
				#body div.gallery ul li {
					display: inline;
					margin: 9px 9px;
					padding: 0;
				}
					#body div.gallery ul li a, #body div.gallery ul li a:visited {
			  			  border: 0;
					}
					#body div.gallery ul li a:hover, #body div.gallery ul li a:active {
						  border: 0;
					}
				
    /* Specialised article divs for About page */
    div.article_about {
      background: #FFFFFF no-repeat top right;
      min-height: 200px;
      padding: 0 0 40px 0;
    }
	    div.article_about h2 {
	        font-size: 32pt;
	        color: #E6C076;
	        letter-spacing: 1px;
	        padding: 100px 0 20px 30px;
	      }
	      div.article_about p {
	        font-size: 12pt;
	        line-height: 150%;
	      }
   #about_menu {
		background: #F2F2F2;
		border: 1px solid #CECECE;
		margin: 20px 0 0 60px;
		padding: 0 0 20px 0;
		width: 320px;
	}
	
	 /* Contact form div */
	 #contact_form {
	    padding: 0 0 40px 60px;
	  }
	    #contact_form input, #contact_form textarea {
	      font: 18px bold garamond, georgia, serif;
	      border: 1px solid #000000;
	      margin: 3px 0 3px 0; 
	    }
	    #contact_form input {
	      padding: 4px 0 4px 38px;
	      background: #FFFFFF no-repeat scroll 2% 50%;
	    }
	   
	   /* Concerts' page special addons */
		div.concert_details {
	  		background: #F2F2F2;
	  		border: 1px solid #CECECE;
	  		margin: 20px 0 0 60px;
	  		padding: 5px 5px 20px 5px;
	  		max-width: 680px;
	  		-webkit-border-radius:10px;
	      -khtml-border-radius:10px;
	      -moz-border-radius:10px;
	    }
	    th {
	      text-align: right;
	      padding: 0 10px 0 0;
	      vertical-align: top;
	    }
    
  #footer {
    background: #535353 url('../images/bg.jpg') repeat-x;
    margin: 0 auto 10px auto;
    width: 765px;
    height: 40px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -khtml-border-radius-bottomleft:10px;
    -khtml-border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
  }
    #footer ul {
      margin: 0;
      list-style: none;
      font-size: 14pt;
      color: #FFFFFF;
      position: relative;
      left: 100px;
    }
    
      #footer ul li {
        float: left;
        margin: 0;
      }
      
      #footer ul li a, #footer ul li a:visited {
        padding: 10px 20px 10px 20px;
        color: #FFFFFF;
        font-weight: bold;
        display: block;
        text-decoration: none;
      }
      
      #footer ul li a:hover, #footer ul li a:active {
        color: #E6C076;
      }
  
  #copy {
    margin: 30px auto 80px auto;
    width: 765px;
    height: 20px;
  }
    #copy ul {
      margin: 0;
      list-style: none;
      font-size: 10pt;
      color: #FFFFFF;
      position: relative;
      left: 10px;
    }
    
      #copy ul li {
        float: left;
        margin: 0 10px 0 0;
      }
      
      #copy ul li a, #footer ul li a:visited {
        color: #FFFFFF;
      }
      
      #copy ul li a:hover, #footer ul li a:active {
        color: #E6C076;
        text-decoration: none;
      }

/* Admin forms properties */
div.admin_form {
	margin: 30px 60px 0 60px;
	
}
	div.admin_form input {
		width: 200px;
		border: 1px solid #000000;
		
	}
	div.admin_form textarea {
		width: 99%;
		border: 1px solid #000000;
		height: 200px;
	}

	div.admin_article0 {
		background-color: #EFEFEF;
	}

	div.admin_article1 {
		background-color: #FFFFFF;
	}
	
		span.trigger {
			cursor: pointer;
			display: block;
			padding: 5px;	
        }