Difference between revisions of "Template:Template Wellesley TheTech"
(143 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
<!-- Start of CSS--> | <!-- Start of CSS--> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | .css-slideshow { | ||
+ | position: relative; | ||
+ | max-width: 495px; | ||
+ | height: 370px; | ||
+ | margin: 1em auto .5em auto; | ||
+ | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | .css-slideshow figure { | ||
+ | margin: 0; | ||
+ | max-width: 495px; | ||
+ | height: 370px; | ||
+ | background: #fff; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .css-slideshow img { | ||
+ | -webkit-box-shadow: 0 0 2px #666; | ||
+ | box-shadow: 0 0 2px #666; | ||
+ | } | ||
+ | .css-slideshow figcaption { | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | color: #fff; | ||
+ | background: rgba(0,0,0, .3); | ||
+ | font-size: .8em; | ||
+ | padding: 8px 12px; | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity .5s; | ||
+ | -moz-transition: opacity .5s; | ||
+ | -o-transition: opacity .5s; | ||
+ | -ms-transition: opacity .5s; | ||
+ | transition: opacity .5s; | ||
+ | } | ||
+ | .css-slideshow:hover figure figcaption { | ||
+ | -webkit-transition: opacity .5s; | ||
+ | -moz-transition: opacity .5s; | ||
+ | -o-transition: opacity .5s; | ||
+ | -ms-transition: opacity .5s; | ||
+ | transition: opacity .5s; | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .css-slideshow-attr { | ||
+ | max-width: 530px; | ||
+ | text-align: right; | ||
+ | font-size: .7em; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | .css-slideshow-attr a { | ||
+ | color: #666; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(1),.css-slideshow figure:nth-child(2),.css-slideshow figure:nth-child(3),.css-slideshow figure:nth-child(4),.css-slideshow figure:nth-child(5),.css-slideshow figure:nth-child(6),.css-slideshow figure:nth-child(7) { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(1) { | ||
+ | -webkit-animation: xfade 48s 42s infinite; | ||
+ | -moz-animation: xfade 48s 42s infinite; | ||
+ | -ms-animation: xfade 48s 42s infinite; | ||
+ | -o-animation: xfade 48s 42s infinite; | ||
+ | animation: xfade 48s 42s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(2) { | ||
+ | -webkit-animation: xfade 48s 36s infinite; | ||
+ | -moz-animation: xfade 48s 36s infinite; | ||
+ | -ms-animation: xfade 48s 36s infinite; | ||
+ | -o-animation: xfade 48s 36s infinite; | ||
+ | animation: xfade 48s 36s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(3) { | ||
+ | -webkit-animation: xfade 48s 30s infinite; | ||
+ | -moz-animation: xfade 48s 30s infinite; | ||
+ | -ms-animation: xfade 48s 30s infinite; | ||
+ | -o-animation: xfade 48s 30s infinite; | ||
+ | animation: xfade 48s 30s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(4) { | ||
+ | -webkit-animation: xfade 48s 24s infinite; | ||
+ | -moz-animation: xfade 48s 24s infinite; | ||
+ | -ms-animation: xfade 48s 24s infinite; | ||
+ | -o-animation: xfade 48s 24s infinite; | ||
+ | animation: xfade 48s 24s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(5) { | ||
+ | -webkit-animation: xfade 48s 18s infinite; | ||
+ | -moz-animation: xfade 48s 18s infinite; | ||
+ | -ms-animation: xfade 48s 18s infinite; | ||
+ | -o-animation: xfade 48s 18s infinite; | ||
+ | animation: xfade 48s 18s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(6) { | ||
+ | -webkit-animation: xfade 48s 12s infinite; | ||
+ | -moz-animation: xfade 48s 12s infinite; | ||
+ | -ms-animation: xfade 48s 12s infinite; | ||
+ | -o-animation: xfade 48s 12s infinite; | ||
+ | animation: xfade 48s 12s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(7) { | ||
+ | -webkit-animation: xfade 48s 6s infinite; | ||
+ | -moz-animation: xfade 48s 6s infinite; | ||
+ | -ms-animation: xfade 48s 6s infinite; | ||
+ | -o-animation: xfade 48s 6s infinite; | ||
+ | animation: xfade 48s 6s infinite; | ||
+ | } | ||
+ | .css-slideshow figure:nth-child(8) { | ||
+ | -webkit-animation: xfade 48s 0s infinite; | ||
+ | -moz-animation: xfade 48s 0s infinite; | ||
+ | -ms-animation: xfade 48s 0s infinite; | ||
+ | -o-animation: xfade 48s 0s infinite; | ||
+ | animation: xfade 48s 0s infinite; | ||
+ | } | ||
+ | @keyframes "xfade" { | ||
+ | 0% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 14.67% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 16.67% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 98% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
+ | @-moz-keyframes xfade { | ||
+ | 0% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 14.67% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 16.67% { | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 98% { | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
+ | @-webkit-keyframes "xfade" { | ||
+ | 0% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 14.67% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 16.67% { | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 98% { | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
+ | @-ms-keyframes "xfade" { | ||
+ | 0% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 14.67% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 16.67% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 98% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
+ | @-o-keyframes "xfade" { | ||
+ | 0% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 14.67% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | 16.67% { | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 98% { | ||
+ | filter: alpha(opacity=0); | ||
+ | opacity: 0; | ||
+ | } | ||
+ | 100% { | ||
+ | filter: alpha(opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
Line 20: | Line 256: | ||
#bodyContent {border:none; height: 100%; width: 100%; margin:auto; position:relative; } | #bodyContent {border:none; height: 100%; width: 100%; margin:auto; position:relative; } | ||
− | #content {border-left: 0px; border-right: 0px; height: | + | #content {border-left: 0px; border-right: 0px; height:100%; background: transparent; min-height: 679px; bottom:0px;} |
#globalWrapper {font-size: 100%; height: 100%; margin: 0px; position:absolute;} | #globalWrapper {font-size: 100%; height: 100%; margin: 0px; position:absolute;} | ||
− | |||
− | |||
.firstHeading {display:none;} | .firstHeading {display:none;} | ||
Line 38: | Line 272: | ||
} | } | ||
+ | |||
+ | |||
/*Set up height place holder for the banner*/ | /*Set up height place holder for the banner*/ | ||
#bannerContainer { | #bannerContainer { | ||
− | bottom: | + | bottom: 10px; |
margin-left: -45px; | margin-left: -45px; | ||
width: 1061px; | width: 1061px; | ||
Line 48: | Line 284: | ||
pointer-events: none !important; | pointer-events: none !important; | ||
} | } | ||
+ | |||
+ | #linkscontainer{ | ||
+ | position: absolute; | ||
+ | height: 185px; | ||
+ | top: 2px; | ||
+ | right: -40px; | ||
+ | } | ||
+ | |||
+ | #linkscontainer img{ | ||
+ | height: inherit; | ||
+ | } | ||
Line 75: | Line 322: | ||
font-family: "SlimJoe"; | font-family: "SlimJoe"; | ||
font-size: 45px; | font-size: 45px; | ||
− | line-height: | + | line-height: 10px; |
margin-left: 410px; | margin-left: 410px; | ||
margin-top: -45px; | margin-top: -45px; | ||
Line 92: | Line 339: | ||
#menuBar { | #menuBar { | ||
− | padding-top: | + | padding-top: 185px; |
width: 100%; | width: 100%; | ||
} | } | ||
Line 118: | Line 365: | ||
white-space: nowrap; | white-space: nowrap; | ||
width: 20% ; | width: 20% ; | ||
+ | border-left: 1px solid #57c7da; | ||
+ | border-right: 1px solid #57c7da; | ||
} | } | ||
Line 123: | Line 372: | ||
width: 15% !important; | width: 15% !important; | ||
pointer-events: none; | pointer-events: none; | ||
+ | border-left: 0px; | ||
+ | border-right: 0px; | ||
} | } | ||
#menuBar ul li:hover { | #menuBar ul li:hover { | ||
− | color: # | + | color: #fff; |
− | background: # | + | background: #57c7da; |
} | } | ||
Line 133: | Line 384: | ||
padding: 0; | padding: 0; | ||
position: absolute; | position: absolute; | ||
− | + | left: inherit; | |
− | + | width: 209px; | |
− | + | height: auto; | |
display: none; | display: none; | ||
− | + | background-color: #96dce8; | |
− | + | ||
} | } | ||
#menuBar ul li ul li { | #menuBar ul li ul li { | ||
− | + | font-size: 13px; | |
− | + | background-color: #96dce8; | |
− | + | color: #717171; | |
+ | width: 209px; | ||
+ | height: 20px; | ||
+ | line-height: 20px; | ||
+ | display: block; | ||
} | } | ||
+ | #menuBar li:hover ul { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #overviewRect{ | ||
+ | margin:10px; | ||
+ | margin-left:260px; | ||
+ | color: #717171; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 12px; | ||
+ | padding: 10px; | ||
+ | text-align: justify; | ||
+ | border: 3px solid #fff; | ||
+ | } | ||
+ | |||
+ | #allPage_banner{ | ||
+ | position: absolute; | ||
+ | margin-top: 1px; | ||
+ | margin-left: 0px; | ||
+ | width: inherit; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #allPage_banner img { | ||
+ | width: inherit; | ||
+ | } | ||
+ | |||
+ | #allPage_banner h1{ | ||
+ | color: #fff !important; | ||
+ | font-weight: bold; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 70px; | ||
+ | border: 0px; | ||
+ | line-height: 70px; | ||
+ | margin-top: 30px; | ||
+ | margin-left: 50px; | ||
+ | margin-bottom: 0; | ||
+ | opacity: 0.9; | ||
+ | padding: 0px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #allPage_banner h1:hover{ | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | #allPage_banner a { | ||
+ | color: #fff !important; | ||
+ | } | ||
+ | |||
+ | #allPage_banner a:hover{ | ||
+ | padding-top: 2px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .allPage ul li ul li{ | ||
+ | width: 249px; | ||
+ | } | ||
+ | |||
+ | #pageContent { | ||
+ | width: 100%; | ||
+ | border: none; | ||
+ | background: transparent; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | #pageContent a { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | #teamlinks{ | ||
+ | color: #57c7da; | ||
+ | font-family: "SlimJoe"; | ||
+ | font-size: 20px; | ||
+ | text-align:center; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | #teamlinks a:hover{ | ||
+ | color:#717171; | ||
+ | } | ||
+ | |||
+ | |||
+ | #pageContent h1 { | ||
+ | color: #57c7da; | ||
+ | font-weight: bold; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 40px; | ||
+ | border: 0px; | ||
+ | line-height: 40px; | ||
+ | margin: 0px; | ||
+ | padding: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #pageContent h2 { | ||
+ | |||
+ | color: #57c7da; | ||
+ | font-weight: bold; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 30px; | ||
+ | border: 0px; | ||
+ | line-height: 40px; | ||
+ | margin: 0px; | ||
+ | padding: 20px; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #pageContent h3 { | ||
+ | |||
+ | color: #57c7da; | ||
+ | font-weight: bold; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 25px; | ||
+ | border: 0px; | ||
+ | line-height: 25px; | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #pageContent h4 { | ||
+ | |||
+ | color: #5f5f5f; | ||
+ | font-weight: bold; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 20px; | ||
+ | border: 0px; | ||
+ | line-height: 20px; | ||
+ | margin: 0px; | ||
+ | padding: 1px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #pageContent p { | ||
+ | color: #5f5f5f; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 20px; | ||
+ | border: 0px; | ||
+ | line-height: 25px; | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | #pageContent li { | ||
+ | color: #5f5f5f; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 20px; | ||
+ | border: 0px; | ||
+ | line-height: 25px; | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .medal-list li { | ||
+ | color: #5f5f5f; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 25px; | ||
+ | border: 0px; | ||
+ | line-height: 30px; | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .medal-list a { | ||
+ | color: #57c7da; | ||
+ | } | ||
+ | |||
+ | .medal-list a:hover { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | .acknowledgementsList li { | ||
+ | color: #5f5f5f; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 20px; | ||
+ | border: 0px; | ||
+ | line-height: 25px; | ||
+ | margin: 0px; | ||
+ | padding: 2px; | ||
+ | } | ||
+ | |||
+ | ul.checkmark{ | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | ul.checkmark li:before { | ||
+ | content:"\2713\0020"; | ||
+ | } | ||
+ | |||
+ | ul.checkmark li{ | ||
+ | font-family: "SlimJoe"; | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | table.medals { | ||
+ | border-collapse: separate; | ||
+ | width: 100%; | ||
+ | border: none; | ||
+ | table-layout: auto; | ||
+ | } | ||
+ | |||
+ | a.staySame { | ||
+ | color: #5d6bb2; | ||
+ | } | ||
+ | |||
+ | a.staySame : visited { | ||
+ | color: #5d6bb2; | ||
+ | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 03:52, 19 September 2015