Difference between revisions of "Template:TCU Taiwan/CSSfooter"

Line 1: Line 1:
−
<html>
+
html, body
−
<style>
+
{
−
table{
+
height: 100%;
−
background: rgba(255, 255, 255, 0.55);
+
}
−
}
+
−
</style>
+
body
−
<script language="javascript">
+
{
 +
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                                                                  */
 +
/*********************************************************************************/
  
−
function goLite(FRM,BTN)
+
.image
−
{
+
{
−
  window.document.forms[FRM].elements[BTN].style.color = "#A66B38";
+
display: inline-block;
−
  window.document.forms[FRM].elements[BTN].style.backgroundColor = "#FFFFFF";
+
}
−
}
+
 +
.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;
 +
}
  
−
function goDim(FRM,BTN)
+
/*********************************************************************************/
−
{
+
/* List Styles                                                                  */
−
  window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
+
/*********************************************************************************/
−
  window.document.forms[FRM].elements[BTN].style.backgroundColor = "#A66B38";
+
−
}
+
  
−
</script>
+
ul.style1
 +
{
 +
}
  
−
<script type="text/javascript"><!--
 
−
Image1 = new Image(100,50); Image1.src = "https://static.igem.org/mediawiki/2014/1/10/TCU_TEACH.jpg";
 
−
Image2 = new Image(100,50); Image2.src = "https://static.igem.org/mediawiki/2014/f/f8/2013_TCUIGEM.png";
 
−
Image3 = new Image(100,50); Image3.src = "https://static.igem.org/mediawiki/2014/4/47/TCU_Moe_logo.png";
 
−
Image4 = new Image(100,50); Image4.src = "https://static.igem.org/mediawiki/2014/b/b1/TCU_SUP_LOGO.png";
 
−
Image5 = new Image(100,50); Image5.src = "https://static.igem.org/mediawiki/2014/a/ae/TZUCHI_SUP.jpg";
 
−
Image6 = new Image(100,50); Image6.src = "https://static.igem.org/mediawiki/2014/c/c3/TCU-Logo-d.png";
 
−
// --></script>
 
  
−
<!--End Analytics-->
+
/*********************************************************************************/
 +
/* Social Icon Styles                                                            */
 +
/*********************************************************************************/
  
−
<br><br>
+
ul.contact
−
<table width="100%" border="0" cellspacing="0" cellpadding="0">
+
{
−
  <tr>
+
margin: 0;
−
    <td align="center">
+
padding: 2em 0em 0em 0em;
−
   
+
list-style: none;
−
    <!--3-->
+
}
−
    <a href="http://english.moe.gov.tw/" title="Ministry of Education,Republic of China" target="_blank"><img src="https://static.igem.org/mediawiki/2014/8/83/TCU_Moe_logo_BLACK.png" height="100" onMouseMove="this.src=Image3.src" onMouseOut="this.src='https://static.igem.org/mediawiki/2014/8/83/TCU_Moe_logo_BLACK.png'"></a>&nbsp;&nbsp;&nbsp;
+
−
   
+
ul.contact li
−
    <!--1-->
+
{
−
    <a href="http://tec.tcu.edu.tw/100/" title="Center of Teaching Excellence,TCU" target="_blank"><img src="https://static.igem.org/mediawiki/2014/2/26/TCU_TEACH_BLACK.png" height="100" onMouseMove="this.src=Image1.src" onMouseOut="this.src='https://static.igem.org/mediawiki/2014/2/26/TCU_TEACH_BLACK.png'"></a>&nbsp;&nbsp;
+
display: inline-block;
−
   
+
padding: 0em 0.30em;
−
    <!--5-->
+
font-size: 1em;
−
    <a href="http://www.tzuchi.org/" title="Buddhist Compassion Relief Tzu Chi Foundation" target="_blank"><img src="https://static.igem.org/mediawiki/2014/f/ff/TZUCHI_SUP_BLACK.png" height="90" onMouseMove="this.src=Image5.src" onMouseOut="this.src='https://static.igem.org/mediawiki/2014/f/ff/TZUCHI_SUP_BLACK.png'"></a>&nbsp;&nbsp;
+
}
−
   
+
−
    <!--4-->
+
ul.contact li span
−
    <a href="http://eng.tcu.edu.tw/" title="Tzu Chi University" target="_blank"><img src="https://static.igem.org/mediawiki/2014/4/43/TCU_SUP_LOGO_BLACK.png" height="90" onMouseMove="this.src=Image4.src" onMouseOut="this.src='https://static.igem.org/mediawiki/2014/4/43/TCU_SUP_LOGO_BLACK.png'"></a>&nbsp;
+
{
−
 
+
display: none;
−
    <!--2-->
+
margin: 0;
−
    <a href="https://2013.igem.org/Team:TzuChiU_Formosa" title="2013 TzuChiU_Formosa" target="_blank"><img src="https://static.igem.org/mediawiki/2014/7/75/2013_TCUIGEM_BLACK.png" height="130" onMouseMove="this.src=Image2.src" onMouseOut="this.src='https://static.igem.org/mediawiki/2014/7/75/2013_TCUIGEM_BLACK.png'"></a>   
+
padding: 0;
−
    <!--6-->
+
}
−
    <a href="https://static.igem.org/mediawiki/2014/c/c3/TCU-Logo-d.png" title="2013 TCU_Taiwan" target="_blank"><img src="https://static.igem.org/mediawiki/2015/1/1a/TCU-Logo-d_black.png" height="130" onMouseMove="this.src=Image6.src" onMouseOut="this.src='https://static.igem.org/mediawiki/2015/1/1a/TCU-Logo-d_black.png'"></a>   
+
−
  </td>
+
ul.contact li a
−
  </tr>
+
{
−
</table>
+
color: #FFF;
−
<p></p><br><br>
+
}
−
<table width="100%" border="0">
+
−
  <tr>
+
ul.contact li a:before
−
    <td align="center"><font size="1">Best for 1920x1080 with Chrome</font></td>
+
{
−
  </tr>
+
display: inline-block;
−
</table>
+
background: #3f3f3f;
−
</html>
+
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); }