/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */

/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    float:left; /* Clear floats */
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.*/
    position:fixed;
    z-index:9;   /*5*/
    }
#nav li{
    float:left;
    margin-right:10px;        /*    margin_right:10px;*/
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#444;   /*333*/
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#008B8B;           /*#6b0c36*/
    text-decoration:underline;
}



/*--- DROPDOWN ---*/  /*rbga(255,255,255,0)*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgb(60,179,113); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#008B8B;     /*#6b0c36*/
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#444;   /*333*/
}
/*Just a regular horizontal navigation menu…*/
/*Right, let’s now break that down… The first section is fairly self explanatory–here we are just setting up a regular horizontal navigation menu, */
/*the same as any other. However, notice that selectors such as #nav li and #nav li a will select all list items and links in the dropdowns too.*/
/*Here we’re using the cascade sensibly.   One thing of note however is applying position:relative; to the list items, this allows us*/
/*to use position:absolute; on the nested <ul>s later on.*/
/*The nested lists*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgb(60,179,113); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}


p{font-family:"Arial";
font-size:16px;}
/*css add for photo at left and texts at right*/

.container {
  display: flex;
  align-items: center;
  justify-content: center
}

img {
  max-width: 100%
}

.image {
  flex-basis: 40%
}

.text {
  font-size: 20px;
  padding-left: 20px;   /* 20px */
}


body {
  max-width: 500px;
  margin: 0 auto;
}





/*css for button use */

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%
  
/*logout buttom */  
.logoutLblPos{

   position:fixed;
   right:10px;
   top:5px;
}