expoweb/css/main2.css

486 lines
9.9 KiB
CSS

/*This CSS file has been edited for CUCC - Expo website by A. Zabala on 2011*/
/* code of colours
#C8E1E2 very light
#99CCCC light blue
#008787 darker blue for fonts
#004C4C very dark
*/
body {
background: #fff url(../images/style/bg-cambridge-caving-expedition.png) repeat-x 0 0;
color: #000;
font-family: 'Palatino Linotype','Book Antiqua', Palatino, Garamond, serif;
font-size: 12pt;
margin-left: 275px;
margin-right: 100px;
text-align: justify;
/*max-width: 800px;*/
}
/*Fix for modern displays 2020.01 by AZ*/
@media all and (max-width: 750px) {
body {
margin-left: 5px;
margin-right: 5px;
}
img {
max-width:100% !important;
height:auto !important;
}
table#cavepage {
font-size: 120%;
}
}
/*end of 2020.01 fix*/
body#homepage {
background: #008787 url(../images/style/homebackground.jpg) no-repeat 0 0;
background-size: 140% auto;
color: #fff;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana, Arial, Helvetica, Sans-Serif;
margin: 80px;
text-align: left;
}
.didntcave { color: #dd0000 }
.caption {
color: #004C4C;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
font-size: 8pt;
font-weight: bold;
margin-bottom: 0;
}
.centre { text-align: center; }
.plus2pt { font-size: 160%; }
a {
color: #008787;
}
a:hover {
color: #d7442b;
}
/*a:visited {
color: #636363;
}*/
div.centre img {
border: 2px solid #99CCCC;
margin: 25px;
vertical-align: middle;
}
hr {
border: 1px solid #99CCCC;
margin: 25px 0;
}
dt {
clear: both;
font-weight: bold;
margin-top: 10px;
}
dd {
display: inline;
margin-left: 0pt;
}
div.clear {
clear: both;
}
tt, code { /*code bits*/
background: #ccc;
font-size: 0.8em;
padding: 10px 20px;
display: block;
}
/*HEADINGS*/
h1, h2, h3, h4 {
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
}
h1 {
text-align: center;
font-size: 210%;
line-height: 100%;
margin: 35px 0 55px;
}
h2, h3, h4 {
color: #005151;
}
h2#tophead {
text-align: center;
margin: 10px 0 -22px;
}
/*IMAGES*/
img.onright, div.onright { vertical-align: top; float: right;
margin-left: 10pt; margin-bottom: 10pt;
margin-right: 8pt; }
img.onleft, div.onleft { vertical-align: top; float: left;
margin-right: 10pt; margin-bottom: 10pt;
margin-left: 8pt; }
img.icon { vertical-align: middle; margin: 10px 0; }
img.aligntop { vertical-align: top; }
table.imgtable { margin-left: auto; margin-right: auto; }
table.imgtable td { vertical-align: middle; text-align: center;
padding: 10px; }
/*Menu*/
.menu,
ul#links {
background: #fff url(../images/style/menu-main.png) no-repeat 16px 4px;
clear: both;
border: 2px solid #99CCCC;
position: absolute;
left: 35px;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
font-size: 75%;
color: #888;
width: 150px;
padding: 42px 20px 18px;
text-align: left;
border-top-right-radius: 1em;
}
*html .menu {width: 180px; left: 10px;}
*+html .menu {width: 180px; left: 10px;}
*html ul#links {width: 180px; left: 10px;}
*+html ul#links {width: 180px; left: 10px;}
.menu {
top: 20px;
}
ul#links {
/*background-image: url(../images/style/menu-second.png);
border-color: #C8E1E2;
border-style: dotted;*/
top: 15px /*300px; to be set once the menu is in all pages*/
}
@media only screen and (min-width: 751px) {
ul#links ~ ul#links {
top:500px; /*funky fix for a funky HTML*/
}
}
/*Fix for modern displays 2020.01 by AZ*/
@media only screen and (max-width: 750px) {
ul#links {
width: 93%;
left: 2px;
font-size: 100%;
padding: 5px;
padding-top:42px;
position: relative; /*this puts the menu back where the HTML places it --at the bottom. This is necessary to avoid two elements with same ID overlapping*/
}
ul#links li {
width: 95%;
display:block;
}
}
/*end of 2020.01 fix*/
ul#links a {
text-decoration: none;
}
p#topheader {
font-weight: bold;
margin: 10px 0 0;
}
.menu ul {
margin: 0 0 0 15px;
padding: 0;
}
.menu li,
ul#links li {
margin: 6px 0;
list-style: none outside none;
}
ul#links li {
margin: 5px 0 0 0;
}
ul#links li ul {
padding: 5px 0 5px 10px;
}
ul#links li li {
margin: 0 0 0 5px;
}
.menu li a,
ul#links li a {
background: url(../images/style/cave-picto.png) no-repeat 0 8px;
padding-left: 18px;
}
.menu li a:hover,
ul#links li a:hover {
background-position: 0 -8px;
border-bottom: 2px solid #d7442b;
}
ul#links li a.editlink {
background: url(../images/style/edit-picto.png) no-repeat 100% 0;
font-size: 85%;
padding: 0 18px;
}
ul#links li a.editlink:hover {
background-position: 100% -18px;
}
/* TABLES */
table.trad, table.centre, table.fancy {
border-collapse: collapse;
}
table.trad, table.trad th, table.trad td,
table.centre, table.centre th, table.centre td,
table.fancy, table.fancy th, table.fancy td {
border: 1px solid #008787;
margin: 0px;
}
table.trad th,
table.centre th {
background-color: #C8E1E2;
}
table.trad td,
table.centre td {
padding: 5px;
border-color: #99CCCC;
}
table.centre {
margin-left: auto;
margin-right: auto;
}
table.centre td {
text-align: left;
}
table.bigfatborder {
border-width: 6px;
}
table.fancy { /*For the members list in ../folk/index.htm*/
font-size: 72%;
padding: 5px 2px;
}
table.fancy td:first-child {
background-color: #C8E1E2;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
width: 180px;
}
table.fancy td.nonempty {
background-color: #99CCCC;
font-size: 85%;
text-align: center;
}
/*SPECIAL PAGES*/
/*homepage*/
#homepage h1 {
color: #fff;
font-size: 2.2em;
margin-bottom: 0;
text-align: left;
}
#homepage h1 a, #homepage p a {
color: #bedfdf;
}
#homepage h1 a:hover, #homepage p a:hover {
color: #008787;
}
#homebox {
left: 280px;
top: 100px;
position: absolute;
}
ul#homenu {
list-style: none;
margin: 0;
padding: 0;
width: 165px;
}
ul#homenu li {
padding: 0 0 10px;
}
ul#homenu li a {
border-top-right-radius: 1em;
border: 1px solid #008787;
display: block;
background: #bedfdf;
padding: 7px 16px 7px 8px;
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
font-size: 85%;
}
ul#homenu li a:hover {
background: #008787;
color: #fff;
}
/*Fix for modern displays 2020.01 by AZ*/
@media all and (max-width: 750px) {
body#homepage {
margin:5px;
}
ul#homenu {
width:93%;
top:0;
position: absolute;
}
ul#homenu li {
margin:0;
padding: 0;
display: inline-block;
}
ul#homenu li a {
padding:5px;
}
#homebox {
left:0;
position:relative;
top:70px;
margin-right:2px !important;
}
}
/*end of 2020.01 fix*/
/*caves*/
table#cavepage {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #99CCCC;
font-size: 160%;
margin-top: 25px;
padding: 25px;
width: 100%;
}
table#cavepage th#kat_no { text-align: left; width: 25%; }
table#cavepage th#name { text-align: center; width: 50%; }
table#cavepage th#status { text-align: right; width: 25%; }
/*Trip logbooks*/
#logbk hr {
display: none;
}
.tripdate, .trippeople {
background-color: #C6E4E3;
float: left;
margin: 2px 1px 1px 1px;
padding: 10px;
border-bottom-right-radius: 1em;
}
.trippeople {
background-color: #fff;
float: right;
font-style: italic;
}
.triptitle {
border: 1px solid #99CCCC;
border-top-width: 2px;
color: #008787;
font-size: 120%;
font-weight: bold;
padding: 45px 10px 20px;
text-align: center;
}
.timeug {
text-align: right;
font-weight: bold;
margin-bottom: 10px;}
/*html editor*/
textarea#id_html {
width: 100%;
height: 60%;
}
/*RULES OVERRIDING JQUERY CSS FOR CAVES DESCRIPTION*/
/*This method is faster but less efficient. These would better be directly written in the jquery css file currently in http://expo.survex.com/site_media/css/redmond/jquery-ui-1.8.14.custom.css*/
body .ui-widget {
font-family: inherit;
font-size: inherit;
}
body .ui-widget-content {
color: inherit;
border: 2px solid #99CCCC;
border-radius: 0 !important;
border-top: none;
}
body .ui-widget-content a {
color: #008787;
}
body .ui-widget-content a:hover,
body .ui-widget-content a:visited:hover,
body .ui-state-default a:hover {
color: #d7442b;
}
body .ui-widget-content a:visited {
color: #636363;
}
body .ui-widget-header {
background: url("../images/style/ui-bg_gloss-wave_green.png") repeat-x scroll 50% 50% #85bdbe;
border: 1px solid #85bdbe;
color: #FFFFFF;
}
body .ui-tabs {
padding: 0;
border-radius: 0 !important;
}
body .ui-tabs .ui-tabs-nav {
padding-left: 10px;
}
body .ui-tabs-nav {
border-radius: 0 !important;
}
body .ui-tabs .ui-tabs-nav li {
font-family: Tahoma,'Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
margin: 0 15px 1px 0;
padding-right: 5px;
}
body .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background: #fff;
color: #E17009;
}
body .ui-state-default,
body .ui-widget-content .ui-state-default,
body .ui-widget-header .ui-state-default {
border: 1px solid #85bdbe;
background: #85bdbe url("../images/style/ui-bg_glass_green.png") 50% 50% repeat-x;
font-weight: bold;
color: #008787;
}
body .ui-corner-all,
body .ui-corner-top,
body .ui-corner-right,
body .ui-corner-tr {
border-top-right-radius: 30px;
}
body .ui-state-default a,
body .ui-state-default a:link,
body .ui-state-default a:visited {
color: #008787;
text-decoration: none;
}
body .ui-state-active a,
body .ui-state-active a:link,
body .ui-state-active a:visited,
body .ui-state-default a:hover,
body .ui-state-default a:link:hover,
body .ui-state-default a:visited:hover {
color: #E17009;
}
/*Narrow screens support*/
/*Added 2019-02-22 by Radost Waszkiewicz
@media only screen and (max-width: 600px), screen and (max-aspect-ratio: 5/4)
{
ul#links {
position: static;
}
body {
margin-left: 100px;
margin-right: 100px;
}
}*/
/*Print support*/
/*Complete ignorant hack 2019-07-16 by Philip Sargent*/
@media only print, print)
{
ul#links {
position: static;
}
body {
margin-left: 0px;
margin-right: 0px;
}
}