Difference between revisions of "Template:Team:Imperial College/Templates:header"

Line 1: Line 1:
 
<html>
 
<html>
  
−
<style type="text/css">
+
<style>
 +
 
 +
#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; }
 
#contentSub, #footer-box, #catlinks, #search-controls,
 
#contentSub, #footer-box, #catlinks, #search-controls,
−
#p-logo, .printfooter, .firstHeading, .visualClear {
+
#p-logo, .printfooter, .firstHeading, .visualClear {
−
display: none;
+
display: none;
−
}
+
}
  
−
#top-section {
+
#top-section {
−
border: 0 none;
+
border: 0 none;
−
height: 14px;
+
height: 14px;
−
z-index: 100;
+
z-index: 100;
−
top: 0;
+
top: 0;
−
position: fixed;
+
position: fixed;
−
width: 975px;
+
width: 975px;
−
left: 50%;
+
left: 50%;
−
margin-left: -487px;
+
margin-left: -487px;
−
}
+
}
 
 
−
#globalWrapper, #content {
+
#globalWrapper, #content {
−
width: 100%;
+
width: 100%;
−
height: 100%;
+
height: 100%;
−
border: 0px;
+
border: 0px;
−
background-color: transparent;
+
background-color: transparent;
−
margin: 0px;
+
margin: 0px;
−
padding: 0px;
+
padding: 0px;
−
font-size: 100%;
+
font-size: 100%;
−
}
+
}
 
 
−
html, body, .wrapper {
+
html, body, .wrapper {
−
width: 100%;
+
width: 100%;
−
height: 100%;
+
height: 100%;
−
background-color: transparent;
+
background-color: transparent;
−
}
+
}
  
 
.sidebar-nav {
 
.sidebar-nav {
Line 58: Line 62:
 
}
 
}
  
−
.navbar .sub-menu:before {
+
 
−
    border-bottom: 7px solid transparent;
+
/********************************* CONTENT OF THE PAGE ********************************/
−
    border-left: none;
+
 
−
    border-right: 7px solid rgba(0, 0, 0, 0.2);
+
/* Wrapper for the content */
−
    border-top: 7px solid transparent;
+
.content_wrapper {
−
    left: -7px;
+
width: 85%;
−
    top: 10px;
+
margin-left:150px;
−
}
+
padding:10px 0px;
−
.navbar .sub-menu:after {
+
float:left;
−
    border-top: 6px solid transparent;
+
background-color:white;
−
    border-left: none;
+
}
−
    border-right: 6px solid #fff;
+
 
−
    border-bottom: 6px solid transparent;
+
/*LAYOUT */
−
    left: 10px;
+
.column  {
−
    top: 11px;
+
padding: 10px 0px;
−
    left: -6px;
+
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:#003E74;
 +
 
 +
}
 +
.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;}
 +
}
 +
 
 
</style>
 
</style>
  

Revision as of 17:13, 17 July 2016