extend use of bootstrap to whole page

style/_template.scss

@@ -1,6 +1,5 @@
 /* Containers */
 
-
 body {
 	min-width: 700px;
 	font-family: $font_para, sans-serif;
@@ -44,20 +43,6 @@ a:hover {
 	border-radius: 0 $radius $radius $radius;
 }
 
-/* Common Classes - Containers */
-
-#container {
-	position: absolute;
-	left: 1em;
-	right: 1em;
-	top: 1em;
-	bottom: 1em;
-}
-
-.template-items {
-	display: none;
-}
-
 /* Common Classes - Inputs */
 
 a.button {
@@ -94,12 +79,24 @@ a.button:active {
 	z-index: 1000;
 }
 
+/* Containers */
+
+#container {
+	max-width: 100vw;
+	max-height: 100vh;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+}
+
+.template-items {
+	display: none;
+}
+
 /* Header */
 
 #header {
-	position: relative;
 	height: 138px;
-	width: 50%;
 	
 	#logo_box {
 		width: 100%;
@@ -139,11 +136,7 @@ a.button:active {
 /* Menu */
 
 #menu {
-	position: absolute;
 	display: none;
-	top: 0;
-	right: 0;
-	width: 50%;
 	height: 111px;
 	
 	.navbar {
@@ -165,136 +158,26 @@ a.button:active {
 /* Main */
 
 #main_title {
-	margin-top: 1em;
-	
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		font-size: 1.5rem;
 	}
 }
 
 #main {
 	display: none;
-	position: absolute;
-	top: calc(138px + 6em);
-	bottom: 2rem;
-	right:0;
-	left:0;
-	padding: 1em;
-	overflow: auto;
-}
-
-/* Side */
-
-#side {
-	position: absolute;
-	left: 100%;
-	top: 203px;
-	padding: 1em;
-	bottom: 2rem;
-	overflow: hidden;
-	display: none;
-	
-	.tag {
-		margin-bottom: 1em;
-		
-		a {
-			@extend .shadow;
-			display: inline-block;
-			text-align: center;
-			width: 50px;
-			background: $gray-200;
-			border-radius: 0.5em;
-			font-size: 0.8rem;
-			line-height: 25px;
-			
-			&:hover {
-				color: $gray-200;
-				background: $gray-400;
-			}
-		}
-		
-		&.write a {
-			font-size: 1rem;
-			padding: 0;
-			line-height: 50px;
-		}
-	}
-}
-
-/* Settings */
-
-#settings table tr td {
-	text-align:left;
-} 
-
-/* Errors */
-
-#errors {
-	position:fixed;
-	bottom:-2px;
-	background-color:white;
-	width:696px;
-	border:2px solid red;
-}
-#errors ul li {
-	list-style-image: url(../images/error.png);
-	color:red;
-	font-weight: bold;
-	font-size:24px;
-}
-
-fieldset {
-	margin:20px auto;
-	width:90%;
-}
-
-fieldset p {
-	text-align: justify;
-}
-
-/* Feedback */
-
-.notice {
-	padding:0;
-	color:#997E60;
-}
-
-.error {
-	padding:0 0.5em;
-	color: red;
-	background:#FFB2B2;
-}
-.warning {
-	padding:0 0.5em;
-	color:orange;
-	background:#FFE4B2;
-}
-.success {
-	padding:0 0.5em;
-	color:green;
-	background:#B2D9B2;
 }
 
 /* Footer */
 
 footer {
-	position: absolute;
-	bottom: 0;
 	text-align: center;
 	color: $gray-400;
 	font-size: 0.8em;
-	width: 100%;
-	height: 2rem;
 	
-	span {
-		transform: translateY(-50%);
-		position: relative;
-		top: 50%;
-		
-		a {
-			color: $gray-400 !important;
-		}
+	a {
+		color: $gray-400;
 	}
 }