Difference between revisions of "Template:TCU Taiwan/CSSfooter"
Phoebe chen (Talk | contribs) |
|||
Line 1: | Line 1: | ||
− | + | html, body | |
− | + | { | |
− | + | height: 100%; | |
− | + | } | |
− | } | + | |
− | + | body | |
− | + | { | |
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | background: #000 url(images/back.jpg) center top; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | font-size: 12pt; | ||
+ | font-weight: 300; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | |||
+ | h1, h2, h3 | ||
+ | { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | p, ol, ul | ||
+ | { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | ol, ul | ||
+ | { | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | p | ||
+ | { | ||
+ | line-height: 180%; | ||
+ | } | ||
+ | |||
+ | strong | ||
+ | { | ||
+ | } | ||
+ | |||
+ | a | ||
+ | { | ||
+ | color: #96063b; | ||
+ | } | ||
+ | |||
+ | a:hover | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .container | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | margin: 0em auto; | ||
+ | width: 1200px; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Image Style */ | ||
+ | /*********************************************************************************/ | ||
− | + | .image | |
− | { | + | { |
− | + | display: inline-block; | |
− | + | } | |
− | } | + | |
+ | .image img | ||
+ | { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .image-full | ||
+ | { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | margin: 0 0 2em 0; | ||
+ | } | ||
+ | |||
+ | .image-left | ||
+ | { | ||
+ | float: left; | ||
+ | margin: 0 2em 2em 0; | ||
+ | } | ||
+ | |||
+ | .image-centered | ||
+ | { | ||
+ | display: block; | ||
+ | margin: 0 0 2em 0; | ||
+ | } | ||
+ | |||
+ | .image-centered img | ||
+ | { | ||
+ | margin: 0 auto; | ||
+ | width: auto; | ||
+ | } | ||
− | + | /*********************************************************************************/ | |
− | + | /* List Styles */ | |
− | + | /*********************************************************************************/ | |
− | + | ||
− | + | ||
− | + | ul.style1 | |
+ | { | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /*********************************************************************************/ | |
+ | /* Social Icon Styles */ | ||
+ | /*********************************************************************************/ | ||
− | + | ul.contact | |
− | + | { | |
− | + | margin: 0; | |
− | + | padding: 2em 0em 0em 0em; | |
− | + | list-style: none; | |
− | + | } | |
− | + | ||
− | + | ul.contact li | |
− | + | { | |
− | + | display: inline-block; | |
− | + | padding: 0em 0.30em; | |
− | + | font-size: 1em; | |
− | + | } | |
− | + | ||
− | + | ul.contact li span | |
− | + | { | |
− | + | display: none; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | } | |
− | + | ||
− | + | ul.contact li a | |
− | + | { | |
− | + | color: #FFF; | |
− | + | } | |
− | + | ||
− | + | ul.contact li a:before | |
− | + | { | |
− | + | display: inline-block; | |
− | + | background: #3f3f3f; | |
− | + | width: 40px; | |
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | border-radius: 20px; | ||
+ | text-align: center; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | |||
+ | ul.contact li a.icon-twitter:before { background: #2DAAE4; } | ||
+ | ul.contact li a.icon-facebook:before { background: #39599F; } | ||
+ | ul.contact li a.icon-dribbble:before { background: #C4376B; } | ||
+ | ul.contact li a.icon-tumblr:before { background: #31516A; } | ||
+ | ul.contact li a.icon-rss:before { background: #F2600B; } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Button Style */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | .button | ||
+ | { | ||
+ | display: inline-block; | ||
+ | padding: 0em 2em 0em 2em; | ||
+ | background: #96063b; | ||
+ | letter-spacing: 0.20em; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 400; | ||
+ | font-size: 0.90em; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | .button:before | ||
+ | { | ||
+ | display: inline-block; | ||
+ | background: #FFC31F; | ||
+ | margin-right: 1em; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | line-height: 15px; | ||
+ | border-radius: 20px; | ||
+ | text-align: center; | ||
+ | color: #272925; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* 4-column */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | .box1, | ||
+ | .box2, | ||
+ | .box3, | ||
+ | .box4 | ||
+ | { | ||
+ | width: 235px; | ||
+ | } | ||
+ | |||
+ | .box1, | ||
+ | .box2, | ||
+ | .box3, | ||
+ | { | ||
+ | float: left; | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | |||
+ | .box4 | ||
+ | { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* 3-column */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | .boxA, | ||
+ | .boxB, | ||
+ | .boxC | ||
+ | { | ||
+ | width: 320px; | ||
+ | } | ||
+ | |||
+ | .boxA, | ||
+ | .boxB | ||
+ | { | ||
+ | float: left; | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | |||
+ | .boxC | ||
+ | { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* 2-column */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | .tbox1, | ||
+ | .tbox2 | ||
+ | { | ||
+ | width: 575px; | ||
+ | } | ||
+ | |||
+ | .tbox1 | ||
+ | { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .tbox2 | ||
+ | { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Header */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #header-wrapper | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | height: 15em; | ||
+ | } | ||
+ | |||
+ | #header | ||
+ | { | ||
+ | position: relative; | ||
+ | margin-top: 3em; | ||
+ | padding: 3em 0em; | ||
+ | background: #96063b; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Logo */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #logo | ||
+ | { | ||
+ | position: absolute; | ||
+ | top: 6px; | ||
+ | left: 3px; | ||
+ | width: 115px; | ||
+ | height: 67px; | ||
+ | } | ||
+ | |||
+ | #logo h1 | ||
+ | { | ||
+ | } | ||
+ | |||
+ | #logo a | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Menu */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #menu | ||
+ | { | ||
+ | position: absolute; | ||
+ | top: 25px; | ||
+ | right: -41px; | ||
+ | width: 1105px; | ||
+ | height: 27px; | ||
+ | } | ||
+ | |||
+ | #menu ul | ||
+ | { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #menu li | ||
+ | { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #menu li a, #menu li span | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | padding: 1em 1.5em; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | |||
+ | #menu li:hover a, #menu li.active a, #menu li.active span | ||
+ | { | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | |||
+ | #menu .current_page_item a | ||
+ | { | ||
+ | } | ||
+ | |||
+ | #menu .icon | ||
+ | { | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Welcome */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #welcome | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | width: 1000px; | ||
+ | margin-top: 3em; | ||
+ | padding: 4em 100px 3em 100px; | ||
+ | background: #FFF; | ||
+ | } | ||
+ | |||
+ | |||
+ | #welcome h2 | ||
+ | { | ||
+ | padding-bottom: 1em; | ||
+ | font-size: 1.8em; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Page */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #page | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | width: 1000px; | ||
+ | padding: 7em 100px 3em 100px; | ||
+ | /*background: #000 url(images/back.jpg) center top;*/ | ||
+ | /*background: #FFF;*/ | ||
+ | } | ||
+ | |||
+ | #page .boxA, | ||
+ | #page .boxB, | ||
+ | #page .boxC | ||
+ | { | ||
+ | } | ||
+ | |||
+ | #page .boxA | ||
+ | { | ||
+ | } | ||
+ | |||
+ | #page .box | ||
+ | { | ||
+ | margin-bottom: 4em; | ||
+ | } | ||
+ | |||
+ | #page img | ||
+ | { | ||
+ | margin-bottom: 2em; | ||
+ | } | ||
+ | |||
+ | #page h2 | ||
+ | { | ||
+ | padding-bottom: 1.5em; | ||
+ | font-size: 2.2em; | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | |||
+ | #page h3 | ||
+ | { | ||
+ | padding-bottom: 1em; | ||
+ | font-size: 1.8em; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | #page .link | ||
+ | { | ||
+ | display: block; | ||
+ | padding-top: 1em; | ||
+ | text-transform: uppercase; | ||
+ | text-decoration: none; | ||
+ | font-weight: 700; | ||
+ | color: rgba(0,0,0,0.8); | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Content */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #content | ||
+ | { | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Sidebar */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #sidebar | ||
+ | { | ||
+ | } | ||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Footer */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #footer | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | padding: 5em 0em 3em 0em; | ||
+ | border-top: 1px solid rgba(0,0,0,0.08); | ||
+ | } | ||
+ | |||
+ | |||
+ | /*********************************************************************************/ | ||
+ | /* Copyright */ | ||
+ | /*********************************************************************************/ | ||
+ | |||
+ | #copyright | ||
+ | { | ||
+ | overflow: hidden; | ||
+ | padding: 5em 0em; | ||
+ | border-top: 1px solid rgba(0,0,0,0.08); | ||
+ | } | ||
+ | |||
+ | #copyright p | ||
+ | { | ||
+ | letter-spacing: 0.20em; | ||
+ | text-align: center; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 0.80em; | ||
+ | color: rgba(255,255,255,0.3); | ||
+ | } | ||
+ | |||
+ | #copyright a | ||
+ | { | ||
+ | text-decoration: none; | ||
+ | color: rgba(255,255,255,0.6); | ||
+ | } |
Revision as of 17:08, 1 June 2015
html, body { height: 100%; }
body { margin: 0px; padding: 0px; background: #000 url(images/back.jpg) center top; font-family: 'Source Sans Pro', sans-serif; font-size: 12pt; font-weight: 300; color: #000; }
h1, h2, h3
{
margin: 0;
padding: 0;
}
p, ol, ul { margin-top: 0; }
ol, ul { padding: 0; list-style: none; }
p { line-height: 180%; }
strong { }
a { color: #96063b; }
a:hover { text-decoration: none; }
.container { overflow: hidden; margin: 0em auto; width: 1200px; }
/*********************************************************************************/ /* Image Style */ /*********************************************************************************/
.image { display: inline-block; }
.image img { display: block; width: 100%; }
.image-full { display: block; width: 100%; margin: 0 0 2em 0; }
.image-left { float: left; margin: 0 2em 2em 0; }
.image-centered { display: block; margin: 0 0 2em 0; }
.image-centered img { margin: 0 auto; width: auto; }
/*********************************************************************************/ /* List Styles */ /*********************************************************************************/
ul.style1 { }
/*********************************************************************************/
/* Social Icon Styles */
/*********************************************************************************/
ul.contact { margin: 0; padding: 2em 0em 0em 0em; list-style: none; }
ul.contact li { display: inline-block; padding: 0em 0.30em; font-size: 1em; }
ul.contact li span { display: none; margin: 0; padding: 0; }
ul.contact li a { color: #FFF; }
ul.contact li a:before { display: inline-block; background: #3f3f3f; width: 40px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; color: #FFFFFF; }
ul.contact li a.icon-twitter:before { background: #2DAAE4; } ul.contact li a.icon-facebook:before { background: #39599F; } ul.contact li a.icon-dribbble:before { background: #C4376B; } ul.contact li a.icon-tumblr:before { background: #31516A; } ul.contact li a.icon-rss:before { background: #F2600B; }
/*********************************************************************************/ /* Button Style */ /*********************************************************************************/
.button { display: inline-block; padding: 0em 2em 0em 2em; background: #96063b; letter-spacing: 0.20em; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 0.90em; color: #FFF; }
.button:before { display: inline-block; background: #FFC31F; margin-right: 1em; width: 40px; height: 40px; line-height: 15px; border-radius: 20px; text-align: center; color: #272925; }
/*********************************************************************************/ /* 4-column */ /*********************************************************************************/
.box1, .box2, .box3, .box4 { width: 235px; }
.box1, .box2, .box3, { float: left; margin-right: 20px; }
.box4 { float: right; }
/*********************************************************************************/ /* 3-column */ /*********************************************************************************/
.boxA, .boxB, .boxC { width: 320px; }
.boxA, .boxB { float: left; margin-right: 20px; }
.boxC { float: right; }
/*********************************************************************************/
/* 2-column */
/*********************************************************************************/
.tbox1, .tbox2 { width: 575px; }
.tbox1 { float: left; }
.tbox2 { float: right; }
/*********************************************************************************/ /* Header */ /*********************************************************************************/
#header-wrapper { overflow: hidden; height: 15em; }
#header { position: relative; margin-top: 3em; padding: 3em 0em; background: #96063b; }
/*********************************************************************************/ /* Logo */ /*********************************************************************************/
#logo { position: absolute; top: 6px; left: 3px; width: 115px; height: 67px; }
#logo h1 { }
#logo a { text-decoration: none; color: #FFF; }
/*********************************************************************************/ /* Menu */ /*********************************************************************************/
#menu { position: absolute; top: 25px; right: -41px; width: 1105px; height: 27px; }
#menu ul { display: inline-block; }
#menu li { display: block; float: left; text-align: center; }
#menu li a, #menu li span { text-decoration: none; padding: 1em 1.5em; color: #FFF; }
#menu li:hover a, #menu li.active a, #menu li.active span { text-decoration: underline; }
#menu .current_page_item a { }
#menu .icon { }
/*********************************************************************************/ /* Welcome */ /*********************************************************************************/
#welcome { overflow: hidden; width: 1000px; margin-top: 3em; padding: 4em 100px 3em 100px; background: #FFF; }
#welcome h2
{
padding-bottom: 1em;
font-size: 1.8em;
font-weight: 400;
}
/*********************************************************************************/ /* Page */ /*********************************************************************************/
#page { overflow: hidden; width: 1000px; padding: 7em 100px 3em 100px; /*background: #000 url(images/back.jpg) center top;*/ /*background: #FFF;*/ }
#page .boxA, #page .boxB, #page .boxC { }
#page .boxA { }
#page .box { margin-bottom: 4em; }
#page img { margin-bottom: 2em; }
#page h2 { padding-bottom: 1.5em; font-size: 2.2em; font-weight: 600; }
#page h3 { padding-bottom: 1em; font-size: 1.8em; font-weight: 400; }
#page .link { display: block; padding-top: 1em; text-transform: uppercase; text-decoration: none; font-weight: 700; color: rgba(0,0,0,0.8); }
/*********************************************************************************/ /* Content */ /*********************************************************************************/
#content { }
/*********************************************************************************/ /* Sidebar */ /*********************************************************************************/
#sidebar { }
/*********************************************************************************/ /* Footer */ /*********************************************************************************/
#footer { overflow: hidden; padding: 5em 0em 3em 0em; border-top: 1px solid rgba(0,0,0,0.08); }
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright { overflow: hidden; padding: 5em 0em; border-top: 1px solid rgba(0,0,0,0.08); }
#copyright p { letter-spacing: 0.20em; text-align: center; text-transform: uppercase; font-size: 0.80em; color: rgba(255,255,255,0.3); }
#copyright a { text-decoration: none; color: rgba(255,255,255,0.6); }