html{background: #77d5fb url('bottom_bg.jpg') bottom center no-repeat;}
body{background: transparent url('top_bg.png') top center no-repeat;
width: 100%; height: 100%;
margin: 0 0;}


#navigation_container {
	margin: 0 auto;
	width: 900px;
}

#navigation li {
        list-style: none;
        display: block;
        float: left;
		margin: 1em 0.8em;
}

#navigation li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0;
        line-height: 28px;
}

#navigation li.active a:hover,
#navigation li a:hover {
        margin-top: 2px;
}

#navigation li.active {
        font-style: italic;
}

#navigation li.active a {
}


.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	
   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	border-radius: 2px;
	
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}

.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: 1px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -40px;
   left: -150px;
}


.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        right: -45px;
        top: -107px;
}

.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        top: -149px;
        right: -145px;
}