Difference between revisions of "Template:Team:UofC Calgary/UofC Calgary"

Line 11,483: Line 11,483:
 
   }
 
   }
 
}
 
}
 
<!--Test1-->
 
 
@import url(http://fonts.googleapis.com/css?family=Dosis:300,400,500,700&subset=latin,latin-ext);
 
 
body {
 
font-family: 'Dosis', sans-serif;
 
}
 
 
 
ul li {
 
font-size: 16px;
 
}
 
 
section .container {
 
padding-right: 25px;
 
padding-left: 25px;
 
 
}
 
 
body.index a {
 
color: #e63638;
 
font-weight: 600;
 
}
 
 
 
 
section h2 {
 
margin-left: -25px;
 
}
 
 
h2 {
 
font-size: 20px;
 
font-weight: 500;
 
color: #777;
 
margin-top: 40px;
 
margin-bottom: 20px;
 
}
 
 
h1 {
 
font-size: 30px;
 
font-weight: 400;
 
}
 
 
 
header {
 
padding-top: 100px;
 
padding-bottom: 100px;
 
background: #27b0d1;
 
color: #fff;
 
}
 
header h1 {
 
font-size: 46px;
 
font-weight: 300;
 
margin-top: 20px;
 
margin-bottom: 40px;
 
}
 
header p {
 
font-size: 18px;
 
font-weight: 500;
 
color: rgba(255,255,255,0.7);
 
}
 
section {
 
margin-top: 50px;
 
}
 
section p {
 
font-size: 16px;
 
}
 
.section-content {
 
padding-left: 50px;
 
padding-right: 50px;
 
}
 
 
.btns-header{
 
margin-top: 50px;
 
}
 
 
#examples {
 
border-top: 1px solid #ddd;
 
padding-bottom: 40px;
 
padding-left: 15px;
 
padding-top: 30px;
 
}
 
 
#examples ul {
 
list-style: none;
 
margin: 0;
 
padding: 0;
 
}
 
 
#examples li {
 
list-style: none;
 
font-size: 18px;
 
}
 
 
#examples h2 {
 
margin-left: -15px;
 
color: #222;
 
font-weight: 600;
 
margin-top: 10px;
 
}
 
 
#bef_int {
 
border-top: 1px solid #ddd;
 
padding-top: 30px;
 
}
 
 
section#bef_int p {
 
font-size: 18px;
 
}
 
 
 
body.index a.btn-jprt-lg {
 
padding: 15px 30px;
 
background: none;
 
border: 1px solid #fff;
 
color: #fff;
 
font-size: 20px;
 
border-radius: 10px;
 
margin: 10px;
 
font-weight: 300;
 
}
 
body.index a.btn-jprt-lg:hover {
 
background: rgba(255,255,255,1);
 
text-decoration: none;
 
color: #27b0d1;
 
}
 
.btn-jprt-lg {
 
padding: 15px 30px;
 
background: none;
 
border: 1px solid #fff;
 
color: #fff;
 
font-size: 20px;
 
border-radius: 10px;
 
margin: 10px;
 
font-weight: 300;
 
}
 
.btn-jprt-lg:hover {
 
background: rgba(255,255,255,1);
 
text-decoration: none;
 
color: #27b0d1;
 
}
 
 
 
 
h2.example-h2 {
 
color: #27b0d1;
 
}
 
 
 
 
footer a {
 
color: #e63638;
 
font-weight: 600;
 
}
 
 
footer {
 
padding-top: 100px;
 
padding-bottom: 100px;
 
margin-top: 100px;
 
background: #444;
 
color: #fff;
 
}
 
 
@media (max-width: 992px) {
 
    footer {
 
    text-align: center;
 
    }
 
    footer li {
 
    list-style: none;
 
    }
 
    footer ul {
 
    padding: 0;
 
    margin-bottom: 30px;
 
    }
 
}
 
 
footer .index_in_footer {
 
list-style: none;
 
}
 
footer .index_in_footer li {
 
font-size: 18px;
 
}
 
footer h1 {
 
font-size: 22px;
 
color: #aaa;
 
}
 
 
 
 
 
#decorations-img-1 {
 
max-width: 500px;
 
margin: auto;
 
margin-top: 30px;
 
margin-bottom: 30px;
 
width: 80%;
 
}
 
#decorations-img-2 {
 
max-width: 800px;
 
margin: auto;
 
margin-top: 30px;
 
margin-bottom: 30px;
 
width: 80%;
 
}
 
 
#doc_index ul {
 
list-style: none;
 
}
 
#doc_index li {
 
list-style: none;
 
font-size: 22px;
 
}
 
 
/******* demo.csss ******/
 
#demo {
 
margin-top: 40px;
 
margin-bottom: 40px;
 
}
 
#demo h1 {
 
font-size: 40px;
 
}
 
.jprt-buttons p {
 
margin-top: 20px;
 
font-size: 18px;
 
color: #444;
 
}
 
 
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+git+less&plugins=line-highlight+line-numbers */
 
/**
 
* okaidia theme for JavaScript, CSS and HTML
 
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
 
* @author ocodia
 
*/
 
 
code[class*="language-"],
 
pre[class*="language-"] {
 
color: #f8f8f2;
 
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 
font-family: Consolas, Monaco, 'Andale Mono', monospace;
 
direction: ltr;
 
text-align: left;
 
white-space: pre;
 
word-spacing: normal;
 
word-break: normal;
 
line-height: 1.5;
 
 
-moz-tab-size: 4;
 
-o-tab-size: 4;
 
tab-size: 4;
 
 
-webkit-hyphens: none;
 
-moz-hyphens: none;
 
-ms-hyphens: none;
 
hyphens: none;
 
}
 
 
/* Code blocks */
 
pre[class*="language-"] {
 
padding: 1em;
 
margin: .5em 0;
 
overflow: auto;
 
border-radius: 0.3em;
 
}
 
 
:not(pre) > code[class*="language-"],
 
pre[class*="language-"] {
 
background: #272822;
 
}
 
 
/* Inline code */
 
:not(pre) > code[class*="language-"] {
 
padding: .1em;
 
border-radius: .3em;
 
}
 
 
.token.comment,
 
.token.prolog,
 
.token.doctype,
 
.token.cdata {
 
color: slategray;
 
}
 
 
.token.punctuation {
 
color: #f8f8f2;
 
}
 
 
.namespace {
 
opacity: .7;
 
}
 
 
.token.property,
 
.token.tag,
 
.token.constant,
 
.token.symbol,
 
.token.deleted {
 
color: #f92672;
 
}
 
 
.token.boolean,
 
.token.number {
 
color: #ae81ff;
 
}
 
 
.token.selector,
 
.token.attr-name,
 
.token.string,
 
.token.char,
 
.token.builtin,
 
.token.inserted {
 
color: #a6e22e;
 
}
 
 
.token.operator,
 
.token.entity,
 
.token.url,
 
.language-css .token.string,
 
.style .token.string,
 
.token.variable {
 
color: #f8f8f2;
 
}
 
 
.token.atrule,
 
.token.attr-value,
 
.token.function {
 
color: #e6db74;
 
}
 
 
.token.keyword {
 
color: #66d9ef;
 
}
 
 
.token.regex,
 
.token.important {
 
color: #fd971f;
 
}
 
 
.token.important,
 
.token.bold {
 
font-weight: bold;
 
}
 
.token.italic {
 
font-style: italic;
 
}
 
 
.token.entity {
 
cursor: help;
 
}
 
 
pre[data-line] {
 
position: relative;
 
padding: 1em 0 1em 3em;
 
}
 
 
.line-highlight {
 
position: absolute;
 
left: 0;
 
right: 0;
 
padding: inherit 0;
 
margin-top: 1em; /* Same as .prism’s padding-top */
 
 
background: hsla(24, 20%, 50%,.08);
 
background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 
background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 
background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 
background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 
 
pointer-events: none;
 
 
line-height: inherit;
 
white-space: pre;
 
}
 
 
.line-highlight:before,
 
.line-highlight[data-end]:after {
 
content: attr(data-start);
 
position: absolute;
 
top: .4em;
 
left: .6em;
 
min-width: 1em;
 
padding: 0 .5em;
 
background-color: hsla(24, 20%, 50%,.4);
 
color: hsl(24, 20%, 95%);
 
font: bold 65%/1.5 sans-serif;
 
text-align: center;
 
vertical-align: .3em;
 
border-radius: 999px;
 
text-shadow: none;
 
box-shadow: 0 1px white;
 
}
 
 
.line-highlight[data-end]:after {
 
content: attr(data-end);
 
top: auto;
 
bottom: .4em;
 
}
 
pre.line-numbers {
 
position: relative;
 
padding-left: 3.8em;
 
counter-reset: linenumber;
 
}
 
 
pre.line-numbers > code {
 
position: relative;
 
}
 
 
.line-numbers .line-numbers-rows {
 
position: absolute;
 
pointer-events: none;
 
top: 0;
 
font-size: 100%;
 
left: -3.8em;
 
width: 3em; /* works for line-numbers below 1000 lines */
 
letter-spacing: -1px;
 
border-right: 1px solid #999;
 
 
-webkit-user-select: none;
 
-moz-user-select: none;
 
-ms-user-select: none;
 
user-select: none;
 
 
}
 
 
.line-numbers-rows > span {
 
pointer-events: none;
 
display: block;
 
counter-increment: linenumber;
 
}
 
 
.line-numbers-rows > span:before {
 
content: counter(linenumber);
 
color: #999;
 
display: block;
 
padding-right: 0.8em;
 
text-align: right;
 
}
 
.depth-over-caption {
 
z-index: 3;
 
}
 
.depth-over-hover {
 
z-index: 7;
 
}
 
.depth-over-content {
 
z-index: 11;
 
}
 
/*** grid ***/
 
.jprt-container {
 
position: relative;
 
padding: 0;
 
}
 
.jprt-item {
 
position: absolute;
 
text-align: center;
 
 
-webkit-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    -moz-transition:  width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    -o-transition:  width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    transition:  width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    z-index: 2;
 
}
 
.jprt-caption h1 {
 
margin: 0;
 
}
 
 
.jprt-content {
 
position: absolute;
 
display: none;
 
width: 100%;
 
top: 0;
 
left: 0;
 
overflow-y: hidden;
 
 
-webkit-transition: height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    -moz-transition:  height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    -o-transition:  height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    transition:  height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
 
    z-index: 10;
 
}
 
.jprt-content.show_new_section {
 
display: inline-block;
 
z-index: 4;
 
}
 
 
.jprt-hover {
 
position: absolute;
 
 
opacity: 0;
 
width: 100%;
 
top: 0;
 
left: 0;
 
 
-webkit-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
 
    -moz-transition:  width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
 
    -o-transition:  width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
 
    transition:  width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
 
    z-index: 6;
 
}
 
 
.jprt-item:hover {
 
cursor: pointer;
 
}
 
.jprt-item:hover .jprt-hover {
 
opacity: 1;
 
}
 
/**** decorations ****/
 
.jprt-features {
 
position: absolute;
 
top: 15px;
 
left: 0;
 
}
 
.jprt-features ul {
 
list-style: none;
 
padding: 0;
 
}
 
.jprt-features li {
 
list-style: none;
 
margin-bottom: 6px;
 
padding: 3px 6px;
 
font-size: 12px;
 
}
 
 
.jprt-item-status {
 
position: absolute;
 
top: 10px;
 
right: 10px;
 
font-size: 14px;
 
}
 
 
.jprt-item-tags {
 
position: absolute;
 
bottom: 0;
 
padding: 5px 10px;
 
width: 100%;
 
}
 
.jprt-item-title {
 
position: absolute;
 
top: 40%;
 
width: 100%;
 
font-size: 24px;
 
padding: 10px;
 
}
 
h1.jprt-item-title {
 
margin-top: -13px;
 
}
 
 
.jprt-caption-img {
 
width: 30%;
 
height: auto;
 
top: 50px;
 
position: relative;
 
}
 
 
 
/**************** STYLES GENERAL *************************/
 
.jprt-btn-transparent-white {
 
color: #fff;
 
background: none;
 
border: 1px solid #fff;
 
padding: 10px 20px;
 
outline: none;
 
}
 
.jprt-btn-transparent-white:hover {
 
background: rgba(255,255,255,0.3);
 
outline: none;
 
}
 
.jprt-arrow-down-border {
 
display: none;
 
width: 60px;
 
height: 60px;
 
position: absolute;
 
bottom: 0;
 
background: #444;
 
padding: 2px;
 
left: 50%;
 
margin-left: -30px;
 
border-radius: 50%;
 
z-index: 15;
 
margin-bottom: -30px;
 
}
 
.jprt-arrow-down-back {
 
width: 56px;
 
height: 56px;
 
position: absolute;
 
background: #fff;
 
top: 2px;
 
left: 2px;
 
border-radius: 50%;
 
}
 
.jprt-arrow-down {
 
transform: rotate(45deg) ;
 
-webkit-transform: rotate(45deg) ;
 
-moz-transform: rotate(45deg) ;
 
-o-transform: rotate(45deg) ;
 
-ms-transform: rotate(45deg) ;
 
background: none;
 
border-bottom: 2px solid #444;
 
border-right: 2px solid #444;
 
border-radius: 2px;
 
position: relative;
 
width: 20px;
 
height: 20px;
 
margin: auto;
 
margin-top: 15px;
 
}
 
 
/* backgrounds */
 
.jprt-bg-build-area {
 
background: repeating-linear-gradient(
 
  -45deg,
 
  #444,
 
  #444 15px,
 
  #dab91f 15px,
 
  #dab91f 30px
 
);
 
}
 
.jprt-bg-build-area {
 
background: repeating-linear-gradient(
 
  -45deg,
 
  #444,
 
  #444 10px,
 
  #dab91f 10px,
 
  #dab91f 20px
 
);
 
}
 
 
 
/**********************************************************/
 
/**********************************************************/
 
/****************** STYLE DEFAULT *************************/
 
/**********************************************************/
 
/**********************************************************/
 
/*** buttons ***/
 
.jprt-buttons {
 
margin-top: 20px;
 
margin-bottom: 20px;
 
text-align: center;
 
}
 
.jprt-buttons .jprt-btn {
 
background: #27b0d1;
 
color: #fff;
 
font-size: 16px;
 
padding: 10px 15px;
 
margin: 10px;
 
box-shadow: none;
 
border: 2px solid #27b0d1;
 
outline-style: none;
 
}
 
.jprt-buttons .jprt-btn:hover {
 
background: #27dbd1;
 
color: #fff;
 
border: 2px solid #27dbd1;
 
outline-style: none;
 
}
 
.jprt-buttons .jprt-btn.jprt-btn-active {
 
background: #fff;
 
color: #27bbd1;
 
outline-style: none;
 
border: 2px solid #27dbd1;
 
}
 
.jprt-buttons .jprt-btn.jprt-btn-active:hover {
 
background: #27dbd1;
 
color: #fff;
 
border: 2px solid #27dbd1;
 
outline-style: none;
 
}
 
 
/*** grid ***/
 
.jprt-item {
 
background: #ddd;
 
}
 
.jprt-item:nth-child(odd) .jprt-caption {
 
background: #27b0d1;
 
}
 
.jprt-item:nth-child(even) .jprt-caption {
 
background: #27bbd1;
 
}
 
.jprt-hover {
 
background: #27d1a9;
 
}
 
.jprt-content {
 
background: #777;
 
color: #eee;
 
}
 
 
 
 
/*** item caption ***/
 
.jprt-caption h1 {
 
color: #fff;
 
}
 
 
 
/**** decorations ***/
 
.jprt-features li {
 
background: #fff;
 
color: #27b0d1;
 
}
 
 
.jprt-item-status {
 
color: #fff;
 
}
 
 
.jprt-item-tags {
 
background: rgba(0,0,0,0.2);
 
color: #fff;
 
}
 
.jprt-item-title {
 
background: rgba(0,0,0,0.2);
 
color: #fff;
 
}
 
.fruit_veg_img {
 
width: 40%;
 
max-width: 200px;
 
padding-top: 50%;
 
margin-top: -20%;
 
}
 
 
.fruit_veg_img_in_cnt {
 
margin-top: 40px;
 
margin-bottom: 40px;
 
}
 
.custom-content-title{
 
margin-top: 100px;
 
color: #444;
 
font-size: 36px;
 
}
 
.jprt-content {
 
background: #b6e86e;
 
}
 
 
#apple_item {
 
background: #66ca66;
 
}
 
#carrot_item {
 
background: #e9983f;
 
}
 
#arbuz_item {
 
background: #df7158;
 
}
 
#beans_item {
 
background: #8cb666;
 
}
 
#banana_item {
 
background: #eae15a;
 
}
 
#celery_item {
 
background: #c0f491;
 
}
 
#citrus_item {
 
background: #ffeb63;
 
}
 
#radish_item {
 
background: #ff8391;
 
}
 
 
 
 
  
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 03:02, 10 August 2016