#navigation {
	margin:0px;
	height:30px; /* Changes the height of the buttons before hover*/
	width:1060px;
	display:block;
	padding:0px;
	margin:0px; /* Changes the spacing at the top of the navigation.*/
	border:1px solid; /* Puts a black line around the navigation.*/
	border-radius:7px; /* Changes the curved edges around the entire navigation before hover. */
	border-color:#000000;
	
} 
	
#navigation > ul {
	height:30px;
	list-style:inside none;
	padding:0;
	margin:0;
} 

#navigation > ul > li {
	background:url(../images/button_before.png);
	list-style:inside none;
	float:left; 
	display:block; 
	position:relative;
} 

/* Makes changes to the text on the buttons.*/
#navigation > ul > li > a {
	outline:none; 
	display:block; 
	position:relative; 
	padding:0px 20px; 
	font-weight:bold; 
	font-size:13px;
	font-face:Times New Roman, Times, Serif; 
	text-align:center; 
	text-decoration:none; 
	text-shadow:0px -1px 0px rgba(0, 0, 0, 1);
	/* padding-right:25px;  Changes space at the end of the navigation after the contact button. */
} 

#navigation > ul > li:first-child > a {
	border-radius:7px 0 0 7px; /* Creates rounded edges around the "About us" button */
} 

#navigation > ul > li > a:after { 
	content:''; /* Creates highlighted crease. */
	position:absolute; 
	border-right:solid 1pt; /* This creates a single-lined border*/
	top:0px; /* Without this value, the highlighted crease disappears. */
	margin-top:0px;
	right:-2px; 
	z-index:99;
	border-color:#b0b0b0;	
} 

/*fixes the sizing of the highlighted creases */
#navigation ul li.dropdown:hover > a:after {
	content:''; /* Creates highlighted crease. */
	position:absolute; 
	border-right:solid 1pt; /* This creates a single-lined border*/
	top:0px; /* Without this value, the highlighted crease disappears. */
	margin-top:0px;
	right:-2px; 
	z-index:99;
	border-color:#b0b0b0;	
} 

#navigation > ul > li.dropdown > a:before {
	content:'';
	height:10px;
	position:absolute;
	top:14px;  /* Changes the vertical alignement of the arrow (square) on the buttons BEFORE hover. */
	padding-top:0px;
	right:6px; 
	border:5px solid transparent;
	border-top:5px solid #FFFFFF; 
} 


#navigation > ul > li.dropdown:hover > a:before {
	top:14px; /* On hover, changes the arrow positioning. */
}

#navigation ul li.dropdown:hover > a {
	/* On active, changes the color/image of the buttons. */
	background:url(../images/button_hover.png); 
	border-color:#14100d; /* On hover of buttons AND drop-down menu, changes the color of the crease between buttons. */
	top:0px;  /* Changes the vertical positioning of the buttons on hover. */
	padding-bottom:7px; /* Changes the height of the buttons on hover.*/
	padding-top:7px; /*Pushes down the text and changes the height of the buttons on hover. */
	margin-bottom:5px; /* Changes vertical positioning of the menu. */
	z-index:999;
} 


/* Dropdown MENU: */ 
#navigation ul li.dropdown:hover > ul, #navigation ul li.dropdown:hover > div {
	display:block;
} 


/************************************************************************************************************************/

#navigation ul li.contact > a:hover {
	margin-top:0px; /*Changes the vertical alignment of the buttons & menu on hover. */  
	margin-right:0px;
	/* On hover, changes the color/image of the buttons. */
	background:url(../images/button_hover.png); 
	border-color:#14100d; /* On hover, changes the color of the shadow crease between buttons on Contat button. */
}

/**********************************************************************************************************************/
#navigation ul li.dropdown > a:hover {
	margin-top:0px; /*Changes the vertical alignment of the buttons & menu on hover. */   
	/* On hover, changes the color/image of the buttons. */
	background:url(../images/button_hover.png); 
	border-color:#14100d; /* On hover, changes the color of the shadow crease between buttons. */
} 

#navigation ul li > ul, #navigation ul li > div { 
	display:none;
	width:auto;
	position:absolute;
	top:35px; /* Changes the vertical alignment of the dropdown menu */
	padding:10px 0;
	/* Before hover, changes the color/image of the drop-drown menu. */
	background:url(../images/button_dropdown.png); 
	border-radius:0 0 7px 7px;
	z-index:999;
} 

#navigation ul li > ul {
	top:31px; /* Changes vertical positioning of the drop-down menu. */
	width:195px; /* Changes the width of the drop-down menu. */
} 

#navigation ul li > ul li {
	display:block;
	list-style:inside none;
	padding:0px; /* Changes side-position of the MENU */
	margin-top:0px;
	position:relative;
} 

#navigation ul li > ul li a {
	outline:none;
	display:block;
	position:relative;
	margin:0;
	padding:7px 20px;
	font:10pt Arial, Helvetica, sans-serif;
	font-weight:500;
	-webkit-font-smoothing: antialiased;
	color:#FFFFFF; /* On hover, this changes the color of the TEXT on the drop-down menu. */
	text-decoration:none; 
	text-shadow:1px -1px 0px rgba(0, 0, 0, 1);
	text-shadow:1px -1px 0px #000000;
} 

/* Selector  */
#navigation > ul > li > ul > li a:hover { 
	/* On hover, changes color/image of dropdown-menu selector. */
	background:url(../images/menu_selector.png); 
} 

#navigation, #navigation > ul > a { 
    margin:0px; /* Fixes the space between the top of the page and the navigation*/
	background:url(../images/button_before.png);  /* Before hover, sets the color/image of the buttons. */
} 

#navigation > ul > li > a { 
	top:0px; /* Changes the vertical positioning on almost all of the buttons except for "About us" button */
	margin-top:0px; /* Changes positioning on bothes creases and all text. */
	padding-top:7px; /* Changes vertical positioning of SHADOW crease & text on buttons. */
	padding-bottom:7px; /* Pushes the SHADOW crease up from the bottom */
	border-right:1px solid #000000; /* Before hover, changes the color of the SHADOW crease. */
	color:#FFFFFF; /* Before hover, this changes the text color of the buttons */
} 

#navigation > ul > li > a:after {
	margin:0px;
	margin-top:0px; /* Changes the height of the highlighted creases. */
	margin-bottom:-5px; /* Changes the height of the highlighted creases. */
	bottom:5px;
	border-color:#8a8989; /* Changes the color of the highlighted creases. */
} 

#navigation > ul > li >a:hover {
	background:url(../images/button_hover.png); 	/* On hover, changes the color/image of the CONTACT button. */ 
}