brite/sample/taskmanager/css/MainView.css

DOM Centric Minimalistic MVC Framework

.MainView{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.MainView-topNav{
  position: relative;
  background: #333;
  height: 36px;
  
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,.51), inset 0 0 0 rgba(0,0,0,.31);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.51), inset 0 0 0 rgba(0,0,0,.31);
  box-shadow: 0px 2px 5px rgba(0,0,0,.51), inset 0 0 0 rgba(0,0,0,.31);
    
  background-image: -moz-linear-gradient(bottom, rgba(54,58,60,.93) 0%, rgba(99,100,102,.93) 100%);
  background-image: -o-linear-gradient(bottom, rgba(54,58,60,.93) 0%, rgba(99,100,102,.93) 100%);
  background-image: -webkit-linear-gradient(bottom, rgba(54,58,60,.93) 0%, rgba(99,100,102,.93) 100%);
  background-image: linear-gradient(bottom, rgba(54,58,60,.93) 0%, rgba(99,100,102,.93) 100%);
  z-index: 10;
}

.MainView-topNav .app-icon{
  position: absolute;
  top: 5px; left: 10px; 
  width: 24px; 
  height: 24px;
}

.MainView-topNav h2{
  color: #fff;
  font-size: 20px; 
  line-height: normal;
  letter-spacing: .1em;
  margin: 0;
  padding: 5px 0 0px 42px; 
}

.MainView-left{
  position: absolute;
  top: 36px; bottom: 0; left: 0;
  width: 200px;
}

.MainView-content{
  position: absolute;
  top: 36px; right: 0px; bottom: 0; left: 200px;
  background: url(images/content-bg.png);
  border-left: solid 1px #bbb;
}

.MainView-panels{
  position: absolute;
  top: 10px; right: 70px; bottom: 30px; left: 70px;
  overflow: hidden;
}

.MainView-panels-inner{
  position: absolute;
  top: 0; bottom: 0;
  left: 0; 
  right: 0;
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
}

.MainView-projectViewPanel{
  position: absolute;
  top: 0; bottom: 0;
  left: 0px;
  width: 100%;
}

.MainView-prev, .MainView-next{
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  background-image: url(images/icons.png); 
  width: 32px; 
  height: 32px;
}

.MainView-prev{
  left: 10px;
  background-position: 0px -160px;
}

.MainView-next{
  right: 10px;
  background-position: -32px -160px;
}