--- a/mouchak/static/css/main.css
+++ b/mouchak/static/css/main.css
@@ -24,6 +24,7 @@
 }
 body {
     font-size: 14px;
+    overflow-y:scroll;
 }
 
 /*
@@ -183,6 +184,250 @@
 .container {
   /*margin: 0;*/
 }
+
+/* side menu css */
+
+#page-content-wrapper {
+    visibility: hidden;
+}
+
+@media (max-width:767px) {
+    .wrapper {
+	padding-left: 70px;
+}
+.sidebar-wrapper {
+    left: 70px;
+}
+
+.wrapper.active {
+   padding-left: 150px;
+}
+
+.wrapper.active .sidebar-wrapper {
+    left: 150px;
+    width: 150px;
+}
+
+}
+
+.link_disabled {
+    pointer-events: none;
+    cursor: none;
+    color: gray;
+}
+
+@media (max-width:450px) {
+    .thumbnail {
+	height: 350px;
+}
+
+.caption_heading {
+    height: 100px;
+}
+
+}
+/* -------------end ----------- */
+
+.sidebar-wrapper {
+    /*transform*/
+
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    margin-left: -150px;
+    left: 20px;
+    margin-top:0px;
+    width: 165px;
+   // background: #222;
+    position: fixed;
+    height: 100%;
+    -ms-overflow-y: auto;
+    overflow-y: auto;
+    
+    z-index: 10000;
+    -webkit-transition: all .4s ease 0s;
+    -moz-transition: all .4s ease 0s;
+    -o-transition: all .4s ease 0s;
+    -ms-transition: all .4s ease 0s;
+    transition: all .4s ease 0s;
+}
+
+.nav-collapse.collapse {
+    height: auto !important;
+    overflow: visible !important;
+}
+
+.page-content {
+    height: auto;
+}
+
+#page-content-wrapper {
+    padding-left: 0;
+    margin-left: 0;
+    width: 100%;
+    height: auto;
+}
+
+.sidebar-nav {
+    display: block;
+    float: left;
+    width: 150px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar_menu {
+    display: block;
+    float: left;
+    top: 0;
+    width: 150px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar_menu li,.sidebar-nav li {
+    line-height: 20px;
+    text-indent: 5px;
+}
+
+#sidebar_menu li a,.sidebar-nav li a {
+//    color: #999;
+    display: block;
+    float: left;
+    text-decoration: none;
+    width: 150px;
+  //  background: #00FFFF;
+  //  border-top: 1px solid #00FFFF;
+//    border-bottom: 1px solid #00FFFF; /*transition*/
+
+    -webkit-transition: background .5s;
+    -moz-transition: background .5s;
+    -o-transition: background .5s;
+    -ms-transition: background .5s;
+    transition: background .5s;
+}
+
+#sidebar_menu li a:hover,.sidebar-nav li a:hover {
+     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    filter: alpha(opacity=80);
+    opacity: .8;
+    text-decoration: none;
+}
+
+#sidebar_menu li a:active,#sidebar_menu li a:focus,.sidebar-nav li a:active,.sidebar-nav li a:focus {
+    text-decoration: none;
+}
+
+#sidebar_menu>.sidebar-brand {
+    height: 40px;
+    line-height: 30px;
+    font-size: 15px;
+}
+
+
+.active_nav a .fa {
+    color: #3cc;
+
+}
+
+.sidebar_name {
+    padding-top: 25px;
+    color: #fff;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+    filter: alpha(opacity=70);
+    opacity: .7;
+}
+
+.side_name {
+    visibility: hidden;
+}
+
+.side_name p {
+    font-size: 1.1em;
+}
+
+.side_name.active {
+    visibility: visible;
+}
+
+#side_download {
+    margin-top: 40px;
+}
+
+.content-header {
+    height: 65px;
+    line-height: 65px;
+}
+
+.content-header h1 {
+    margin: 0;
+    margin-left: 20px;
+    line-height: 65px;
+    display: inline-block;
+}
+
+.wrapper.active {
+    padding-left: 0px;
+//    border-right:2px solid #000;
+//    margin-left:90px;
+}
+
+.wrapper.active .sidebar-wrapper {
+    left: 200px;
+    border-right:1px solid #00FFFF;
+}
+
+.row,.row-pad {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+#message {
+    padding-left: 15px;
+    padding-right: -15px;
+}
+
+
+.menu-toggle {
+    font-size:18px;
+    color:#000;
+}
+.menu-icon {
+    margin-right: 10px;
+}
+
+.personal-info,.server-stats {
+    list-style: none;
+    padding-left: 0;
+}
+
+.progress {
+
+    height: 5px;
+}
+
+h5 {
+    color: #000;
+}
+
+.radio, .checkbox {
+    color:#000;
+    margin-left: 10px;
+}
+.radio label, .checkbox label {
+    font-size:14px;
+}
+
+/* side menu css ends here */
+
+p {
+    text-align:justify;
+}
+
 
 /* ==========================================================================
    Helper classes