changes to maintain the UI in various resolutions

2 files changed, 20 insertions, 545 deletions

diff --git a/testapp/static/exam/css/base.css b/testapp/static/exam/css/base.css
index 069729d..48a2269 100644
--- a/testapp/static/exam/css/base.css
+++ b/testapp/static/exam/css/base.css
@@ -245,30 +245,7 @@ body {
 .container:after {
   clear: both;
 }
-.container-fluid {
-  position: relative;
-  min-width: 940px;
-  padding-left: 20px;
-  padding-right: 20px;
-  zoom: 1;
-}
-.container-fluid:before, .container-fluid:after {
-  display: table;
-  content: "";
-  zoom: 1;
-}
-.container-fluid:after {
-  clear: both;
-}
-.container-fluid > .sidebar {
-  position: absolute;
-  top: 65px;
-  left: 20px;
-  width: 220px;
-}
-.container-fluid > .content {
-  margin-left: 240px;
-}
+
 a {
   color: #0069d6;
   text-decoration: none;
@@ -1673,174 +1650,6 @@ a.menu:after, .dropdown-toggle:after {
   -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
   box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
 }
-.open .menu,
-.dropdown.open .menu,
-.open .dropdown-toggle,
-.dropdown.open .dropdown-toggle {
-  color: #ffffff;
-  background: #ccc;
-  background: rgba(0, 0, 0, 0.3);
-}
-.open .menu-dropdown,
-.dropdown.open .menu-dropdown,
-.open .dropdown-menu,
-.dropdown.open .dropdown-menu {
-  display: block;
-}
-.tabs, .pills {
-  margin: 0 0 18px;
-  padding: 0;
-  list-style: none;
-  zoom: 1;
-}
-.tabs:before,
-.pills:before,
-.tabs:after,
-.pills:after {
-  display: table;
-  content: "";
-  zoom: 1;
-}
-.tabs:after, .pills:after {
-  clear: both;
-}
-.tabs > li, .pills > li {
-  float: left;
-}
-.tabs > li > a, .pills > li > a {
-  display: block;
-}
-.tabs {
-  border-color: #ddd;
-  border-style: solid;
-  border-width: 0 0 1px;
-}
-.tabs > li {
-  position: relative;
-  margin-bottom: -1px;
-}
-.tabs > li > a {
-  padding: 0 15px;
-  margin-right: 2px;
-  line-height: 34px;
-  border: 1px solid transparent;
-  -webkit-border-radius: 4px 4px 0 0;
-  -moz-border-radius: 4px 4px 0 0;
-  border-radius: 4px 4px 0 0;
-}
-.tabs > li > a:hover {
-  text-decoration: none;
-  background-color: #eee;
-  border-color: #eee #eee #ddd;
-}
-.tabs .active > a, .tabs .active > a:hover {
-  color: #808080;
-  background-color: #ffffff;
-  border: 1px solid #ddd;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-.tabs .menu-dropdown, .tabs .dropdown-menu {
-  top: 35px;
-  border-width: 1px;
-  -webkit-border-radius: 0 6px 6px 6px;
-  -moz-border-radius: 0 6px 6px 6px;
-  border-radius: 0 6px 6px 6px;
-}
-.tabs a.menu:after, .tabs .dropdown-toggle:after {
-  border-top-color: #999;
-  margin-top: 15px;
-  margin-left: 5px;
-}
-.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
-  border-color: #999;
-}
-.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
-  border-top-color: #555;
-}
-.pills a {
-  margin: 5px 3px 5px 0;
-  padding: 0 15px;
-  line-height: 30px;
-  text-shadow: 0 1px 1px #ffffff;
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  border-radius: 15px;
-}
-.pills a:hover {
-  color: #ffffff;
-  text-decoration: none;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: #00438a;
-}
-.pills .active a {
-  color: #ffffff;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
-  background-color: #0069d6;
-}
-.pills-vertical > li {
-  float: none;
-}
-.tab-content > .tab-pane,
-.pill-content > .pill-pane,
-.tab-content > div,
-.pill-content > div {
-  display: none;
-}
-.tab-content > .active, .pill-content > .active {
-  display: block;
-}
-.breadcrumb {
-  padding: 7px 14px;
-  margin: 0 0 18px;
-  background-color: #f5f5f5;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
-  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
-  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
-  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
-  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
-  background-image: linear-gradient(top, #ffffff, #f5f5f5);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
-  border: 1px solid #ddd;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-  -moz-box-shadow: inset 0 1px 0 #ffffff;
-  box-shadow: inset 0 1px 0 #ffffff;
-}
-.breadcrumb li {
-  display: inline;
-  text-shadow: 0 1px 0 #ffffff;
-}
-.breadcrumb .divider {
-  padding: 0 5px;
-  color: #bfbfbf;
-}
-.breadcrumb .active a {
-  color: #404040;
-}
-.hero-unit {
-  background-color: #f5f5f5;
-  margin-bottom: 30px;
-  padding: 60px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-}
-.hero-unit h1 {
-  margin-bottom: 0;
-  font-size: 60px;
-  line-height: 1;
-  letter-spacing: -1px;
-}
-.hero-unit p {
-  font-size: 18px;
-  font-weight: 200;
-  line-height: 27px;
-}
 footer {
   margin-top: 17px;
   padding-top: 17px;
@@ -2156,317 +1965,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .alert-message.block-message.info p a {
   color: #404040;
 }
-.pagination {
-  height: 36px;
-  margin: 18px 0;
-}
-.pagination ul {
-  float: left;
-  margin: 0;
-  border: 1px solid #ddd;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-.pagination li {
-  display: inline;
-}
-.pagination a {
-  float: left;
-  padding: 0 14px;
-  line-height: 34px;
-  border-right: 1px solid;
-  border-right-color: #ddd;
-  border-right-color: rgba(0, 0, 0, 0.15);
-  *border-right-color: #ddd;
-  /* IE6-7 */
-
-  text-decoration: none;
-}
-.pagination a:hover, .pagination .active a {
-  background-color: #c7eefe;
-}
-.pagination .disabled a, .pagination .disabled a:hover {
-  background-color: transparent;
-  color: #bfbfbf;
-}
-.pagination .next a {
-  border: 0;
-}
-.well {
-  background-color: #f5f5f5;
-  margin-bottom: 20px;
-  padding: 19px;
-  min-height: 505px;
-  border: 1px solid #eee;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-.well blockquote {
-  border-color: #ddd;
-  border-color: rgba(0, 0, 0, 0.15);
-}
-.modal-backdrop {
-  background-color: #000000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10000;
-}
-.modal-backdrop.fade {
-  opacity: 0;
-}
-.modal-backdrop, .modal-backdrop.fade.in {
-  filter: alpha(opacity=80);
-  -khtml-opacity: 0.8;
-  -moz-opacity: 0.8;
-  opacity: 0.8;
-}
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 11000;
-  max-height: 500px;
-  overflow: auto;
-  width: 560px;
-  margin: -250px 0 0 -280px;
-  background-color: #ffffff;
-  border: 1px solid #999;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid #999;
-  /* IE6-7 */
-
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.modal .close {
-  margin-top: 7px;
-}
-.modal.fade {
-  -webkit-transition: opacity .3s linear, top .3s ease-out;
-  -moz-transition: opacity .3s linear, top .3s ease-out;
-  -ms-transition: opacity .3s linear, top .3s ease-out;
-  -o-transition: opacity .3s linear, top .3s ease-out;
-  transition: opacity .3s linear, top .3s ease-out;
-  top: -25%;
-}
-.modal.fade.in {
-  top: 50%;
-}
-.modal-header {
-  border-bottom: 1px solid #eee;
-  padding: 5px 15px;
-}
-.modal-body {
-  padding: 15px;
-}
-.modal-body form {
-  margin-bottom: 0;
-}
-.modal-footer {
-  background-color: #f5f5f5;
-  padding: 14px 15px 15px;
-  border-top: 1px solid #ddd;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-  -moz-box-shadow: inset 0 1px 0 #ffffff;
-  box-shadow: inset 0 1px 0 #ffffff;
-  zoom: 1;
-  margin-bottom: 0;
-}
-.modal-footer:before, .modal-footer:after {
-  display: table;
-  content: "";
-  zoom: 1;
-}
-.modal-footer:after {
-  clear: both;
-}
-.modal-footer .btn {
-  float: right;
-  margin-left: 5px;
-}
-.modal .popover, .modal .twipsy {
-  z-index: 12000;
-}
-.twipsy {
-  display: block;
-  position: absolute;
-  visibility: visible;
-  padding: 5px;
-  font-size: 11px;
-  z-index: 1000;
-  filter: alpha(opacity=80);
-  -khtml-opacity: 0.8;
-  -moz-opacity: 0.8;
-  opacity: 0.8;
-}
-.twipsy.fade.in {
-  filter: alpha(opacity=80);
-  -khtml-opacity: 0.8;
-  -moz-opacity: 0.8;
-  opacity: 0.8;
-}
-.twipsy.above .twipsy-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #000000;
-}
-.twipsy.left .twipsy-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid #000000;
-}
-.twipsy.below .twipsy-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid #000000;
-}
-.twipsy.right .twipsy-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid #000000;
-}
-.twipsy-inner {
-  padding: 3px 8px;
-  background-color: #000000;
-  color: white;
-  text-align: center;
-  max-width: 200px;
-  text-decoration: none;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.twipsy-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  padding: 5px;
-  display: none;
-}
-.popover.above .arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #000000;
-}
-.popover.right .arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid #000000;
-}
-.popover.below .arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid #000000;
-}
-.popover.left .arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid #000000;
-}
-.popover .arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-.popover .inner {
-  background: #000000;
-  background: rgba(0, 0, 0, 0.8);
-  padding: 3px;
-  overflow: hidden;
-  width: 280px;
-  -webkit-border-radius: 6px;
-  -moz-border-radius: 6px;
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-}
-.popover .title {
-  background-color: #f5f5f5;
-  padding: 9px 15px;
-  line-height: 1;
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-  border-bottom: 1px solid #eee;
-}
-.popover .content {
-  background-color: #ffffff;
-  padding: 14px;
-  -webkit-border-radius: 0 0 3px 3px;
-  -moz-border-radius: 0 0 3px 3px;
-  border-radius: 0 0 3px 3px;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding-box;
-  background-clip: padding-box;
-}
-.popover .content p, .popover .content ul, .popover .content ol {
-  margin-bottom: 0;
-}
-.fade {
-  -webkit-transition: opacity 0.15s linear;
-  -moz-transition: opacity 0.15s linear;
-  -ms-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-  opacity: 0;
-}
-.fade.in {
-  opacity: 1;
-}
 .label {
   padding: 1px 3px 2px;
   font-size: 9.75px;
@@ -2492,41 +1990,4 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .label.notice {
   background-color: #62cffc;
 }
-.media-grid {
-  margin-left: -20px;
-  margin-bottom: 0;
-  zoom: 1;
-}
-.media-grid:before, .media-grid:after {
-  display: table;
-  content: "";
-  zoom: 1;
-}
-.media-grid:after {
-  clear: both;
-}
-.media-grid li {
-  display: inline;
-}
-.media-grid a {
-  float: left;
-  padding: 4px;
-  margin: 0 0 18px 20px;
-  border: 1px solid #ddd;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.media-grid a img {
-  display: block;
-}
-.media-grid a:hover {
-  border-color: #0069d6;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-}
 
diff --git a/testapp/static/exam/css/question.css b/testapp/static/exam/css/question.css
index a4abdf5..3fd0c3c 100644
--- a/testapp/static/exam/css/question.css
+++ b/testapp/static/exam/css/question.css
@@ -1,11 +1,25 @@
 .time-div
 {
-    background-color:red;
-    border:2px solid black;
-    padding: 2px;
+    background-color:black;
+    padding: 8px;
+    color: white;
     vertical-align:middle;
-    width:auto;
-    height:12px;
+    width:150px;
     float:right;
     border-radius: 6px 6px 6px 6px;
 }
+.td1-class
+{
+	width:175px;	
+}
+.td2-class
+{
+	width:50px;
+}
+.page-header {
+  height:50px;
+  text-align: center;
+  background-color: #f5f5f5;
+  padding: 35px 20px 10px;
+  margin: -20px -20px 20px;
+}