Difference between revisions of "Template:UNC-Chapel Hill"

 
(39 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
<style type="text/css">
 
<style type="text/css">
  
−
/* PAGE LAYOUT */
+
@charset "UTF-8";
 +
@import url(font-awesome.min.css);
 +
@import url("http://fonts.googleapis.com/css?family=Roboto:500,300");
  
−
/* Change Background color*/
+
/*
−
body {  
+
Ion by TEMPLATED
−
background-color: #99BADD;  
+
templated.co @templatedco
−
+
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 +
*/
 +
 
 +
/* Basic */
 +
 
 +
body {
 +
background: #fff;
 +
}
 +
 
 +
body, input, select, textarea {
 +
color: #555f66;
 +
font-family: "Roboto", Helvetica, sans-serif;
 +
font-size: 14pt;
 +
font-weight: 300;
 +
line-height: 1.75em;
 +
}
 +
 
 +
a {
 +
color: #629DD1;
 +
text-decoration: underline;
 +
}
 +
 
 +
a:hover {
 +
text-decoration: none;
 +
}
 +
 
 +
strong, b {
 +
color: #666f77;
 +
font-weight: 500;
 +
}
 +
 
 +
em, i {
 +
font-style: italic;
 +
}
 +
 
 +
p {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
color: #666f77;
 +
font-weight: 300;
 +
line-height: 1em;
 +
margin: 0 0 1em 0;
 +
text-transform: uppercase;
 +
letter-spacing: 0.125em;
 +
}
 +
 
 +
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
color: inherit;
 +
text-decoration: none;
 +
}
 +
 
 +
h2 {
 +
font-size: 1.5em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
h3 {
 +
font-size: 1.25em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
h4 {
 +
font-size: 1em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
h5 {
 +
font-size: 0.9em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
h6 {
 +
font-size: 0.7em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
sub {
 +
font-size: 0.8em;
 +
position: relative;
 +
top: 0.5em;
 +
}
 +
 
 +
sup {
 +
font-size: 0.8em;
 +
position: relative;
 +
top: -0.5em;
 +
}
 +
 
 +
hr {
 +
border: 0;
 +
border-bottom: solid 1px rgba(144, 144, 144, 0.25);
 +
margin: 3em 0;
 +
}
 +
 
 +
hr.major {
 +
margin: 2em 0 5em 0;
 +
}
 +
 
 +
blockquote {
 +
border-left: solid 4px rgba(144, 144, 144, 0.25);
 +
font-style: italic;
 +
margin: 0 0 2em 0;
 +
padding: 0.5em 0 0.5em 2em;
 +
}
 +
 
 +
code {
 +
background: rgba(144, 144, 144, 0.075);
 +
border-radius: 6px;
 +
border: solid 1px rgba(144, 144, 144, 0.25);
 +
font-family: "Courier New", monospace;
 +
font-size: 0.9em;
 +
margin: 0 0.25em;
 +
padding: 0.25em 0.65em;
 +
}
 +
 
 +
pre {
 +
-webkit-overflow-scrolling: touch;
 +
font-family: "Courier New", monospace;
 +
font-size: 0.9em;
 +
margin: 0 0 2em 0;
 +
overflow-x: auto;
 +
}
 +
 
 +
pre code {
 +
display: block;
 +
line-height: 1.75em;
 +
padding: 1em 1.5em;
 +
}
 +
 
 +
.align-left {
 +
text-align: left;
 +
}
 +
 
 +
.align-center {
 +
text-align: center;
 +
}
 +
 
 +
.align-right {
 +
text-align: right;
 +
}
 +
 
 +
/* Section/Article */
 +
 
 +
section.special, article.special {
 +
text-align: center;
 +
}
 +
 
 +
header p {
 +
color: #bbb;
 +
position: relative;
 +
margin: 0 0 1.5em 0;
 +
}
 +
 
 +
header h2 + p {
 +
font-size: 1.25em;
 +
margin-top: -1em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
header h3 + p {
 +
font-size: 1.1em;
 +
margin-top: -0.85em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
header h4 + p,
 +
header h5 + p,
 +
header h6 + p {
 +
font-size: 0.9em;
 +
margin-top: -0.75em;
 +
line-height: 1.5em;
 +
}
 +
 
 +
header.major {
 +
text-align: center;
 +
margin: 0 0 4em 0;
 +
}
 +
 
 +
header.major h2 {
 +
font-size: 2em;
 +
}
 +
 
 +
header.major h2 + p {
 +
font-size: 1.5em;
 +
margin: -1em 0 2em 0;
 +
}
 +
 
 +
/* Form */
 +
 
 +
form {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
label {
 +
color: #666f77;
 +
display: block;
 +
font-size: 0.9em;
 +
font-weight: 500;
 +
margin: 0 0 1em 0;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
select,
 +
textarea {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-o-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
background: rgba(144, 144, 144, 0.075);
 +
border-radius: 6px;
 +
border: none;
 +
border: solid 1px rgba(144, 144, 144, 0.25);
 +
color: inherit;
 +
display: block;
 +
outline: 0;
 +
padding: 0 1em;
 +
text-decoration: none;
 +
width: 100%;
 +
}
 +
 
 +
input[type="text"]:invalid,
 +
input[type="password"]:invalid,
 +
input[type="email"]:invalid,
 +
select:invalid,
 +
textarea:invalid {
 +
box-shadow: none;
 +
}
 +
 
 +
input[type="text"]:focus,
 +
input[type="password"]:focus,
 +
input[type="email"]:focus,
 +
select:focus,
 +
textarea:focus {
 +
border-color: #629DD1;
 +
box-shadow: 0 0 0 1px #629DD1;
 +
}
 +
 
 +
.select-wrapper {
 +
text-decoration: none;
 +
display: block;
 +
position: relative;
 +
}
 +
 
 +
.select-wrapper:before {
 +
content: "";
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
.select-wrapper:before {
 +
color: rgba(144, 144, 144, 0.25);
 +
display: block;
 +
height: 2.75em;
 +
line-height: 2.75em;
 +
pointer-events: none;
 +
position: absolute;
 +
right: 0;
 +
text-align: center;
 +
top: 0;
 +
width: 2.75em;
 +
}
 +
 
 +
.select-wrapper select::-ms-expand {
 +
display: none;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
select {
 +
height: 2.75em;
 +
}
 +
 
 +
textarea {
 +
padding: 0.75em 1em;
 +
}
 +
 
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-o-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
display: block;
 +
float: left;
 +
margin-right: -2em;
 +
opacity: 0;
 +
width: 1em;
 +
z-index: -1;
 +
}
 +
 
 +
input[type="checkbox"] + label,
 +
input[type="radio"] + label {
 +
text-decoration: none;
 +
color: #555f66;
 +
cursor: pointer;
 +
display: inline-block;
 +
font-size: 1em;
 +
font-weight: 300;
 +
padding-left: 2.4em;
 +
padding-right: 0.75em;
 +
position: relative;
 +
}
 +
 
 +
input[type="checkbox"] + label:before,
 +
input[type="radio"] + label:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 
}
 
}
−
     
 
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
input[type="checkbox"] + label:before,
−
#mainContainer {
+
input[type="radio"] + label:before {
 +
background: rgba(144, 144, 144, 0.075);
 +
border-radius: 6px;
 +
border: solid 1px rgba(144, 144, 144, 0.25);
 +
content: '';
 +
display: inline-block;
 +
height: 1.65em;
 +
left: 0;
 +
line-height: 1.58125em;
 +
position: absolute;
 +
text-align: center;
 +
top: 0;
 +
width: 1.65em;
 +
}
 +
 
 +
input[type="checkbox"]:checked + label:before,
 +
input[type="radio"]:checked + label:before {
 +
background: #192024;
 +
border-color: #192024;
 +
color: #ffffff;
 +
content: '\f00c';
 +
}
 +
 
 +
input[type="checkbox"]:focus + label:before,
 +
input[type="radio"]:focus + label:before {
 +
border-color: #629DD1;
 +
box-shadow: 0 0 0 1px #629DD1;
 +
}
 +
 
 +
input[type="checkbox"] + label:before {
 +
border-radius: 6px;
 +
}
 +
 
 +
input[type="radio"] + label:before {
 +
border-radius: 100%;
 +
}
 +
 
 +
::-webkit-input-placeholder {
 +
color: #bbb !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
:-moz-placeholder {
 +
color: #bbb !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
::-moz-placeholder {
 +
color: #bbb !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
:-ms-input-placeholder {
 +
color: #bbb !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
.formerize-placeholder {
 +
color: #bbb !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
/* Box */
 +
 
 +
.box {
 +
border-radius: 6px;
 +
border: solid 1px rgba(144, 144, 144, 0.25);
 +
margin-bottom: 2em;
 +
padding: 3em 2em;
 +
}
 +
 
 +
.box > :last-child,
 +
.box > :last-child > :last-child,
 +
.box > :last-child > :last-child > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.box.alt {
 +
border: 0;
 +
border-radius: 0;
 +
padding: 0;
 +
}
 +
 
 +
/* Icon */
 +
 
 +
.icon {
 +
text-decoration: none;
 +
border-bottom: none;
 +
position: relative;
 +
}
 +
 
 +
.icon:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
.icon > .label {
 +
display: none;
 +
}
 +
 
 +
.icon.major {
 +
display: inline-block;
 +
margin: 0 0 1.25em 0;
 +
color: #ffffff;
 +
background: #629DD1;
 +
width: 3em;
 +
height: 3em;
 +
font-size: 2em;
 +
text-align: center;
 +
line-height: 3em;
 +
border-radius: 100%;
 +
box-shadow: 0 0 0 10px #fff, 0 0 0 11px rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
/* Image */
 +
 
 +
.image {
 +
border-radius: 6px;
 +
border: 0;
 +
display: inline-block;
 +
position: relative;
 +
}
 +
 
 +
.image img {
 +
border-radius: 6px;
 +
display: block;
 +
}
 +
 
 +
.image.left {
 +
float: left;
 +
padding: 0 1.5em 1em 0;
 +
top: 0.25em;
 +
}
 +
 
 +
.image.right {
 +
float: right;
 +
padding: 0 0 1em 1.5em;
 +
top: 0.25em;
 +
}
 +
 
 +
.image.fit {
 +
display: block;
 +
margin: 0 0 2em 0;
 +
width: 100%;
 +
}
 +
 
 +
.image.fit img {
 +
display: block;
 
width: 100%;
 
width: 100%;
−
overflow:hidden;
 
−
float:left;
 
−
margin-left:20px;
 
−
margin-bottom: 10px;
 
−
background-color: #fff;
 
−
border-bottom: 14px solid #565656;
 
−
border-right: 2px solid #565656;
 
−
border-left: 2px solid #565656;
 
−
border-top: 2px solid #565656;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
 
}
 
}
  
−
/* Creates the container for the menu */
+
/* List */
−
#menuContainer  {  
+
 
−
float:right;
+
ol {
−
width: 134px;
+
list-style: decimal;
−
padding: 20px 0px;
+
margin: 0 0 2em 0;
−
border-top: 14px solid #565656;
+
padding-left: 1.25em;
−
background-color: #E8E8E9;
+
}
 +
 
 +
ol li {
 +
padding-left: 0.25em;
 +
}
 +
 
 +
ul {
 +
list-style: disc;
 +
margin: 0 0 2em 0;
 +
padding-left: 1em;
 +
}
 +
 
 +
ul li {
 +
padding-left: 0.5em;
 +
}
 +
 
 +
ul.alt {
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.alt li {
 +
border-top: solid 1px rgba(144, 144, 144, 0.25);
 +
padding: 0.5em 0;
 
}
 
}
  
−
drop_menu {
+
ul.alt li:first-child {
−
background:#005555;
+
border-top: 0;
−
padding:0;
+
padding-top: 0;
−
margin:0;
+
}
−
list-style-type:none;
+
−
height:30px;
+
−
}
+
  
−
.drop_menu li { float:left; }
+
ul.icons {
−
.drop_menu li a {
+
cursor: default;
−
padding:9px 20px;
+
list-style: none;
−
display:block;
+
padding-left: 0;
−
color:#fff;
+
}
−
text-decoration:none;
+
−
font:12px arial, verdana, sans-serif;
+
−
}
+
  
−
/* Submenu */
+
ul.icons li {
−
.drop_menu ul {
+
display: inline-block;
−
position:absolute;
+
padding: 0 1.25em 0 0;
−
left:-9999px;
+
}
−
top:-9999px;
+
−
list-style-type:none;
+
−
}
+
−
.drop_menu li:hover { position:relative; background:#5FD367; }
+
−
.drop_menu li:hover ul {
+
−
left:0px;
+
−
top:30px;
+
−
background:#5FD367;
+
−
padding:0px;
+
−
}
+
  
−
.drop_menu li:hover ul li a {
+
ul.icons li:last-child {
−
padding:5px;
+
padding-right: 0;
−
display:block;
+
}
−
width:168px;
+
−
text-indent:15px;
+
−
background-color:#5FD367;
+
−
}
+
−
.drop_menu li:hover ul li a:hover { background:#005555; }
+
  
 +
ul.icons li .icon:before {
 +
font-size: 1.5em;
 +
}
  
−
/* Creates the container for the content */
+
ul.actions {
−
#contentContainer {
+
cursor: default;
−
padding-top:20px;
+
list-style: none;
−
padding-right:10px;
+
padding-left: 0;
−
margin-bottom: 20px;
+
}
−
width: 100%px;
+
 
−
padding-left: 20px;
+
ul.actions li {
−
float: left;
+
display: inline-block;
−
background-color: #fff;  
+
padding: 0 1em 0 0;
−
border-top: 14px solid #565656;
+
vertical-align: middle;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
 
}
 
}
  
−
/*Set up height place holder for the banner*/
+
ul.actions li:last-child {
−
#bannerContainer {
+
padding-right: 0;
−
height:200px;
+
}
−
margin:auto;
+
 
−
text-align:center;
+
ul.actions.small li {
−
color: #24B694;
+
padding: 0 0.5em 0 0;
 
}
 
}
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
ul.actions.vertical li {
 +
display: block;
 +
padding: 1em 0 0 0;
 +
}
  
−
/*Change the styling of text for everything inside main container*/
+
ul.actions.vertical li:first-child {
−
#mainContainer p {  
+
padding-top: 0;
−
font-size: 13px;
+
}
−
color: #000000;
+
 
 +
ul.actions.vertical li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.vertical.small li {
 +
padding: 0.5em 0 0 0;
 
}
 
}
−
+
 
−
/*This changes the color and font family */
+
ul.actions.vertical.small li:first-child {
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
padding-top: 0;
−
color: #565656;
+
}
−
border-bottom: none;
+
 
−
font-weight: bold;
+
ul.actions.fit {
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
display: table;
−
margin-top:10px;
+
margin-left: -1em;
 +
padding: 0;
 +
table-layout: fixed;
 +
width: calc(100% + 1em);
 
}
 
}
  
−
/*Style of the links - links are different inside the menu */
+
ul.actions.fit li {
−
#contentContainer a {  
+
display: table-cell;
−
font-weight: bold;
+
padding: 0 0 0 1em;
−
color: #23b593;
+
}
 +
 
 +
ul.actions.fit li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.fit.small {
 +
margin-left: -0.5em;
 +
width: calc(100% + 0.5em);
 +
}
 +
 
 +
ul.actions.fit.small li {
 +
padding: 0 0 0 0.5em;
 +
}
 +
 
 +
dl {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
/* Table */
 +
 
 +
.table-wrapper {
 +
-webkit-overflow-scrolling: touch;
 +
overflow-x: auto;
 +
}
 +
 
 +
table {
 +
margin: 0 0 2em 0;
 +
width: 100%;
 +
}
 +
 
 +
table tbody tr {
 +
border: solid 1px rgba(144, 144, 144, 0.25);
 +
border-left: 0;
 +
border-right: 0;
 +
}
 +
 
 +
table tbody tr:nth-child(2n + 1) {
 +
background-color: rgba(144, 144, 144, 0.075);
 
}
 
}
  
−
  /* Styling links on hover- links are different inside the menu */
+
table td {
−
#contentContainer a:hover {  
+
padding: 0.75em 0.75em;
−
color: #59bf92;
+
}
 +
 
 +
table th {
 +
color: #666f77;
 +
font-size: 0.9em;
 +
font-weight: 500;
 +
padding: 0 0.75em 0.75em 0.75em;
 +
text-align: left;
 +
}
 +
 
 +
table thead {
 +
border-bottom: solid 2px rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
table tfoot {
 +
border-top: solid 2px rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
table.alt {
 +
border-collapse: separate;
 +
}
 +
 
 +
table.alt tbody tr td {
 +
border: solid 1px rgba(144, 144, 144, 0.25);
 +
border-left-width: 0;
 +
border-top-width: 0;
 
}
 
}
  
−
/*Change the styling of tables */
+
table.alt tbody tr td:first-child {
−
        #contentContainer table {
+
border-left-width: 1px;
−
    border: 1px solid #565656;
+
}
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
table.alt tbody tr:first-child td {
−
    #contentContainer  td {
+
border-top-width: 1px;
−
    padding: 10px;
+
}
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
table.alt thead {
−
    #contentContainer th {
+
border-bottom: 0;
−
    background-color: #E8E8E9;
+
}
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
 +
table.alt tfoot {
 +
border-top: 0;
 +
}
  
 +
/* Button */
  
−
/*MENU STYLING */
+
input[type="submit"],
 +
input[type="reset"],
 +
input[type="button"],
 +
.button {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-o-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
background-color: #192024;
 +
border-radius: 6px;
 +
border: 0;
 +
color: #ffffff !important;
 +
cursor: pointer;
 +
display: inline-block;
 +
font-weight: 300;
 +
text-transform: uppercase;
 +
letter-spacing: 0.125em;
 +
font-size: 0.9em;
 +
height: 2.85em;
 +
line-height: 2.85em;
 +
padding: 0 1.75em;
 +
text-align: center;
 +
text-decoration: none;
 +
white-space: nowrap;
 +
text-indent: 0.25em;
 +
}
  
−
/*Styling for the links in the menu */
+
input[type="submit"]:hover,
−
#menuContainer a {
+
input[type="reset"]:hover,
−
color: #565656;
+
input[type="button"]:hover,
−
text-decoration:none;
+
.button:hover {
−
font-weight: bold;
+
background-color: #232d33;
 +
}
 +
 
 +
input[type="submit"]:active,
 +
input[type="reset"]:active,
 +
input[type="button"]:active,
 +
.button:active {
 +
background-color: #0f1315;
 +
}
 +
 
 +
input[type="submit"].icon,
 +
input[type="reset"].icon,
 +
input[type="button"].icon,
 +
.button.icon {
 +
padding-left: 1.35em;
 +
}
 +
 
 +
input[type="submit"].icon:before,
 +
input[type="reset"].icon:before,
 +
input[type="button"].icon:before,
 +
.button.icon:before {
 +
margin-right: 0.5em;
 
}
 
}
  
−
/* Sets the style for lists inside menuContainer  */
+
input[type="submit"].fit,
−
#menuContainer ul {  
+
input[type="reset"].fit,
−
list-style: none;
+
input[type="button"].fit,
−
margin-left:0px;
+
.button.fit {
 +
display: block;
 +
margin: 0 0 1em 0;
 +
width: 100%;
 +
}
 +
 
 +
input[type="submit"].small,
 +
input[type="reset"].small,
 +
input[type="button"].small,
 +
.button.small {
 +
font-size: 0.7em;
 +
}
 +
 
 +
input[type="submit"].big,
 +
input[type="reset"].big,
 +
input[type="button"].big,
 +
.button.big {
 +
font-size: 1.2em;
 +
height: 2.65em;
 +
line-height: 2.65em;
 +
}
 +
 
 +
input[type="submit"].alt,
 +
input[type="reset"].alt,
 +
input[type="button"].alt,
 +
.button.alt {
 +
background-color: transparent;
 +
box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.25);
 +
color: #666f77 !important;
 +
}
 +
 
 +
input[type="submit"].alt:hover,
 +
input[type="reset"].alt:hover,
 +
input[type="button"].alt:hover,
 +
.button.alt:hover {
 +
background-color: rgba(144, 144, 144, 0.075);
 
}
 
}
  
−
/*Styles the list items to become menu buttons */
+
input[type="submit"].alt:active,
−
#menuContainer ul li {
+
input[type="reset"].alt:active,
−
text-align: center;
+
input[type="button"].alt:active,
−
display: block;
+
.button.alt:active {
−
width: 100%;
+
background-color: rgba(144, 144, 144, 0.2);
−
height:30px;
+
−
padding-top:10px;
+
 
}
 
}
  
−
/*For the menu buttons, changes the color when hovering*/
+
input[type="submit"].alt.icon:before,
−
#menuContainer li:hover {
+
input[type="reset"].alt.icon:before,
−
color: #FFF;
+
input[type="button"].alt.icon:before,
−
background-color: #24B694;
+
.button.alt.icon:before {
 +
color: #bbb;
 
}
 
}
  
−
/*Submenus are not displayed as default*/
+
input[type="submit"].special,
−
#menuContainer li ul {
+
input[type="reset"].special,
−
display: none;
+
input[type="button"].special,
−
padding-top:15px;
+
.button.special {
−
margin-left: -19px;
+
background-color: #629DD1;
 +
color: #ffffff !important;
 +
}
 +
 
 +
input[type="submit"].special:hover,
 +
input[type="reset"].special:hover,
 +
input[type="button"].special:hover,
 +
.button.special:hover {
 +
background-color: #76a9d7;
 
}
 
}
  
−
/*Submenus are displayed when hovering the menu button */
+
input[type="submit"].special:active,
−
#menuContainer li:hover ul {
+
input[type="reset"].special:active,
−
/*display: inline-block; */
+
input[type="button"].special:active,
−
display: block;
+
.button.special:active {
−
position: absolute;
+
background-color: #4e91cb;
−
float:right;
+
}
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
  
−
/*Style the submenu buttons*/
+
input[type="submit"].disabled, input[type="submit"]:disabled,
−
#menuContainer li ul li{
+
input[type="reset"].disabled,
−
background-color: #59BF92;  
+
input[type="reset"]:disabled,
−
padding-left:20px;
+
input[type="button"].disabled,
−
padding-right:20px;
+
input[type="button"]:disabled,
−
height:30px;
+
.button.disabled,
−
padding-top:10px;
+
.button:disabled {
−
margin-top:-2px;
+
background-color: #555f66 !important;
−
color: #565656;
+
box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
−
width: 150px;
+
color: #fff !important;
 +
cursor: default;
 +
opacity: 0.25;
 +
}
 +
 
 +
/* Wrapper */
 +
 
 +
.wrapper {
 +
padding: 6em 0 4em 0;
 +
}
 +
 
 +
.wrapper.style1 {
 +
background: #fff;
 +
color: #555f66;
 +
}
 +
 
 +
.wrapper.style2 {
 +
background: #192024;
 +
color: #c5c7c8;
 +
}
 +
 
 +
.wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
 +
color: #ffffff;
 
}
 
}
  
−
/*CLASSES */
+
.wrapper.style2 header p {
 +
color: #a3a5a7;
 +
}
  
−
/*Clear class for all the pages, adds spacing too*/
+
.wrapper.style2 .button.alt {
−
.clear{
+
box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.75);
−
clear:both;
+
color: #ffffff !important;
−
height: 10px;
+
 
}
 
}
  
 +
.wrapper.style2 .button.alt:hover {
 +
background-color: rgba(144, 144, 144, 0.275);
 +
}
  
−
/* highlight box for special messages */
+
.wrapper.style2 .button.alt:active {
−
    .highlightBox {
+
background-color: rgba(144, 144, 144, 0.4);
−
        width:500px;
+
}
−
        margin:auto;
+
−
        background-color: #E8E8E9;  
+
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
  
−
              .header {  
+
.wrapper.style2 .button.alt.icon:before {
−
            height: 50px;
+
color: #a3a5a7;
−
            background: #F0F0F0;  
+
}
−
            border: 1px solid #CCC;
+
−
            position: fixed;
+
−
            top: 0px;
+
−
            width: 100%;
+
−
                }
+
−
+
−
</style>
+
−
<!-- End of CSS -->
+
  
 +
/* Header */
  
−
<!-- Start of the template html elements. -->
+
#skel-layers-wrapper {
−
<div class = "header">
+
padding-top: 3em;
 +
}
  
−
<div class="drop">
+
#header {
−
<ul class="drop_menu">
+
background: #fff;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill"><li>HOME</li></a>
+
color: #555f66;
 +
cursor: default;
 +
height: 3em;
 +
left: 0;
 +
line-height: 3em;
 +
position: fixed;
 +
top: 0;
 +
width: 100%;
 +
z-index: 10000;
 +
box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.25);
 +
}
  
−
<li><a href='#'>Link 2</a>
+
#header h1 {
−
<ul>
+
color: #666f77;
−
<li><a href='#'>Sub Link 1</a></li>
+
font-weight: 500;
−
<li><a href='#'>Sub Link 2</a></li>
+
height: inherit;
−
<li><a href='#'>Sub Link 3</a></li>
+
left: 1.25em;
−
<li><a href='#'>Sub Link 4</a></li>
+
line-height: inherit;
−
</ul>
+
margin: 0;
−
</li>
+
padding: 0;
−
<li><a href='#'>Link 3</a>
+
position: absolute;
−
<ul>
+
top: 0;
−
<li><a href='#'>Sub Link 1</a></li>
+
}
−
<li><a href='#'>Sub Link 2</a></li>
+
−
<li><a href='#'>Sub Link 3</a></li>
+
−
<li><a href='#'>Sub Link 4</a></li>
+
−
</ul>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
<div id="menuContainer">
+
−
</div>
+
  
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
#header h1 a {
 +
font-size: 1.25em;
 +
}
  
 +
#header nav {
 +
height: inherit;
 +
line-height: inherit;
 +
position: absolute;
 +
right: 1.25em;
 +
top: 0;
 +
vertical-align: middle;
 +
}
  
−
<div id="bannerContainer">
+
#header nav > ul {
−
<br><br>
+
list-style: none;
−
<h2> Add a banner to your wiki! </h2>
+
margin: 0;
−
+
padding-left: 0;
−
<p>You can make the image 980px  by  200px</p>
+
}
−
<p> Remember to call the file: "<i>Team_UNC-Chapel_Hill_banner.jpg</i>" </p>
+
−
</div>
+
  
−
<!-- Start of menu -->
+
#header nav > ul > li {
 +
border-radius: 6px;
 +
display: inline-block;
 +
margin-left: 2em;
 +
padding-left: 0;
 +
}
  
 +
#header nav > ul > li a {
 +
-moz-transition: color 0.2s ease-in-out;
 +
-webkit-transition: color 0.2s ease-in-out;
 +
-o-transition: color 0.2s ease-in-out;
 +
-ms-transition: color 0.2s ease-in-out;
 +
transition: color 0.2s ease-in-out;
 +
color: #555f66;
 +
display: inline-block;
 +
text-decoration: none;
 +
}
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
#header nav > ul > li a:hover {
−
<ul>
+
color: #629DD1;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill"><li>HOME</li></a>
+
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Team"><li>TEAM</li></a>
+
#header nav > ul > li:first-child {
 +
margin-left: 0;
 +
}
  
−
<a href="#"><li>PROJECT
+
#header nav > ul > li .button {
−
            <ul>
+
height: 2.25em;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Description"><li>Description</li></a>
+
line-height: 2.25em;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
margin-bottom: 0;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Results"><li>Results</li></a> 
+
padding: 0 1em;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Design"><li>Design</li></a>
+
position: relative;
−
</ul>
+
top: -0.075em;
−
</li></a>
+
vertical-align: middle;
 +
}
  
−
<a href="#"><li>PARTS
+
#header .container {
−
            <ul>
+
position: relative;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Parts"><li>Team Parts</li></a>
+
}
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Notebook"><li>NOTEBOOK</li></a>
+
#header .container h1 {
−
     
+
left: 0;
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Attributions"><li>ATTRIBUTIONS</li></a>
+
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Collaborations"><li>COLLABORATIONS</li></a>
+
#header .container nav {
 +
right: 0;
 +
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Practices"><li>HUMAN PRACTICES</li></a>
+
/* Banner */
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Safety"><li>SAFETY</li></a>
+
#banner {
 +
background-color: #666666;
 +
background-image: url(https://static.igem.org/mediawiki/2015/7/79/Background.jpeg);
 +
background-size: cover;
 +
background-position: center center;
 +
background-repeat: no-repeat;
 +
color: #d8d8d8;
 +
padding: 14em 0;
 +
text-align: center;
 +
position: relative;
 +
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Modeling"><li>MODELING</li></a>
+
#banner:before {
 +
content: '';
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
width: 100%;
 +
height: 100%;
 +
background: rgba(64, 72, 80, 0.25);
 +
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Measurement"><li>MEASUREMENT</li></a>
+
#banner .inner {
 +
position: relative;
 +
z-index: 1;
 +
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Software"><li>SOFTWARE</li></a>
+
#banner .inner :last-child {
 +
margin-bottom: 0;
 +
}
  
−
<a href="https://2015.igem.org/Team:UNC-Chapel_Hill/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
#banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
 +
color: #ffffff;
 +
}
  
−
</ul>
+
#banner .button.alt {
−
</div>
+
box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.75);
−
<!-- End of menu  -->
+
color: #ffffff !important;
 +
}
  
−
<!-- Start of content -->
+
#banner .button.alt:hover {
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> </div>
+
background-color: rgba(144, 144, 144, 0.275);
 +
}
  
−
</html>
+
#banner .button.alt:active {
 +
background-color: rgba(144, 144, 144, 0.4);
 +
}
 +
 
 +
#banner .button.alt.icon:before {
 +
color: #c1c1c1;
 +
}
 +
 
 +
#banner .button {
 +
min-width: 12em;
 +
}
 +
 
 +
#banner h2 {
 +
font-size: 3.5em;
 +
line-height: 1em;
 +
margin: 0 0 0.5em 0;
 +
padding: 0;
 +
}
 +
 
 +
#banner p {
 +
font-size: 1.5em;
 +
margin-bottom: 2em;
 +
}
 +
 
 +
#banner p a {
 +
color: #ffffff;
 +
text-decoration: none;
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer {
 +
background: #f8f8f8;
 +
padding: 4em 0 6em 0;
 +
}
 +
 
 +
#footer a {
 +
color: inherit;
 +
}
 +
 
 +
#footer .copyright {
 +
color: #bbb;
 +
font-size: 0.9em;
 +
margin: 2em 0 0 0;
 +
padding: 0;
 +
text-align: center;
 +
}
 +
 
 +
#footer .copyright li {
 +
border-left: solid 1px rgba(144, 144, 144, 0.25);
 +
display: inline-block;
 +
list-style: none;
 +
margin-left: 1.5em;
 +
padding-left: 1.5em;
 +
}
 +
 
 +
#footer .copyright li:first-child {
 +
border-left: 0;
 +
margin-left: 0;
 +
padding-left: 0;
 +
}
 +
 
 +
#footer .icons a {
 +
color: #bbb;
 +
}
 +
</style>
 +
<!-- End of CSS -->

Latest revision as of 02:04, 5 July 2015