@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */

/*whole page*/
.page {background-color: ;
width:80% ;
margin:auto ;
padding:10px ;}

/*header*/
.masthead {background-color:transparent;}

/* MAIN */
main {background-color: #09F;
width:61%;
float:left;

border: 3px solid balck;

padding: 4px}


/* sidebar */
.sidebar {background-color:#efefef;

width:37%;
float:right;
border: 3px solid black;

}
/* footer */
.footer {background-color: #93C;
clear:left;}


h1 {color:black;}

h2 {color:white;}

h1 em {color:red;}



.nav-main a {
color: #2929292
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 1.125em; /* 18px/16px */
font-weight:700;
padding: .5em 1.15em .5em 1.4em;
text-transform: uppercase; }

.class-role { 
color: green;}





/* ::: Main Navigation ::: */
.nav-main {
  border-bottom: 1px solid #c7c7c8;
  border-top: 5px solid #019443;
  margin-bottom: 0;
  padding: .45em 0 .5em;
}

.nav-main li {
  border-left: 1px solid #c8c8c8;
  display: inline-block;
  text-align: left;
}

.nav-main li:first-child {
  border-left: none;
}

.nav-main li:last-child a {
  padding-right: 0;
}

.nav-main a {
  color: #292929;
  display: inline-block;
  font-size: 1.125em; /* 18px/16px */
  padding: .5em 1.15em .5em 1.4em;
}

.nav-main a:hover {
  color: #029443;
  text-decoration: none;
}

.nav-main .current-page,
.nav-main .current-page:hover {
  color: #747474;
  cursor: default;
}