#container-flex{
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	flex:80%;
       
   } 
   

			/*TOP BAR*/
#top {
margin : 0;
padding : 0;
}
#top h2 {
text-align : center;
text-transform : none;
letter-spacing : 5px;
font-size : 90%;
padding : 8px 0;
margin : 0;
background : #7e7e7e;
color : #aaa;
}
			/*BANNER*/
#banner {
width : 780px;
height : 135px;
margin : 0 auto;
padding : 0;
background : url(images/logo.jpg) center 0%;
color : #333;
}
#banner h1 {
height : 100px;
font-family : georgia, sans-serif;
text-align : center;
text-transform : none;
letter-spacing : 5px;
font-size : 175%;
padding : 0;
margin : 0;
background : transparent;
color : #aaa;
}
			/*MAIN CONTENT*/
#content {
background: #fff  ;
float : left;
display:flex;
flex-direction : column;
margin : 0px;
padding : 0px 10 0px 0;
text-align : justify;
}

#realnumbers-content{
padding:10px;
margin:10px;
width:auto;
}


#content-wrapper{
 padding-left: 10px;
}

#content-wrapper p{
 padding: 10px 0px;
 margin:0px;
}


			/*LEFT SIDEBAR*/
#sidebar {
	background: #ffffff;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
margin : 0;
padding : 0 5px 20px 10px;
}
			/*FOOTER*/
#footer {
clear : both;
font-size : 0.9em;
color : #fff;
background : #710069;
border-top : 1px solid #eee;
margin : 0;
text-align : center;
padding-left : 10px;
}
			/*TYPOGRAPHY*/
h3 {
font : 130% verdana, "Trebuchet MS", arial, sans-serif;
text-transform : uppercase;
letter-spacing : 3px;
color : #333;
background : inherit;
margin : 30px 0 10px 5px;
padding : 0;
}
h4 {
font : 100% arial, "Trebuchet MS", verdana, sans-serif;
color : #710069;
background : inherit;
margin : 5px 0 5px 10px;
padding : 0;
}
p {
margin : 10px 10px;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
			/*SCROLLBAR*/
div.scroll {
overflow : auto;
height : 11em;
width : 500px;
padding : 5px;
border : 1px solid #eee;
margin : 20px 0 20px 15px;
background : inherit;
color : #555;
font-size : 90%;
}
			/*SIDEBAR NAVIGATION*/
#sidebar ul {
list-style : none;
margin : 0 0 20px 0;
padding : 0;
}
#sidebar ul li {
display : inline;
padding : 0;
margin : 0;
}
#sidebar ul li a {
display : block;
color : #710069;
background : inherit;
text-decoration : none;
margin : 0;
padding : 5px 0 5px 0;
border-bottom : 1px solid #c0c0c0;
}



#sidebar ul li a:hover {
text-decoration : none;
background : #ece5ec;
color : #00750a;
}

/* double nested */

#dn{
    display:none;

}

ul #dn li{
	margin:0px;
}

ul #dn li a{
	margin:-10px;
	padding: 0px 30px;
}

#sidebar ul li:hover #dn{
    display:inline;
    z-index : 10;
    overflow:true;
}

			/*LINK PROPERTIES*/
#content a:link, #content a:visited, #banner a:link, #banner a:visited {
color : #710069;
background : inherit;
text-decoration : none;
}
#content a:hover, #banner a:hover {
color : #00750a;
background : inherit;
text-decoration : none;
}
#footer a:link, a:visited, #top a:link, a:visited {
color : #aaa;
background : inherit;
text-decoration : none;
}
#footer a:hover, #top a:hover {
color : #fff;
background : inherit;
text-decoration : none;
}
a img {
border : 0;
}

.img-s{
    width:200px;
    height:250px;
}

@media only screen and (min-width:100px) and (max-width:550px){
    
    #sidebar {
	flex-direction:column;
	height:300px;
	overflow:auto;
	flex:100%;

}
   
   #container-flex{
       	display:flex;
       	flex-direction:column;
       
   } 
   
   #content{
       flex-direction:column;
       flex:100%;
   }
    
    
}