freecol/www.freecol.org/templates/freecol/css/template_css.css

937 lines
17 KiB
CSS

/* general stuff */
body {
margin: 0;
padding: 0;
text-align: center;
font-family: verdana, arial, sans-serif;
}
a {
text-decoration: none;
font-weight: bold;
border: none;
}
a:hover {
text-decoration: underline;
border: none;
}
/* Layout */
#accessibility {
position: absolute;
left: -2000px;
top: -2000px;
display: none;
}
#source {
position: absolute;
left: -2000px;
top: -2000px;
display: none;
}
#pagewidth-1024 {
width: 970px;
text-align: left;
margin-left: auto;
margin-right: auto;
background: transparent url(../images/back_all1024.gif) repeat-y;
margin-bottom: 20px;
}
#leftcol div.module div div div div.submenu {
padding: 0 0 0 4px;
}
.image-with-title {
display: inline-block;
text-align: center;
/*flex: 1 1 0px;*/
min-width: 10rem;
}
.center {
text-align: center;
}
.group-image-with-title {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
justify-content: center;
column-gap: 1rem;
row-gap: 1rem;
align-content: flex-start;
align-items: flex-end;
flex-wrap: wrap;
}
@media only screen and (min-width: 770px) {
#pagewidth-800 {
width: 770px;
text-align: left;
margin-left: auto;
margin-right: auto;
background: transparent url(../images/back_all.gif) repeat-y 0 140px;
margin-bottom: 20px;
}
#outer-800 {
width: 770px;
padding-top: 6px;
background: transparent url(../images/content-top.gif) no-repeat top;
}
#footer-800 {
height: 28px;
width: 100%;
background: transparent url(../images/footer.jpg) bottom left no-repeat;
font-size: 12px;
}
#pathway {
width: 740px;
height: 19px;
padding-left: 20px;
padding-top: 5px;
}
#maincol-normal-800 {
float: left;
margin-left: -5px;
width: 446px;
}
#maincol-broad-800 {
float: left;
margin-left: -5px;
width: 417px;
}
#maincol-wide-800 {
float: left;
width: 595px;
margin-left: -5px;
padding-top: 0;
}
div#sflogo {
text-align: right;
position: relative;
right: 1px;
top: -27px;
height: 10px;
}
.graded_block {
width: 489px;
height: 64px;
background: transparent url(../images/graded_block.png);
margin-top: 20px;
margin-bottom: 20px;
}
.graded_block > table {
position: relative;
top: 20%;
margin-top: -25px;
}
.screenshot-welcome-bottom {
display: none;
}
#leftcol {
width: 152px;
float: left;
position: relative;
margin-right: 5px;
}
#leftcol div.module, #rightcol-normal div.module {
width: 152px;
background: transparent url(../images/module_middle.jpg) left repeat-y;
margin-bottom: 10px;
margin-top: 3px;
}
#leftcol div.module div, #rightcol-normal div.module div {
width: 152px;
background: transparent url(../images/module_top.jpg) top left no-repeat;
}
#leftcol div.module div div, #rightcol-normal div.module div div {
width: 152px;
background: transparent url(../images/module_bottom.jpg) bottom left no-repeat;
}
#leftcol div.module div div div, #rightcol-normal div.module div div div {
width: 137px;
background: transparent;
padding: 10px 10px 10px 5px;
font-size: 12px;
}
#leftcol div.module div div div div.mainmenu {
padding: 0;
}
/* Main Menu(s) */
a.mainlevel {
font-size: 12px;
padding-left: 4px;
width: 143px;
display: block;
line-height: 26px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.mainlevel {
width: 135px;
}
/* Opera5-Fix-fix ;-) */
a.mainlevel:hover, a.mainlevel#active_menu {
background: #F1F1F1;
text-decoration: none;
}
a.sublevel {
font-size: 12px;
padding: 0 0 0 12px;
width: 139px;
display: block;
line-height: 20px;
margin: 0 0 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.sublevel {
width: 123px;
}
/* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 123px;
}
html > body a.sublevel:hover, a.sublevel#active_menu {
width: 123px;
}
}
@media only screen and (max-width: 769.9px) {
#header {
display: none;
}
#pagewidth-800 {
width: 100%;
text-align: left;
background: white;
}
#outer-800 {
width: 100%;
bottom: 0rem;
background: white;
padding-top: 6px;
}
#footer-800 {
position: relative;
height: 28px;
width: 100%;
background: white;
font-size: 12px;
}
#pathway {
width: calc(100% - 1rem);
height: 19px;
padding-left: 1rem;
padding-top: 5px;
}
#maincol-normal-800 {
float: left;
margin-left: -5px;
width: calc(100% - 2rem);
padding-left: 1rem;
padding-right: 1rem;
}
#maincol-broad-800 {
float: left;
margin-left: -5px;
width: calc(100% - 2rem);
padding-left: 1rem;
padding-right: 1rem;
}
#maincol-wide-800 {
float: left;
width: calc(100% - 2rem);
margin-left: -5px;
padding-top: 0;
padding-left: 1rem;
padding-right: 1rem;
}
div#sflogo {
text-align: right;
position: relative;
right: 1rem;
top: -27px;
height: 10px;
}
.graded_block {
width: 100%;
height: 64px;
background: #dddddd;
border: 1px solid black;
margin-top: 20px;
margin-bottom: 20px;
}
.graded_block > table {
position: relative;
height: 100%;
}
#leftcol h3 {
/* main menu title */
display: none;
}
.pathway-right {
padding-right: 1rem;
}
.screenshot-welcome {
display: none;
}
.screenshot-welcome-bottom {
display: block;
padding-top: 1rem;
padding-bottom: 2rem;
}
.screenshot-welcome-bottom img {
width: 100%;
}
#leftcol {
width: 100%;
float: left;
position: relative;
}
#leftcol div.module, #rightcol-normal div.module {
width: 100%;
background: white;
margin-bottom: 10px;
margin-top: 3px;
}
#leftcol div.module div, #rightcol-normal div.module div {
width: 100%;
background: white;
}
#leftcol div.module div div, #rightcol-normal div.module div div {
width: 100%;
background: white;
}
#leftcol div.module div div div, #rightcol-normal div.module div div div {
width: calc(100% - 2rem);
padding-left: 1rem;
background: transparent;
font-size: 12px;
}
#leftcol div.module div div div div.mainmenu {
display: inline-block;
width: 8rem;
padding: 0;
}
/* Main Menu(s) */
a.mainlevel {
font-size: 12px;
/* padding-left: 4px; */
width: 143px;
display: block;
line-height: 26px;
margin-bottom: 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.mainlevel {
width: 100%;
}
/* Opera5-Fix-fix ;-) */
a.mainlevel:hover, a.mainlevel#active_menu {
background: #F1F1F1;
text-decoration: none;
}
a.sublevel {
font-size: 12px;
padding: 0 0 0 12px;
width: 139px;
display: block;
line-height: 20px;
margin: 0 0 2px;
text-decoration: none;
font-weight: normal;
border-right: 4px solid #CACACA;
}
html > body a.sublevel {
width: 100%;
}
/* Opera5-Fix-fix ;-) */
a.sublevel:hover, a.sublevel#active_menu {
text-decoration: none;
width: 100%;
}
html > body a.sublevel:hover, a.sublevel#active_menu {
width: 100%;
}
#leftcol > .module > div > div > div {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
justify-content: space-between;
column-gap: 1rem;
align-content: flex-start;
flex-wrap: wrap;
}
#leftcol .mainmenu {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
#leftcol .submenu {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
#outer-1024 {
background: transparent url(../images/content-top1024.gif) no-repeat top;
}
#header {
height: 119px;
width: 100%;
}
#top-top {
height: 30px;
width: 100%;
background: transparent;
}
#top-bottom {
height: 89px;
width: 100%;
background: transparent;
float: left;
}
#rightcol-normal {
width: 155px;
float: right;
position: relative;
margin-right: 1px;
/* margin-top: -22px;*/
margin-top: -12px;
}
#rightcol-broad {
width: 180px;
float: right;
position: relative;
margin-right: 1px;
/*margin-top: -22px;*/
margin-top: -12px;
}
#outer-1024 {
width: 970px;
padding-top: 6px;
}
#rightcol-broad-top {
width: 170px;
padding-left: 5px;
background: transparent url(../images/horizontal-line.jpg) bottom repeat-x;
}
#rightcol-broad-bottom {
width: 170px;
padding-left: 5px;
background: transparent url(../images/horizontal-line.jpg) top repeat-x;
}
#footer-1024 {
height: 40px;
width: 100%;
background: transparent url(../images/footer1024.jpg) bottom left no-repeat;
font-size: 12px;
}
#maincol-normal-1024 {
float: left;
width: 650px;
margin-left: -5px;
}
#maincol-broad-1024 {
float: left;
width: 622px;
margin-left: -5px;
}
#maincol-wide-1024 {
float: left;
width: 800px;
padding-top: 0;
margin-left: -5px;
}
#banner {
width: 478px;
height: 69px;
float: right;
padding-left: 6px;
padding-top: 6px;
}
iframe.wrapper {
z-index: 0;
}
.clr {
clear: both;
}
.content {
padding: 0;
font-size: 12px;
line-height: 18px;
margin-left: 5px;
margin-right: 0;
}
/* Modules */
.footer-copyright {
position: relative;
top: 5px;
}
#rightcol-broad div.module {
width: 180px;
background: transparent url(../images/vertical-line.jpg) left repeat-y;
padding-left: 5px;
padding-bottom: 10px;
}
#rightcol-broad div.module div {
width: 180px;
}
#rightcol-broad div.module div div {
width: 180px;
}
#rightcol-broad div.module div div div {
width: 162px;
background: transparent;
padding: 10px 10px 10px 5px;
font-size: 12px;
}
#rightcol-broad div.module div div div div {
padding: 0;
margin: 0;
}
div.module h3 {
font-size: 14px;
width: 130px;
font-weight: bold;
padding: 0;
margin: 0 0 5px;
}
#maincol-normal-800 div.moduletable, #maincol-wide-800 div.moduletable, #maincol-broad-800 div.moduletable, #maincol-normal-1024 div.moduletable, #maincol-wide-1024 div.moduletable, #maincol-broad-1024 div.moduletable {
width: 100%;
margin-bottom: 10px;
border: 1px solid #EFEFEF;
background: transparent;
font-size: 12px;
}
#maincol-normal-800 div.moduletable h3, #maincol-wide-800 div.moduletable h3, #maincol-broad-800 div.moduletable h3, #maincol-normal-1024 div.moduletable h3, #maincol-wide-1024 div.moduletable h3, #maincol-broad-1024 div.moduletable h3 {
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 0;
height: 20px;
line-height: 20px;
color: #FFF;
width: 100%;
border-bottom: 1px solid #EFEFEF;
text-align: left;
text-indent: 5px;
}
/* Topmenu */
ul#mainlevel-nav {
list-style: none;
padding: 0;
margin: 0;
float: right;
white-space: nowrap;
}
ul#mainlevel-nav li {
width: 5%;
float: left;
font-size: 12px;
height: 20px;
line-height: 20px;
white-space: nowrap;
margin: 0 1px 0 0;
}
ul#mainlevel-nav li a {
font-weight: normal;
height: 20px;
display: block;
padding-left: 5px;
padding-right: 10px;
text-decoration: none;
color: #CCCCCC;
margin-left: 5px;
white-space: nowrap;
}
/* Module specific */
#leftcol div.module div div div div.syndicate {
background: transparent;
width: 137px;
margin: 0;
padding: 0;
}
#leftcol div.module div div div div.syndicate div {
background: transparent;
width: 137px;
margin: 0;
padding: 0;
}
/* Other Mambo Stuff */
span.pathway {
color: #BBBBBB;
font-size: 12px;
text-decoration: none;
font-weight: normal;
float: left;
}
.pathway a {
color: #BBBBBB;
text-decoration: none;
font-weight: normal;
}
.pathway-right {
color: #BBBBBB;
font-size: 12px;
text-decoration: none;
font-weight: normal;
float: right;
}
.pathway-right a {
color: #BBBBBB;
text-decoration: none;
font-weight: normal;
}
hr {
width: 90%;
}
hr.separator {
width: 40%;
}
.small {
font-size: 12px;
color: #ABABAB;
line-height: 0.7;
}
.smalldark {
font-size: 12px;
color: #000;
height: 10px;
line-height: 10px;
text-align: left;
}
.sectiontableentry1 {
text-align: left;
background: #EFEFEF;
font-size: 12px;
padding: 2px;
}
.sectiontableentry2 {
background: #FFF;
font-size: 12px;
text-align: left;
padding: 2px;
}
.button {
border: 1px solid #BBBBBB;
}
.inputbox {
border: 1px solid #BBBBBB;
}
.createdate {
font-size: 12px;
color: #ABABAB;
height: 10px;
line-height: 0.7;
padding-bottom: 15px;
}
a.readon {
font-size: 12px;
text-decoration: none;
line-height: 15px;
border: 1px solid #EEEEEE;
padding-left: 13px;
background: url(../images/readon.gif) no-repeat left;
margin-top: 10px;
font-weight: normal;
}
.blog_more {
font-size: 12px;
}
a.readon:hover {
background: #EEEEEE url(../images/readon.gif) no-repeat left;
text-decoration: none;
}
.blog {
width: 100%;
}
.contentheading {
font-weight: bold;
font-size: 18px;
padding-bottom: 5px;
line-height: 20px;
font-family: 'Trebuchet MS', verdana, sans-serif;
border-bottom: 1px solid #002E61;
color: #002E61;
margin-bottom: 5px;
}
.contentpaneopen {
text-align: left;
background: transparent;
font-size: 12px;
line-height: 1.8;
}
table.contentpane td.contentheading {
font-weight: bold;
font-size: 18px;
height: 23px;
line-height: 20px;
font-family: 'Trebuchet MS', verdana, sans-serif;
border: none;
}
td {
font-size: 12px;
}
table.contentpane ul {
margin: 0;
padding: 0;
list-style: none;
}
table.contentpane ul li {
margin: 0;
padding: 0 0 0 15px;
}
.contentdescription {
font-size: 12px;
}
.sectiontableheader {
font-weight: bold;
font-size: 12px;
height: 25px;
line-height: 25px;
}
.categorytitle {
font-weight: bold;
font-size: 18px;
height: 25px;
line-height: 25px;
font-family: "Trebuchet MS", Verdana, sans serif;
}
a.category {
text-decoration: underline;
}
a.category:hover {
text-decoration: underline;
}
table.moduletable {
width: 100%;
font-size: 80%;
}
table.moduletable th {
font-size: 80%;
}
.back_button {
margin-top: 20px;
margin-left: 5px;
margin-right: 0;
}
.back_button a {
font-size: 12px;
font-weight: normal;
}
.blogsection {
font-size: 12px;
}
.blog_more ul li {
list-style: none;
padding-left: 14px;
line-height: 18px;
}
table.contenttoc {
border: 1px solid #CCCCCC;
padding: 3px;
}
table.contenttoc th {
font-weight: bold;
font-size: 12px;
border-bottom: 1px solid #BBBBBB;
}
/* New CSS for site cleanup */
div.warningbox {
border: #9F6000 1px solid;
margin: .5em 0;
padding: .5em;
background-color: #FEEFB3;
color: #9F6000;
}
div.infobox {
border: #9F6000 1px solid;
margin: .5em 0;
padding: .5em;
background-color: #EEEEFF;
color: #000044;
}
tr.trLine .leftcell {
padding: 0 .25em;
vertical-align: top;
text-align: right;
}
.content table.contentpane {
margin-bottom: 2em;
}