Difference between revisions of "Team:CityU HK/Template/CSS"

m
Line 2: Line 2:
 
<style type="text/css">
 
<style type="text/css">
  
−
/* Removing wiki-like stuff */
 
−
/****************************/
 
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}
 
  
−
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
 
−
width: 100%;  
+
 
−
height: 100%;
+
 
 +
/* Resets
 +
--------------------------------------------------------------------------------*/
 +
 
 +
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,
 +
fieldset, input {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
a img {
 +
border: 0;
 +
}
 +
 
 +
a {
 +
text-decoration: none;
 +
}
 +
 
 +
/* General Styling and Structure
 +
--------------------------------------------------------------------------------*/
 +
 
 +
body {
 +
font-family: Georgia, serif;
 +
font-size: 14px;
 +
background: #F2F2F2;
 +
color: #555;
 +
line-height:24px;
 +
}
 +
 
 +
.container {
 +
margin: 0 auto;
 +
width: 946px;
 +
padding:0 7px;
 +
background:#fff;
 +
}
 +
 
 +
#header-wrap,
 +
#banner-wrap,
 +
#nav-wrap,
 +
#main-wrap,
 +
#footer-wrap
 +
{
 +
        width:100%;
 +
}
 +
 
 +
#main-wrap .container {min-height:450px;}
 +
 
 +
h3 {
 +
font-size: 22px;
 +
padding: .2em 0 .2em 0;
 +
line-height: 1.2;
 +
font-weight: normal;
 +
letter-spacing: -1px;
 +
color: #333;
 +
margin-bottom:20px;
 +
}
 +
 
 +
a {
 +
color: #C13832;
 +
}
 +
 
 +
a:hover {
 +
color: $HoverColor;
 +
}
 +
 
 +
h2 {
 +
font-size: 19px;
 +
padding: .8em 0 .2em 0;
 +
line-height: 1.2;
 +
font-weight: normal;
 +
color: #333;
 +
margin-bottom:20px;
 +
}
 +
 
 +
.weebly-text h1, h2, h3, h4, h5, h6 {font-family: Georgia, serif;}
 +
 
 +
p, blockquote {
 +
color:#777;
 +
font: 12px/22px Arial,sans-serif;
 +
}
 +
 
 +
blockquote {
 +
color:#aaa;
 +
}
 +
 
 +
 
 +
 
 +
/* Header
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#nav-wrap .container,
 +
#nav-wrap .container table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
width:946px;
 +
}
 +
 
 +
#wsite-title {
 +
    font-size:20px;
 +
color:#555;
 +
line-height:38px;
 +
float:left;
 +
font-style:italic;
 +
font-weight:bold;
 +
}
 +
 
 +
#wsite-title:hover {
 +
color:$HoverColor;
 +
}
 +
 
 +
#header {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
text-align:right;
 +
height:100px;
 +
    width:100%;
 +
}
 +
 
 +
#header,
 +
#header table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 
 +
#header td {
 +
vertical-align: middle;
 +
text-align: left;
 +
}
 +
 
 +
#header-right {
 +
border-spacing:0;
 +
padding:0;
 +
}
 +
 
 +
#header-right table {
 +
float:right;
 +
width:1px;
 +
}
 +
 
 +
#header-right td {
 +
padding: 0 0 0 0;
 +
}
 +
 
 +
/* Header: Phone Number
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#header-right .phone-number .wsite-text {
 +
font-weight: 300;
 +
font-size:13px;
 +
display: block;
 +
white-space: nowrap;
 +
line-height: 31px;
 +
margin: 0 0 0 10px;
 +
text-align: right;
 +
}
 +
 
 +
#header-right .phone-number .wsite-text a {}
 +
#header-right .phone-number .wsite-text a:hover {}
 +
 
 +
/* Header: Social Links
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#header-right .wsite-social {
 +
vertical-align: middle;
 +
margin-left:15px;
 +
}
 +
 
 +
 
 +
.wsite-social-item {
 +
width: 28px;
 +
height: 30px;
 +
margin: 1px 0 0 4px;
 +
}
 +
 
 +
.wsite-social-rss {
 +
background: url(social-icons.png) no-repeat -130px 0px;
 +
}
 +
 
 +
.wsite-social-rss:hover {
 +
background-position: -130px -30px;
 +
}
 +
 
 +
.wsite-social-rss:active {
 +
background-position: -130px -60px;
 +
}
 +
 
 +
.wsite-social-linkedin {
 +
background: url(social-icons.png) no-repeat -65px 0px;
 +
}
 +
 
 +
.wsite-social-linkedin:hover {
 +
background-position: -65px -30px;
 +
}
 +
 
 +
.wsite-social-linkedin:active {
 +
background-position: -65px -60px;
 +
}
 +
 
 +
.wsite-social-facebook {
 +
background: url(social-icons.png) no-repeat 0px 0px;
 +
}
 +
 
 +
.wsite-social-facebook:hover {
 +
background-position: 0px -30px;
 +
}
 +
 
 +
.wsite-social-facebook:active {
 +
background-position: 0px -60px;
 +
}
 +
 
 +
.wsite-social-twitter {
 +
background: url(social-icons.png) no-repeat -32px 0px;
 +
}
 +
 
 +
.wsite-social-twitter:hover {
 +
background-position: -32px -30px;
 +
}
 +
 
 +
.wsite-social-twitter:active {
 +
background-position: -32px -60px;
 +
}
 +
 
 +
.wsite-social-mail {
 +
background: url(social-icons.png) no-repeat -97px 0px;
 +
}
 +
 
 +
.wsite-social-mail:hover {
 +
background-position: -97px -30px;
 +
}
 +
 
 +
.wsite-social-mail:active {
 +
background-position: -97px -60px;
 +
}
 +
 
 +
.wsite-social-pinterest {
 +
background: url(social-icons.png) no-repeat -227px 0px;
 +
}
 +
 
 +
.wsite-social-pinterest:hover {
 +
background-position: -227px -30px;
 +
}
 +
 
 +
.wsite-social-pinterest:active {
 +
background-position: -227px -60px;
 +
}
 +
 
 +
.wsite-social-youtube {
 +
background: url(social-icons.png) no-repeat -325px 0px;
 +
}
 +
 
 +
.wsite-social-youtube:hover {
 +
background-position: -325px -30px;
 +
}
 +
 
 +
.wsite-social-youtube:active {
 +
background-position: -325px -60px;
 +
}
 +
 
 +
.wsite-social-plus {
 +
background: url(social-icons.png) no-repeat -195px 0px;
 +
}
 +
 
 +
.wsite-social-plus:hover {
 +
background-position: -195px -30px;
 +
}
 +
 
 +
.wsite-social-plus:active {
 +
background-position: -195px -60px;
 +
}
 +
 
 +
.wsite-social-flickr {
 +
background: url(social-icons.png) no-repeat -162px 0px;
 +
}
 +
 
 +
.wsite-social-flickr:hover {
 +
background-position: -162px -30px;
 +
}
 +
 
 +
.wsite-social-flickr:active {
 +
background-position: -162px -60px;
 +
}
 +
 
 +
.wsite-social-vimeo {
 +
background: url(social-icons.png) no-repeat -260px 0px;
 +
}
 +
 
 +
.wsite-social-vimeo:hover {
 +
background-position: -260px -30px;
 +
}
 +
 
 +
.wsite-social-vimeo:active {
 +
background-position: -260px -60px;
 +
}
 +
 
 +
.wsite-social-yahoo {
 +
background: url(social-icons.png) no-repeat -292px 0px;
 +
}
 +
 
 +
.wsite-social-yahoo:hover {
 +
background-position: -292px -30px;
 +
}
 +
 
 +
.wsite-social-yahoo:active {
 +
background-position: -292px -60px;
 +
}
 +
 
 +
/* Header: Search Box
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#header-right .search {
 +
width:182px;
 +
vertical-align: middle;
 +
}
 +
 
 +
#header-right .wsite-search {
 +
vertical-align: middle;
 +
margin-left:15px;
 +
width:182px;
 +
height:28px;
 +
background:url(search-bg.gif) no-repeat top left;
 +
}
 +
 
 +
#header-right .wsite-search-input {
 +
width: 145px;
 +
border: none;
 +
padding: 6px !important;
 +
color: #999999;
 +
font-size: 12px ;
 +
background: none;
 +
height:auto !important;
 +
}
 +
 
 +
#header-right .wsite-search-button {
 +
position: relative;
 +
width: 14px;
 +
height: 14px;
 
border: 0px;
 
border: 0px;
−
background-color: transparent;
+
margin: 7px 0px 0px 5px;
−
margin: 0px;
+
padding: ;
 +
background: url(search-button.gif) no-repeat right center;
 +
}
 +
 
 +
/* Navigation
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#nav-wrap .container {
 +
clear: both;
 +
overflow: hidden;
 +
position: relative;
 +
}
 +
 
 +
#nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody {
 +
vertical-align:bottom;
 +
}
 +
 
 +
td#nav {
 +
float:right;
 +
border-spacing:0;
 +
}
 +
#navigation {
 +
line-height: 1;
 +
float: right;
 +
}
 +
 
 +
#navigation ul {
 +
list-style: none;
 +
float: left;
 +
width:946px;
 +
height:44px;
 +
margin-bottom:-1px;
 +
}
 +
 
 +
#navigation li {
 +
display: inline;
 +
position: relative;
 +
list-style: none;
 +
float: left;
 +
margin:0 0 0 5px;
 +
}
 +
 
 +
#navigation li.wsite-nav-0 {margin-left:0;}
 +
 
 +
#navigation ul li a {
 +
display: block;
 +
color: #333;
 +
text-decoration: none;
 +
padding:4px 0 4px 0;
 +
margin:0;
 +
width:100px;
 +
border: 0;
 +
outline: 0;
 +
list-style-type: none;
 +
box-sizing:border-box;
 +
float: left;
 +
font:10px Georgia, serif;
 +
border-top:4px solid #939598;
 +
}
 +
 
 +
#navigation ul li#active a{
 +
border-top:4px solid #C13832;
 +
color:#000;
 +
}
 +
 
 +
#navigation ul li a:hover {
 +
border-top:4px solid #404041;
 +
color: #666;
 +
}
 +
 
 +
/* Navigation Submenu's
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#wsite-menus .wsite-menu {
 +
background:#fff;
 +
box-shadow:0 1px 7px rgba(0,0,0,0.1);
 +
position:relative;
 +
}
 +
 
 +
 
 +
#wsite-menus .wsite-menu li a {
 +
background: #F4F4F4;
 +
border:none;
 +
border-bottom: 1px solid #E8E8E8;
 +
border-top: 1px solid white;
 +
display: block;
 +
}
 +
 
 +
#wsite-menus .wsite-menu li a:hover {
 +
color: #C13832;
 +
background: #eee;
 +
}
 +
 
 +
 
 +
 
 +
/* Universal banner
 +
--------------------------------------------------------------------------------*/
 +
 
 +
#banner {
 +
position:relative;
 +
}
 +
 
 +
#banner-image-wrap {
 +
position:relative
 +
}
 +
 
 +
/* Page type: Tall header
 +
--------------------------------------------------------------------------------*/
 +
 
 +
 
 +
.tall-header-page #banner-image-wrap {
 +
width: 100%;
 +
height: 250px;
 +
}
 +
 
 +
.tall-header-page .wsite-header {
 +
width: 100%;
 +
height: 250px;
 +
background: url(banner-tall.jpg) no-repeat;
 +
}
 +
 
 +
/* Page type: Short header
 +
--------------------------------------------------------------------------------*/
 +
 
 +
 
 +
.short-header-page #banner-image-wrap {
 +
width: 100%;
 +
height: 100px;
 +
}
 +
 
 +
.short-header-page .wsite-header {
 +
width: 100%;
 +
height: 100px;
 +
background: url(banner-short.jpg) no-repeat;
 +
}
 +
 
 +
/* Page type: No header
 +
--------------------------------------------------------------------------------*/
 +
 
 +
.no-header-page #banner, .no-header-page .wsite-header  {
 +
        display:none;
 +
}
 +
 
 +
/* Page type: Landing page
 +
--------------------------------------------------------------------------------*/
 +
 
 +
.landing-page #banner {}
 +
 
 +
#bannerleft {
 +
width: 946px;
 +
height: 400px;
 +
float:right;
 +
position:relative;
 +
}
 +
 
 +
.landing-page .wsite-header {
 +
width: 100%;
 +
height: 400px;
 +
background: url(banner-tall.jpg) no-repeat;
 +
}
 +
 
 +
#bannerright {
 +
width: 420px;
 +
text-align:left;
 +
position:absolute;
 +
z-index:4;
 +
bottom:30px;
 +
right:30px;
 +
padding:23px 20px 20px;
 +
background:#C13832;
 +
}
 +
 
 +
#bannerright h2 {
 +
color: #fff;
 +
font:bold italic 24px Georgia, serif;
 
padding: 0px;
 
padding: 0px;
 +
line-height: 24px;
 +
margin:0px;
 
}
 
}
  
−
html, body, .wrapper { /*-- changes default wiki settings --*/
+
#bannerright .anchor {
−
width: 100%;  
+
position:absolute;
−
height: 100%;  
+
background:#C13832;
−
background-color: transparent;
+
width:30px;  
 +
height:7px;
 +
bottom:-7px;
 +
left:-30px;
 
}
 
}
 +
#bannerright p {
 +
padding: 20px 0px;
 +
line-height: 140%;
 +
color:#fff;
 +
font: 14px/19px Georgia, serif;
 +
}
 +
#bannerright p a, #bannerright h2 a {
 +
color:#fff;
 +
text-decoration:underline;
 +
}
 +
 +
.landing-banner-outer {
 +
display: table;
 +
#position: relative;
 +
overflow: hidden;
 +
}
 +
 +
.landing-banner-mid {
 +
#position: absolute;
 +
#top: 50%;
 +
display: table-cell;
 +
vertical-align: middle;
 +
}
 +
 +
.landing-banner-inner {
 +
#position: relative;
 +
#top: -50%;
 +
}
 +
 +
/* Main Content
 +
--------------------------------------------------------------------------------*/
 +
 +
#main-wrap .container {
 +
min-height:400px;
 +
padding-top:10px;
 +
padding-bottom:20px;
 +
}
 +
 +
#main-wrap .container h2 {
 +
margin-bottom:10px;
 +
}
 +
 +
#main-wrap .container blockquote {
 +
font-family: 'Droid Serif', serif;
 +
font-style: italic;
 +
color:# 777777;
 +
padding-left:15px;
 +
border-left:3px solid #eeeeee;
 +
margin: 15px 0px;
 +
}
 +
 +
#main-wrap .container form .wsite-button {
 +
margin-top:50px;
 +
}
 +
 +
/* Footer
 +
--------------------------------------------------------------------------------*/
 +
 +
#footer-wrap {
 +
margin-top:25px;
 +
}
 +
#footer-wrap .container {
 +
text-align:left;
 +
padding:0 0px 20px;
 +
text-align:right;
 +
background:none;
 +
}
 +
 +
#footer-wrap ul {
 +
text-align:left;
 +
}
 +
 +
 +
#footer-wrap h2 {
 +
font-size: 19px;
 +
padding-bottom:10px;
 +
margin:0;
 +
font-weight: normal;
 +
color:#333;
 +
}
 +
 +
#footer-wrap span {
 +
vertical-align: middle;
 +
}
 +
 +
/* Form Customization
 +
--------------------------------------------------------------------------------*/
 +
 +
.wsite-form-label {
 +
display: inline-block;
 +
color: #797979;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 1em;
 +
padding: 6px 0 0px 0;
 +
}
 +
 +
.form-radio-container {
 +
color: #797979;
 +
font-size: 1em;
 +
font-family: Arial, Helvetica, sans-serif;
 +
}
 +
 +
.wsite-form-input, .wsite-search-element-input {
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 1em;
 +
color: #797979;
 +
background: #fff url(field.png) repeat-x;
 +
border: 1px solid #d4d4d4;
 +
padding: 8px 4px 5px !important;
 +
line-height: 1;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
border-radius: 3px;
 +
}
 +
 +
.form-select {
 +
color: #797979;
 +
background: url#fff (field.png);
 +
border: 1px solid #d4d4d4;
 +
font-size: 1em;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding: 3px 4px;
 +
width: 320px;
 +
height: 27px;
 +
line-height: 27px;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
border-radius: 3px;
 +
}
 +
 +
.form-radio-container {
 +
font-size:.9em;
 +
min-height:20px;
 +
padding:0;
 +
margin:0 0 5px 0 !important;
 +
}
 +
 +
/* Footer Form Customization
 +
--------------------------------------------------------------------------------*/
 +
 +
.wsite-form-container {
 +
margin-top:0px !important;
 +
text-align:left;
 +
}
 +
 +
.wsite-footer .wsite-form-label {
 +
font-size: 1em;
 +
padding: 5px 0 2px 0;
 +
}
 +
 +
.wsite-footer .wsite-form-field {
 +
width:350px !important;
 +
}
 +
 +
 +
.wsite-footer .wsite-form-input {
 +
font-size: 1em;
 +
width: 100% !important;
 +
}
 +
 +
.wsite-footer .form-select {
 +
width: 100%;
 +
}
 +
/* Buttons
 +
--------------------------------------------------------------------------------*/
 +
 +
/* Small structure & regular style */
 +
 +
.wsite-button {
 +
background: #333;
 +
color: white !important;
 +
font-size: 13px;
 +
font-weight: 700;
 +
padding: 0 10px 0 0;
 +
text-align: center;
 +
text-decoration: none !important;
 +
}
 +
 +
.wsite-button:hover {
 +
background-position:0 0;
 +
background:#000;
 +
}
 +
 +
.wsite-button:active {
 +
background-position:0 0;
 +
}
 +
 +
.wsite-button-inner {
 +
color: #fff !important;
 +
padding:3px 15px 3px 15px;
 +
background: #222;
 +
}
 +
 +
.wsite-button:hover .wsite-button-inner {
 +
}
 +
 +
.wsite-button:active {}
 +
 +
/* Large structure & regular style  */
 +
 +
.wsite-button-large {
 +
font-size:14px;
 +
background: #333;
 +
}
 +
.wsite-button-large:hover {
 +
font-size:14px;
 +
background:#000;
 +
}
 +
 +
.wsite-button-large .wsite-button-inner {
 +
font-size:14px;
 +
padding:8px 15px 8px 15px;
 +
background: #222;
 +
}
 +
 +
/* Highlighted styles */
 +
 +
.wsite-button-highlight, .wsite-button-large.wsite-button-highlight {
 +
background: #931C18;
 +
}
 +
 +
.wsite-button-highlight:hover , .wsite-button-large.wsite-button-highlight:hover {
 +
background: #61120F;
 +
}
 +
 +
.wsite-button-highlight .wsite-button-inner {
 +
background-image: none;
 +
background: #7F1714;
 +
}
 +
 +
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
 +
background-image: none;
 +
background: #7F1714;
 +
}
 +
 
</style>
 
</style>
 
</html>
 
</html>
 +
{{:Team:CityU_HK/background}}

Revision as of 13:49, 13 July 2015