* { margin: 0; padding: 0 ; box-sizing: border-box }

body { background-color: #fff ; color: #000 ; padding: 0px; line-height: 20px; font-size: 14px ; font-family: arial ;}
#cnt { display: flex ; flex-flow: row wrap ;  padding: 0 ; }

header { width: 100%; height: 80px; background: #ccc ; }
header h1 { text-align: right ; padding: 0 10px ;}
header .menu { padding: 5px 0 10px 10px ; list-style-type: none ; }

#menu { width: 75%; display: flex; flex-flow: row no-wrap; background: #999 ; color: #000 ; padding: 10px 0 ; line-height: 20px ;}
#menu li  { display: block ; padding: 0 10px ;  }
#menu li ul { position: absolute; margin: 0 ; z-index: 100 ; display: none ; }
#menu li span:hover + ul ,
#menu li span + ul:hover { display: block; }
#menu li ul li { background: #999 ; display: block; margin: -5px 0 0 -10px; padding: 15px 10px 10px; line-height: 20px ; }

#search { width: 25%;  background: #999 ; color: #000 ; padding: 10px 0  ; line-height: 20px ;}

#side { width: 25% ; background: #ccc ; margin: 0 ; padding: 20px 10px ; list-style-type: none ; }
#side li { list-style-type: none ; margin: 0 0 10px ; }
#side + #main {  }

#main { width: 75% ; padding: 20px ; }
#main .picker { display: flex; flex-flow: row nowrap ; list-style-type: none ; margin: 20px 0   }
#main .picker > li:first-of-type  { margin: 0  ; }
#main .picker > li  { margin: 0 0 0 10px ; }
#main .picker > li ul  { font-size: 0.825em ; }
#main .picker .menu  { margin: 0 ; }
#main .profile { display: flex; flex-flow: row nowrap ; list-style-type: none ; }
#main .profile li  { padding: 40px ; text-align: center ; background-color: #cccccc; margin: 0 10px 10px 0 ; }
#main .menu { margin: 20px 0 20px 20px ; }
#main .menu.picker { margin: 20px 0    }
#main ul ul { padding: 0 0 0 20px ; }
#main .menu ul { margin: 0 0 0 20px ; }
#main h1 ,
#main h2 ,
#main h3 { margin: 20px 0 20px ; }

footer { width: 100% ; background: #999 ; padding: 20px ; margin: 0 ;}
footer ul { list-style-type: none ; }

ul ul { margin-left: 20px ; }