Template:Team:Hong Kong HKUST/indexpage.css
From 2014.igem.org
Mfcheungaa (Talk | contribs) |
Mfcheungaa (Talk | contribs) |
||
Line 1: | Line 1: | ||
body { | body { | ||
- | width: 100%; | + | width: 100%; |
- | + | padding:0; | |
- | + | margin:0; | |
- | + | font: 14px Helvetica; | |
+ | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | ||
} | } | ||
html, body, .wrapper { | html, body, .wrapper { | ||
- | background-color: | + | background-color: #fcebe6; |
} | } | ||
#content_container { | #content_container { | ||
- | + | width:950px; | |
- | + | margin: 0 auto; | |
-webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | -webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | ||
-moz-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | -moz-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | ||
Line 16: | Line 17: | ||
} | } | ||
a { | a { | ||
- | + | color: #c0392b; | |
- | + | text-decoration: none; | |
} | } | ||
a:hover { | a:hover { | ||
- | + | color: #e74c3c; | |
} | } | ||
#menu { | #menu { | ||
- | + | padding: 0; | |
- | + | text-align: center; | |
- | + | text-transform:uppercase; | |
} | } | ||
h1 { | h1 { | ||
- | + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
- | + | font-size: 100px; | |
- | + | text-align: center; | |
- | + | margin: 0 0 0 0; | |
- | + | padding: 50px 0 0 0 ; | |
- | + | color: #fff; | |
- | + | font-weight:100; | |
- | + | letter-spacing: 0.0625em; | |
} | } | ||
Line 42: | Line 43: | ||
/* ============================================================================ */ | /* ============================================================================ */ | ||
nav { | nav { | ||
- | height: | + | background-color: #ff9900; |
+ | background-image: url("https://static.igem.org/mediawiki/2014/d/d1/HKUST_2014_pneumosensor_banner.png"); | ||
+ | background-size: 100% 100%; | ||
+ | height: 127px; | ||
+ | margin: 20px auto auto; | ||
+ | width: 950px; | ||
} | } | ||
nav ul{ | nav ul{ | ||
Line 48: | Line 54: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
- | + | white-space: nowrap; | |
- | + | vertical-align: bottom; | |
} | } | ||
+ | nav ul.access-menu:first-child { | ||
+ | width: 100%; | ||
+ | } | ||
.access-menu{ | .access-menu{ | ||
display: table; | display: table; | ||
- | margin: | + | margin: 0 auto; |
- | + | ||
} | } | ||
Line 61: | Line 70: | ||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
+ | white-space: nowrap; | ||
+ | border:1px solid white; | ||
margin-top: 15px; | margin-top: 15px; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 80: | Line 87: | ||
color: #eee; | color: #eee; | ||
display: block; | display: block; | ||
- | padding: .5em | + | padding: .3em 1.5em; |
text-decoration: none; | text-decoration: none; | ||
- | |||
-webkit-transition: all .2s linear; | -webkit-transition: all .2s linear; | ||
-moz-transition: all .2s linear; | -moz-transition: all .2s linear; | ||
Line 88: | Line 94: | ||
-o-transition: all .2s linear; | -o-transition: all .2s linear; | ||
transition: all .2s linear; | transition: all .2s linear; | ||
+ | font-size: 90%; | ||
} | } | ||
- | .access-menu .access_logo{ | + | .access-menu > li.access_logo { |
- | + | background-color: white; | |
+ | border: 5px outset black; | ||
+ | border-radius: 20px; | ||
+ | float: right; | ||
+ | margin: 15px 10px 0; | ||
+ | padding: 5px; | ||
+ | transition: all 1s ease-in-out 0s; | ||
+ | } | ||
+ | .access-menu > li.access_logo:hover { | ||
+ | background-color: white; | ||
+ | border: 5px inset black; | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | .access-menu > li.access_logo:first-child { | ||
+ | float: left; | ||
} | } | ||
.access-menu img{ | .access-menu img{ | ||
- | height: | + | height: 40px; |
} | } | ||
- | .access-menu | + | .access-menu li:hover, |
- | .access-menu | + | .access-menu li:focus{ |
- | background: | + | background-color: black; |
outline: none; | outline: none; | ||
} | } | ||
- | |||
.access-submenu{ | .access-submenu{ | ||
- | |||
left: -9999px; | left: -9999px; | ||
position: absolute; | position: absolute; | ||
top: -9999px; | top: -9999px; | ||
- | width: | + | width: 150px; |
+ | z-index: 100; | ||
+ | } | ||
+ | .access-submenu li{ | ||
+ | background-color: #665544; | ||
+ | border: 1px solid white; | ||
} | } | ||
- | |||
.access-submenu > li + li{ | .access-submenu > li + li{ | ||
border-top: solid 1px #000; | border-top: solid 1px #000; | ||
Line 120: | Line 143: | ||
padding: .5em 1em; | padding: .5em 1em; | ||
} | } | ||
- | + | .access-menu .access_logo > a { | |
+ | padding: 0; | ||
+ | } | ||
.is-show{ | .is-show{ | ||
Line 126: | Line 151: | ||
top: 100%; | top: 100%; | ||
} | } | ||
- | li.indent_list | + | li.indent_list{ |
background-color:#776655; | background-color:#776655; | ||
} | } | ||
Line 134: | Line 159: | ||
#slide{ | #slide{ | ||
- | + | width: 100%; | |
- | + | height: 600px; | |
- | + | overflow:hidden; | |
- | + | margin: 30px auto; | |
- | + | box-shadow: 0 8px 6px -6px rgba(0,0,0,1); | |
} | } | ||
#slide div{ | #slide div{ | ||
- | + | display:block; | |
- | + | width:0; | |
- | + | float: left; | |
- | + | -webkit-transition: all 0.75s; | |
- | + | -moz-transition: all 0.75s; | |
- | + | -o-transition:all 0.75s; | |
- | + | transition: all 0.75s; | |
} | } | ||
img.picture { | img.picture { | ||
- | + | width:960px; | |
} | } | ||
button.prev, button.next { | button.prev, button.next { | ||
- | + | position: absolute; | |
- | + | z-index: 999; | |
- | + | display: block; | |
- | + | padding:0 10px; | |
- | + | width: auto; | |
- | + | height:350px; | |
- | + | background: rgba(0,0,0,0); | |
- | + | color: #ffffff; | |
- | + | font-size:26px; | |
- | + | cursor: pointer; | |
- | + | border:none; | |
- | + | outline:none; | |
+ | margin-top: 100px; | ||
} | } | ||
button.prev:hover, button.next:hover { | button.prev:hover, button.next:hover { | ||
- | + | background: rgba(0,0,0,0.8); | |
} | } | ||
button.next { | button.next { | ||
- | + | margin-left:911px; | |
} | } | ||
div.project_area{ | div.project_area{ | ||
- | + | margin:0 auto; | |
- | + | border: 1px solid black; | |
- | + | background-color:#006699; | |
- | + | padding:15px; | |
} | } | ||
.project_area h4, .project_area p{ | .project_area h4, .project_area p{ | ||
Line 184: | Line 210: | ||
} | } | ||
div.project_box{ | div.project_box{ | ||
- | border: 1px solid gray; | + | border: 1px solid gray; |
- | width: 450px; | + | width: 450px; |
- | height: 150px; | + | height: 150px; |
- | text-align: center; | + | text-align: center; |
- | background-color:#006699; | + | background-color:#006699; |
} | } | ||
div.project_box:hover { | div.project_box:hover { | ||
- | + | background-color: #0077AA; | |
} | } | ||
div.quick_link_container{ | div.quick_link_container{ | ||
- | + | border-radius: 15px; | |
- | + | ||
- | + | ||
-webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | -webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | ||
-moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | -moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | ||
box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | ||
- | |||
background-color:#F0A830; | background-color:#F0A830; | ||
+ | height: 300px; | ||
+ | padding: 10px; | ||
+ | width: 166px; | ||
+ | |||
} | } | ||
.quick_link_container > h4,.start_up_link_container > h4{ | .quick_link_container > h4,.start_up_link_container > h4{ | ||
font-size: 25px; | font-size: 25px; | ||
- | + | color: black; | |
- | + | font-weight: 600; | |
} | } | ||
+ | .quick_link_container > h4 { | ||
+ | font-size: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
.quick_link_container > p, .start_up_link_container > p{ | .quick_link_container > p, .start_up_link_container > p{ | ||
- | + | font-size: 17px; | |
+ | } | ||
+ | .quick_link_container > img { | ||
+ | margin: auto; | ||
+ | width: 160px; | ||
+ | } | ||
+ | .quick_link_sub { | ||
+ | border: 1px solid black; | ||
+ | border-radius: 10px; | ||
+ | float: left; | ||
+ | margin: 5px; | ||
+ | padding: 5px; | ||
+ | text-align: center; | ||
+ | width: 140px; | ||
+ | background-color:#fceeb4; | ||
+ | color:black; | ||
+ | |||
+ | } | ||
+ | .quick_link_sub:hover{ | ||
+ | background-color:#ffffc5; | ||
+ | color:#aaaaaa; | ||
} | } | ||
- | |||
table.site_map_table{ | table.site_map_table{ | ||
background-color: #554433; | background-color: #554433; | ||
Line 220: | Line 270: | ||
border-radius: 5px; | border-radius: 5px; | ||
margin: 20px auto; | margin: 20px auto; | ||
+ | text-align:left; | ||
} | } | ||
table.site_map_table td{ | table.site_map_table td{ | ||
- | vertical-align: text-top; | + | vertical-align: text-top; |
+ | width: 14%; | ||
} | } | ||
Line 229: | Line 281: | ||
color:white; | color:white; | ||
font-size:100%; | font-size:100%; | ||
+ | color:#F07818; | ||
+ | border-bottom:none; | ||
} | } | ||
table.site_map_table td a{ | table.site_map_table td a{ | ||
- | + | color: #eee; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
.site_map_table ul ul{ | .site_map_table ul ul{ | ||
padding:0 15px; | padding:0 15px; | ||
Line 245: | Line 297: | ||
.site_map_table a:hover { | .site_map_table a:hover { | ||
- | + | text-decoration: underline; | |
} | } | ||
Line 255: | Line 307: | ||
} | } | ||
div.banner_area img{ | div.banner_area img{ | ||
- | width:100%; | + | display: none; |
- | height: | + | width:100%; |
- | + | height: 150px; | |
+ | padding-top: 10px; | ||
} | } | ||
div.content_1{ | div.content_1{ | ||
Line 273: | Line 326: | ||
padding: 30px; | padding: 30px; | ||
vertical-align:top; | vertical-align:top; | ||
+ | text-align: justify; | ||
} | } | ||
table.content_table p { | table.content_table p { | ||
- | font-size: | + | font-size: 14px; |
- | font-family: " | + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
line-height: 1.5em; | line-height: 1.5em; | ||
+ | } | ||
+ | table.content_table{ | ||
+ | background-color:transparent; | ||
} | } | ||
div.content_area{ | div.content_area{ | ||
Line 285: | Line 342: | ||
} | } | ||
td.content_cell img{ | td.content_cell img{ | ||
- | width:100%; | + | width:100%; |
- | display:inline; | + | display:inline; |
} | } | ||
p.first_letter_enhanced::first-letter{ | p.first_letter_enhanced::first-letter{ | ||
- | font-size:300%; | + | font-size:300%;td.content_cell |
color: navy; | color: navy; | ||
} | } | ||
td.content_cell h5{ | td.content_cell h5{ | ||
font-size: 19px; | font-size: 19px; | ||
- | font-family:" | + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
font-weight:bold; | font-weight:bold; | ||
display:inline; | display:inline; | ||
} | } | ||
td.content_cell{ | td.content_cell{ | ||
- | background-color: # | + | background-color: #FFFFF5; |
- | border-radius: 8px; | + | border-radius: 8px; |
} | } | ||
td.content_cell h6{ | td.content_cell h6{ | ||
font-size: 15px; | font-size: 15px; | ||
- | font-family:" | + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
font-weight:normal; | font-weight:normal; | ||
display:inline; | display:inline; | ||
+ | } | ||
+ | td.content_cell a{ | ||
+ | color:blue; | ||
+ | text-decoration:underline; | ||
} | } | ||
.embedded_image_right{ | .embedded_image_right{ | ||
float: right; | float: right; | ||
- | + | margin: 20px; | |
width:50%; | width:50%; | ||
+ | padding:10px; | ||
} | } | ||
.embedded_image_left{ | .embedded_image_left{ | ||
float: left; | float: left; | ||
- | + | margin: 20px; | |
width:50%; | width:50%; | ||
+ | padding:10px; | ||
} | } | ||
div#description_area{ | div#description_area{ | ||
- | + | padding: 20px; | |
- | + | border-bottom: 2px dotted black; | |
- | + | background-color:#5E412F; | |
- | + | padding:10px 90px; | |
} | } | ||
div#description_area h2 { | div#description_area h2 { | ||
text-align:center; | text-align:center; | ||
font-size: 30px; | font-size: 30px; | ||
- | font-family:" | + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
font-weight:900; | font-weight:900; | ||
display:block; | display:block; | ||
Line 337: | Line 400: | ||
} | } | ||
div#description_area p{ | div#description_area p{ | ||
- | + | text-indent:20px; | |
- | + | color:white; | |
} | } | ||
table.start_up_link_area{ | table.start_up_link_area{ | ||
Line 360: | Line 423: | ||
tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container, | tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container, | ||
tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container{ | tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container{ | ||
- | background-color:# | + | background-color:#FF9c00; |
- | color: # | + | color: #000000; |
} | } | ||
.quick_link_row:nth-child(odd) .quick_link_button:nth-child(even) div.quick_link_container:hover, | .quick_link_row:nth-child(odd) .quick_link_button:nth-child(even) div.quick_link_container:hover, | ||
Line 367: | Line 430: | ||
tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover , | tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover , | ||
tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container:hover { | tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container:hover { | ||
- | background-color: # | + | background-color: #FFad11; |
- | + | ||
} | } | ||
.quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container, | .quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container, | ||
Line 375: | Line 437: | ||
tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container{ | tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container{ | ||
background-color:#009999; | background-color:#009999; | ||
- | color: # | + | color: #000000; |
} | } | ||
.quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container:hover, | .quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container:hover, | ||
Line 382: | Line 444: | ||
tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover { | tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover { | ||
background-color: #11aaaa; | background-color: #11aaaa; | ||
- | |||
} | } | ||
div#medal_reqire_container{ | div#medal_reqire_container{ | ||
- | display:flex; | + | display: flex; |
+ | flex-wrap: row; | ||
justify-content: center; | justify-content: center; | ||
+ | align-items: stretch; | ||
+ | align-content: space-between; | ||
} | } | ||
h3.What_medal{ | h3.What_medal{ | ||
- | font-size: large; | + | font-size: large; |
- | font-weight: 200; | + | font-weight: 200; |
- | text-transform: uppercase; | + | text-transform: uppercase; |
- | text-align: center; | + | text-align: center; |
- | border-bottom: 2px solid black; | + | border-bottom: 2px solid black; |
} | } | ||
div.each_medal{ | div.each_medal{ | ||
Line 416: | Line 480: | ||
list-style: none; | list-style: none; | ||
font-size: 16px; | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | /* smart image enlarger starts here */ | ||
+ | /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */ | ||
+ | |||
+ | .ienlarger { | ||
+ | clear: none; /* set to left or right if needed */ | ||
+ | padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ | ||
+ | padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ | ||
} | } | ||
+ | |||
+ | .ienlarger a { | ||
+ | display:block; | ||
+ | text-decoration: none; | ||
+ | cursor:default;/* add cursor:default; to this rule to disable the hand cursor */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a:hover{ /* don't move this positioning to normal state */ | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | .ienlarger span img { | ||
+ | border: 1px solid #FFFFFF; /* adds a border around the image */ | ||
+ | margin-bottom: 8px; /* pushes the text down from the image */ | ||
+ | } | ||
+ | |||
+ | .ienlarger a span { /* this is for the large image and the caption */ | ||
+ | position: absolute; | ||
+ | display:none; | ||
+ | color: #FFCC00; /* caption text colour */ | ||
+ | text-decoration: none; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 13px; /* caption text size */ | ||
+ | background-color: #000000; | ||
+ | font-weight: bold; | ||
+ | padding-top: 10px; | ||
+ | padding-right: 10px; | ||
+ | padding-bottom: 13px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | .ienlarger img { /* leave or IE puts a border around links */ | ||
+ | border-width: 0; | ||
+ | } | ||
+ | |||
+ | .ienlarger a:hover span { | ||
+ | display:block; | ||
+ | top: 50px; /* means the pop-up's top is 50px away from thumb's top */ | ||
+ | left: -250px; /* means the pop-up's left is 90px far from the thumb's left */ | ||
+ | z-index: 100; | ||
+ | cursor:default;/* add cursor:default; to this rule to disable the hand cursor only for the large image */ | ||
+ | |||
+ | /* If you want the pop-up open to the left of thumb, remove the left: 90px; and add | ||
+ | right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ | ||
+ | |||
+ | /* If you want the pop-up open above the thumb, remove the top: 50px; and add | ||
+ | bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ | ||
+ | } | ||
+ | |||
+ | .resize_thumb { | ||
+ | width: 700px; /* enter desired thumb width here */ | ||
+ | height : auto; | ||
+ | } | ||
+ | |||
+ | /* smart image enlarger ends here */ |
Revision as of 14:16, 10 October 2014
body { width: 100%; padding:0; margin:0; font: 14px Helvetica; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } html, body, .wrapper {
background-color: #fcebe6;
}
- content_container {
width:950px; margin: 0 auto; -webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); -moz-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); } a { color: #c0392b; text-decoration: none; } a:hover { color: #e74c3c; }
- menu {
padding: 0; text-align: center; text-transform:uppercase; }
h1 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 100px; text-align: center; margin: 0 0 0 0; padding: 50px 0 0 0 ; color: #fff; font-weight:100; letter-spacing: 0.0625em; }
/*The access-menu start*/ /* ============================================================================ */ nav {
background-color: #ff9900; background-image: url(""); background-size: 100% 100%; height: 127px; margin: 20px auto auto; width: 950px;
} nav ul{ list-style: none; margin: 0; padding: 0; white-space: nowrap; vertical-align: bottom;
} nav ul.access-menu:first-child { width: 100%;
} .access-menu{ display: table; margin: 0 auto;
}
.access-menu > li{ background: #554433; display: inline-block; position: relative; white-space: nowrap; border:1px solid white; margin-top: 15px; }
.access-menu > li + li{ border-left: solid 1px #000; }
.access-menu > li:hover .access-submenu{ top: 100%; left: auto; }
.access-menu a{ color: #eee; display: block; padding: .3em 1.5em; text-decoration: none; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; font-size: 90%; } .access-menu > li.access_logo { background-color: white; border: 5px outset black; border-radius: 20px; float: right; margin: 15px 10px 0; padding: 5px; transition: all 1s ease-in-out 0s; } .access-menu > li.access_logo:hover { background-color: white; border: 5px inset black; transform: rotate(360deg); } .access-menu > li.access_logo:first-child { float: left; } .access-menu img{ height: 40px; } .access-menu li:hover, .access-menu li:focus{ background-color: black; outline: none; } .access-submenu{ left: -9999px; position: absolute; top: -9999px; width: 150px; z-index: 100; } .access-submenu li{ background-color: #665544; border: 1px solid white; } .access-submenu > li + li{ border-top: solid 1px #000; }
.access-submenu > li:last-child{ border-bottom: solid 3px #000; }
.access-submenu a{ padding: .5em 1em; } .access-menu .access_logo > a { padding: 0; }
.is-show{ left: auto; top: 100%; } li.indent_list{ background-color:#776655; } /* ============================================================================ */ /*The access-menu end*/
- slide{
width: 100%; height: 600px; overflow:hidden; margin: 30px auto; box-shadow: 0 8px 6px -6px rgba(0,0,0,1); }
- slide div{
display:block; width:0; float: left; -webkit-transition: all 0.75s; -moz-transition: all 0.75s; -o-transition:all 0.75s; transition: all 0.75s; } img.picture { width:960px; } button.prev, button.next { position: absolute; z-index: 999; display: block; padding:0 10px; width: auto; height:350px; background: rgba(0,0,0,0); color: #ffffff; font-size:26px; cursor: pointer; border:none; outline:none; margin-top: 100px; } button.prev:hover, button.next:hover { background: rgba(0,0,0,0.8); } button.next { margin-left:911px; }
div.project_area{
margin:0 auto;
border: 1px solid black;
background-color:#006699;
padding:15px;
}
.project_area h4, .project_area p{ color:white; } div.project_box{ border: 1px solid gray; width: 450px; height: 150px; text-align: center; background-color:#006699; } div.project_box:hover { background-color: #0077AA; }
div.quick_link_container{ border-radius: 15px; -webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); -moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); background-color:#F0A830; height: 300px; padding: 10px; width: 166px;
} .quick_link_container > h4,.start_up_link_container > h4{ font-size: 25px; color: black; font-weight: 600; }
.quick_link_container > h4 { font-size: 20px; text-align: center; } .quick_link_container > p, .start_up_link_container > p{ font-size: 17px; } .quick_link_container > img { margin: auto; width: 160px; } .quick_link_sub { border: 1px solid black; border-radius: 10px; float: left; margin: 5px; padding: 5px; text-align: center; width: 140px; background-color:#fceeb4; color:black;
} .quick_link_sub:hover{ background-color:#ffffc5; color:#aaaaaa; } table.site_map_table{ background-color: #554433; width: 90%; padding: 5px 20px; border-radius: 5px; margin: 20px auto; text-align:left; } table.site_map_table td{ vertical-align: text-top; width: 14%;
} table.site_map_table td h4{ font-weight:900; color:white; font-size:100%; color:#F07818; border-bottom:none; } table.site_map_table td a{ color: #eee; }
.site_map_table ul ul{ padding:0 15px; }
.site_map_table p, .site_map_table ul, .site_map_table a{ color: #F0A830; }
.site_map_table a:hover { text-decoration: underline; }
div.banner_area{ width:100%; margin:0 auto; padding:0 auto; display:block; } div.banner_area img{ display: none; width:100%; height: 150px; padding-top: 10px; } div.content_1{ width:100%; margin-top:20px; } div.content_1 h3{ font-size:45px; color:#5E412F; border-bottom: 2px solid black; padding:0px 30px; } table.content_table td{ width:50%; padding: 30px; vertical-align:top; text-align: justify; } table.content_table p { font-size: 14px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.5em; } table.content_table{ background-color:transparent; } div.content_area{ padding:0 20px 0 20px; border-radius: 2px; height:auto; } td.content_cell img{ width:100%; display:inline;
}
p.first_letter_enhanced::first-letter{ font-size:300%;td.content_cell color: navy; } td.content_cell h5{ font-size: 19px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:bold; display:inline; } td.content_cell{ background-color: #FFFFF5; border-radius: 8px; } td.content_cell h6{ font-size: 15px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:normal; display:inline; } td.content_cell a{ color:blue; text-decoration:underline; } .embedded_image_right{ float: right; margin: 20px; width:50%; padding:10px; } .embedded_image_left{ float: left; margin: 20px; width:50%; padding:10px; } div#description_area{ padding: 20px; border-bottom: 2px dotted black; background-color:#5E412F; padding:10px 90px; } div#description_area h2 { text-align:center; font-size: 30px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight:900; display:block; text-decoration:underline; color:#78C0A8; text-transform:uppercase; } div#description_area p{ text-indent:20px; color:white; } table.start_up_link_area{ width:100%; } td.start_up_link_button{ width:25%; height:300px; } div.start_up_link_container{ width:90%; height:300px; padding:5px 10px 5px 10px; -webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); -moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); }
.quick_link_row:nth-child(odd) .quick_link_button:nth-child(even) div.quick_link_container, .quick_link_row:nth-child(even) .quick_link_button:nth-child(odd) div.quick_link_container, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container, tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container{ background-color:#FF9c00; color: #000000; } .quick_link_row:nth-child(odd) .quick_link_button:nth-child(even) div.quick_link_container:hover, .quick_link_row:nth-child(even) .quick_link_button:nth-child(odd) div.quick_link_container:hover, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover , tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(odd) div.start_up_link_container:hover { background-color: #FFad11; } .quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container, .quick_link_row:nth-child(even) .quick_link_button:nth-child(even) div.quick_link_container, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(odd) div.start_up_link_container, tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container{ background-color:#009999; color: #000000; } .quick_link_row:nth-child(odd) .quick_link_button:nth-child(odd) div.quick_link_container:hover, .quick_link_row:nth-child(even) .quick_link_button:nth-child(even) div.quick_link_container:hover, tr.start_up_link_row:nth-child(odd) td.start_up_link_button:nth-child(odd) div.start_up_link_container:hover , tr.start_up_link_row:nth-child(even) td.start_up_link_button:nth-child(even) div.start_up_link_container:hover { background-color: #11aaaa; }
div#medal_reqire_container{ display: flex; flex-wrap: row; justify-content: center; align-items: stretch; align-content: space-between; } h3.What_medal{ font-size: large; font-weight: 200; text-transform: uppercase; text-align: center; border-bottom: 2px solid black; } div.each_medal{ background: tomato; padding: 10px; margin:10px; }
div.achievement_container{ padding: 10px; margin:0 auto;
} div.achievement_container ul{ padding: 10px; margin:10px; background-color: #E3E0D7; } div.achievement_container ul li{ background-color: gray; list-style: none; font-size: 16px; }
/* smart image enlarger starts here */ /* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
.ienlarger {
clear: none; /* set to left or right if needed */ padding-bottom: 5px; /* space between thumbs. Don't change this to margin */ padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */ }
.ienlarger a { display:block; text-decoration: none; cursor:default;/* add cursor:default; to this rule to disable the hand cursor */ }
.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}
.ienlarger span img { border: 1px solid #FFFFFF; /* adds a border around the image */ margin-bottom: 8px; /* pushes the text down from the image */ }
.ienlarger a span { /* this is for the large image and the caption */ position: absolute; display:none; color: #FFCC00; /* caption text colour */ text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; /* caption text size */ background-color: #000000; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; }
.ienlarger img { /* leave or IE puts a border around links */ border-width: 0; }
.ienlarger a:hover span { display:block; top: 50px; /* means the pop-up's top is 50px away from thumb's top */ left: -250px; /* means the pop-up's left is 90px far from the thumb's left */ z-index: 100; cursor:default;/* add cursor:default; to this rule to disable the hand cursor only for the large image */
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
/* If you want the pop-up open above the thumb, remove the top: 50px; and add bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ }
.resize_thumb { width: 700px; /* enter desired thumb width here */ height : auto; }
/* smart image enlarger ends here */