View source for Team:CityU HK/Template/main style

<html>
<style type="text/css">





/* 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;
	margin: 7px 0px 0px 5px;
	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;
	line-height: 24px;
	margin:0px;
}

#bannerright .anchor {
	position:absolute;
	background:#C13832;
	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>
</html>