/* Navigation Bar */
/*The main navigation bar div*/
#trans-nav 
{
	 list-style-type: none;
	 height: 30px;
	 padding: 0;
	 margin: 0;
	 background-color:#1A1A1A;
	 width:100%;
	 font-size: 75%;
}

#trans-nav p{
	font-family: 'Open Sans', 'Arial', sans-serif;
}
 /*The first level menu*/
#trans-nav li 
{ 
	 float: left;
	 position: relative;
	 padding: 0;
	 line-height: 30px;
	 background: #1A1A1A url(nav-bg.png) repeat-x 0 0;
}
 
/* #trans-nav li:hover 
{ 
	background-position: 0 -40px;
} */
/*The first level menu components*/
#trans-nav li a 
{
	 display: block;
	 padding: 0 20px;
	 color: #fff;
	 text-decoration: none;
	 font-family: 'Lato','Open Sans', sans-serif; }
 
#trans-nav li a:hover
{
	color: #be5627;
}
/*Submenu ul tag*/
#trans-nav li ul
{
	 opacity: 0;
	 position: absolute;
	 left: 0;
	 width: 30em;
	 background: #63867f;
	 list-style-type: none;
	 padding: 0;
	 margin: 0;
}
/*When you hover on the main menu component that has sub-menu the opacity of sub-menu ul tag turns to 1*/
#trans-nav li:hover ul 
{ 
	opacity: 1; 
	bottom: 100%;
}
/*Sub-menu li component*/
#trans-nav li ul li 
{ 
	float: none; 
	position: static; 
	height: 30px; 
	line-height: 30px;
	background: none; 
	opacity:0;
}
/*When hover on li from the main menu the li sub-menu opacity turns to 1*/
#trans-nav li:hover ul li 
{ 
	opacity:1;
}
/*Sub-menu a tag component (the tag you have the main content in it) */
#trans-nav li ul li a
{ 
	background: #4C4C4C; 
}
/*When hover on the a tags in the sub-menu they change colour they */
#trans-nav li ul li a:hover 
{ 
	background: #1A1A1A; 
}

/*The part related to making the demo stick to the bottom*/
html, body {
 height: 100%;
}

ul#trans-nav {
 position: fixed;
 bottom: 0;
 width: 100%;
}


/* Modal css */

/* The gray outer part div */
.modalDialog {
    position: fixed;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    opacity:0;
	/*This parts make the modal page appear and fade in gradual manner (css3 annimation) */
    -webkit-transition: opacity 100ms ease-in;
    -moz-transition: opacity 100ms ease-in;
    transition: opacity 100ms ease-in;
    pointer-events: none;
}
/* When click on about opacity changes form 0 to 1 */
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

/* The main modal page div */
.modalDialog > div {
    /* width: 400px; */
	width: 60%;
	height: auto; /*Height depends on the content*/
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #F5F5FF;
	
}

/*The close button*/
.close {
    background: transparent;
    color: #B2B2B2;
    line-height: 25px;
    position: absolute;
    right: 35px;
	top: 18px;
    text-align: center;
    width: 3px;
    text-decoration: none;
	font-size: x-large;
    
}


#modalTitle {
	color: black;
	padding-top: 20px;
	margin-top: 15px;
}

details {
	/*padding: 15px;*/
	margin: 7px;
}
.modalDialog p {
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 0px;
	padding-top: 0px;
	font-size: 80%;
}

.modalDialog .role {
	font-weight: bold;
	font-size: 120%;
	color: darkorange;
	padding-left: 0px;
	padding-top: 150px;
}