Template:LMU-TUM Munich/CSS

/********************************* DEFAULT WIKI SETTINGS ********************************/

sideMenu,
top_title {

 display: none;

}

content {

 padding: 0px;
 width: 1000px;
 margin-top: -7px;
 margin-left: 0px;

}

body {

 background-color: white;

}

bodyContent h1,
bodyContent h2,
bodyContent h3,
bodyContent h4,
bodyContent h5 {

 margin-bottom: 0px;

}

/********************************* MENU ********************************/

/* Wrapper for the menu */

.menu_wrapper {

 width: 150px;
 height: 100vh;
 position: fixed;
 padding: 0px;
 float: left;
 background-color: #f2f2f2;
 text-align: left;

}

/* styling for the menu items */

.menu_item {

 width: 100%;
 margin: -2px 0px 0px -20px;
 padding: 10px 10px;
 border-bottom: 1px solid #d3d3d3;
 font-weight: bold;
 color: #000000;
 cursor: pointer;
 list-style: none;

}

/* when hovering on a menu item */

.menu_item:hover {

 color: #000000;
 background-color: #72c9b6;

}

/* decoration icon for the menu buttons*/

.icon {

 float: right;
 font-size: 16px;
 font-weight: bold;

}

/* this is the icon for when the content is collapsed */

.plus::before {

 content: "+";

}

/* this is the icon for when the content is expanded */

.less::before {

 content: "–";

}

/* styling for the ul that creates the buttons */

ul.menu_items {

 width: 100%;
 margin-left: 0px;
 padding: 0px;
 list-style: none;

}

/* styling for the li that are the menu items */

.menu_items li {

 width: 90%;
 margin-top: -2px;
 padding: 15px 0px 15px 15px;
 display: block;
 border-bottom: 1px solid #d3d3d3;
 text-align: left;
 font-weight: bold;
 text-decoration: none;
 color: #000000;
 list-style-type: none;
 cursor: pointer;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}

.menu_item a {

 width: 100%;
 margin-left: -20px;
 padding: 11px 90px 12px 20px;
 text-decoration: none;
 color: black;

}

/* When hovering on a menu item */

.menu_items li:hover {

 background-color: #72c9b6;
 color: #000000;

}

/* styling for the submenus */

.submenu {

 width: 100%;
 display: none;
 font-weight: bold;
 cursor: pointer;

}

/* moving the margin for the submenu ul list */

ul.submenu {

 width: 100%;
 margin: 10px 0px -11px 0px;
 list-style: none;

}

/*styling for the submenu buttons */

.submenu li {

 width: 100%;
 margin-left: 10px;
 margin-bottom: 0px;

}

/* hover state for the submenu buttons */

.submenu li a {

 width: 100%;
 padding: 5px 10px;
 display: inline-block;
 border-bottom: 1px solid #d3d3d3;
 background-color: white;
 text-decoration: none;
 color: #000000;

}

.submenu li a:hover {

 background-color: #000000;
 color: #72c9b6;

}

/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */

.collapsable_menu_control {

 width: 100%;
 padding: 15px 0px;
 display: none;
 background-color: #000000;
 text-align: center;
 font-weight: bold;
 color: #72c9b6;
 cursor: pointer;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}

/* when hovering on that button */

.collapsable_menu_control:hover {

 background-color: #72c9b6;
 color: #000000;

}

/********************************* CONTENT OF THE PAGE ********************************/

/* Wrapper for the content */

.content_wrapper {

 width: 85%;
 margin-left: 150px;
 padding: 10px 0px;
 float: left;
 background-color: white;

}

/*LAYOUT */

.column {

 padding: 10px 0px;
 float: left;
 background-color: white;

}

.full_size {

 width: 100%;

}

.full_size img {

 padding: 10px 15px;
 width: 96.5%;

}

.half_size {

 width: 50%;

}

.half_size img {

 padding: 10px 15px;
 width: 93%;

}

.clear {

 clear: both;

}

.highlight {

 width: 90%;
 margin: auto;
 padding: 15px 5px;
 background-color: #f2f2f2;

}

.judges-will-not-evaluate {

 border: 4px solid #72c9b6;
 display: block;
 margin: 5px 15px;
 width: 95%;
 font-weight: bold;

}

/*STYLING */

/* styling for the titles */

.content_wrapper h1, .content_wrapper h2 {

 padding: 5px 15px;
 border-bottom: 0px;
 color: #72c9b6;

}

.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {

 padding: 5px 15px;
 border-bottom: 0px;
 color: #000000;

}

/* font and text */

.content_wrapper p {

 padding: 0px 15px;
 font-size: 13px;
 font-family: Tahoma, Geneva, sans-serif;

}

/* Links */

.content_wrapper a {

 font-weight: bold;
 text-decoration: underline;
 text-decoration-color: #72c9b6;
 color: #72c9b6;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}

/* hover for the links */

.content_wrapper a:hover {

 text-decoration: none;
 color: #000000;

}

/* non numbered lists */

.content_wrapper ul {

 padding: 0px 20px;
 font-size: 13px;
 font-family: Tahoma, Geneva, sans-serif;

}

/* numbered lists */

.content_wrapper ol {

 padding: 0px;
 font-size: 13px;
 font-family: Tahoma, Geneva, sans-serif;

}

/* Table */

.content_wrapper table {

 width: 97%;
 margin: 15px 10px;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;

}

/* table cells */

.content_wrapper td {

 padding: 10px;
 vertical-align: text-top;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;

}

/* table headers */

.content_wrapper th {

 padding: 10px;
 vertical-align: text-top;
 border: 1px solid #d3d3d3;
 border-collapse: collapse;
 background-color: #f2f2f2;

}

/* Button class */

.button_click {

 margin: 10px auto;
 padding: 15px;
 width: 12%;
 text-align: center;
 font-weight: bold;
 background-color: #72c9b6;
 cursor: pointer;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;

}

/* button class on hover */

.button_click:hover {

 background-color: #000000;
 color: #72c9b6;

}

/********************************* RESPONSIVE STYLING ********************************/

/* IF THE SCREEN IS LESS THAN 1000PX */

@media only screen and (max-width: 1000px) {

 #content {
   width: 100%;
 }
 .menu_wrapper {
   width: 15%;
 }
 .content_wrapper {
   margin-left: 15%;
 }
 .menu_item {
   display: block;
 }
 .icon {
   display: none;
 }
 .highlight {
   padding: 10px 0px;
 }

}

/* IF THE SCREEN IS LESS THAN 680PX */

@media only screen and (max-width: 680px) {

 .collapsable_menu_control {
   display: block;
 }
 .menu_item {
   display: none;
 }
 .menu_wrapper {
   width: 100%;
   height: 15%;
   position: relative;
 }
 .content_wrapper {
   width: 100%;
   margin-left: 0px;
 }
 .column.half_size {
   width: 100%;
 }
 .column img {
   width: 100%;
   padding: 5px 0px;
 }
 .icon {
   display: block;
 }
 .highlight {
   padding: 15px 5px;
 }

}