openrocket/core/web/html/layout.css
2012-03-10 14:29:32 +00:00

591 lines
9.9 KiB
CSS

body {
margin: 0;
padding: 0;
background-color: black;
background-image: url(starfield.jpg);
}
#iewarn {
width: 100%;
font-size: 140%;
background-color: #fa0;
text-align: center;
padding: 2em 2em;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
h1 {
margin: 0.75em 1.7em 1.25em 120px;
color: #bbf;
text-align: right;
}
h2 {
margin-top: 1.5em;
border-bottom: dotted 2px #f99;
}
/* TODO: Change to direct next element */
div.content h2:first-child {
margin-top: 0em;
}
h3 {
margin-top: 1.5em;
border-bottom: dotted 1px #99f;
}
h3.minor, h4.minor, h5.minor {
font-size: 100%;
border-bottom: none;
}
a {
text-decoration: none;
color: #00B;
}
a:hover {
color: #44c;
}
div.icon {
position: absolute;
width: 194px;
height: 214px;
left: 0px;
top: -178px;
background: url('icon.png') no-repeat;
}
div.icon a {
display: block;
position: absolute;
left: 0px;
right: 25px;
top: 0px;
bottom: 0px;
/* border: solid 1px red; */
}
div.menucontainer {
position: absolute;
top: 90px;
left: 0px;
z-index: 100;
}
div.menu {
position: absolute;
left: 20px;
top: 95px;
width: 170px;
margin: 0;
padding: 0 0;
background: url("menubg.png") repeat-x scroll 0 -35px #C1D0DB;
z-index: 200;
border: solid 1px black;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);
}
div.menu ul {
position: relative;
list-style: none;
margin: 0;
padding: 0 0;
}
div.menu li {
display: block;
left: 0;
right: 0;
margin: 0;
text-align: center;
}
div.menu li a {
display: block;
left: 0;
right: 0;
font-style: normal;
text-decoration: none;
color: #00d;
padding: 0.65em 1em;
outline: none;
border: 1px solid transparent;
}
div.menu li:first-child a {
padding: 0.5em 0 !important;
font-size: 160% !important;
font-weight: normal !important;
color: #003 !important;
background-color: transparent !important;
border: 1px solid transparent !important;
text-shadow: #666 1px 1px 3px;
}
div.menu li a:hover {
/* Copied below */
background-color: #eeb6b6;
background-color: rgba(255,240,240,0.5);
border: 1px solid rgba(0,0,0,0.3);
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}
div.menu div.logo {
position: absolute;
top: 100%;
left: -2px;
margin-top: 15px;
width: 100%;
}
div.menu div.logo img {
display: block;
margin: 0 auto;
}
.page_features div.menu a[href="features.html"],
.page_screenshots div.menu a[href="screenshots.html"],
.page_download div.menu a[href="download.html"],
.page_documentation div.menu a[href="documentation.html"],
.page_getinvolved div.menu a[href="getinvolved.html"],
.page_contact div.menu a[href="contact.html"],
.page_report div.menu a[href="report.html"],
.page_license div.menu a[href="license.html"] {
font-weight: bold;
background-color: transparent;
background-color: rgba(255,240,240,0.2);
border: 1px solid rgba(0,0,255,0.15);
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}
.page_features div.menu a[href="features.html"]:hover,
.page_screenshots div.menu a[href="screenshots.html"]:hover,
.page_download div.menu a[href="download.html"]:hover,
.page_documentation div.menu a[href="documentation.html"]:hover,
.page_getinvolved div.menu a[href="getinvolved.html"]:hover,
.page_contact div.menu a[href="contact.html"]:hover,
.page_report div.menu a[href="report.html"]:hover,
.page_license div.menu a[href="license.html"]:hover {
/* Copied above */
background-color: #eeb6b6;
background-color: rgba(255,240,240,0.5);
border: 1px solid rgba(0,0,0,0.3);
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}
.content {
margin: 0em 2em 1em 130px;
padding: 2em 2em 2em 95px;
min-height: 27em;
background-color: white;
position: relative;
*border: 2px solid #666;
min-height: 530px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0px 0px 8px 5px white;
-webkit-box-shadow: 0px 0px 8px 5px white;
box-shadow: 0px 0px 8px 5px white;
}
.gradientbutton {
display: inline-block;
width: 200px;
height: 100px;
border-top: 2px solid #6f2;
border-left: 1px solid #4c1;
border-right: 1px solid #380;
border-bottom: 2px solid #360;
background-color: #5c2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.08, rgb(55,146,14)),
color-stop(0.9, rgb(102,221,17))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(55,146,14) 8%,
rgb(102,221,17) 90%
);
/*
background: -moz-linear-gradient(center bottom , #0B5CE2 30%, #2678FF 65%) repeat scroll 0 0;
/** */
}
img {
border: 0px;
outline: none;
font-size: 70%;
}
.smallshot {
float: left;
margin-top:2em;
text-align: center;
font-style: italic;
margin-right: 2em;
}
.smallshot.last {
margin-right: 0;
}
.clear {
clear:both;
}
a.help {
margin-left: 1em;
font-size: smaller;
font-style: italic;
}
pre.quote {
margin: 0.5em 2em;
padding: 1em;
border: dashed 1px #888;
background-color: #ddd;
display: inline-block;
}
p.quote {
margin: 2em;
}
div.separated {
padding: 0.5em;
}
hr {
margin: 2em 0em;
}
.left {
float: left;
margin: 0;
}
.right {
float: right;
margin: 0;
}
li {
margin-top: 0.5em;
}
p.download {
margin: 2em;
}
p.download a {
font-size: 140%;
font-style: italic;
padding: 0.5em;
border: dashed 1px red;
background-color: #89cbe0;
outline: none;
}
p.download a:hover {
color: #00F;
background-color: #ee9494;
}
p.download a:focus {
background-color: #8fd5eb;
}
div.valid {
float: right;
margin-right: 2em;
}
ol.toc {
list-style-type: none;
}
dt+dt {
margin-top: 0.5em;
}
dd {
margin-top: 0.2em;
margin-bottom: 1.4em;
}
div.downloadbox {
position: relative;
width: 180px;
height: 80px;
text-align: left;
border-top: 2px solid #6e2;
border-left: 1px solid #4c1;
border-right: 1px solid #380;
border-bottom: 2px solid #360;
-moz-box-shadow: 1px 1px 4px 0px #333;
-webkit-box-shadow: 1px 1px 4px 0px #333;
box-shadow: 1px 1px 4px 0px #333;
background-color: #5c2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.08, rgb(55,156,14)),
color-stop(0.9, rgb(102,221,17))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(55,156,14) 8%,
rgb(102,221,17) 90%
);
white-space: nowrap;
}
div.downloadbox a.main {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
color: #a0ff4b;
font-family: Arial, sans-serif;
padding: 8px 12px;
text-shadow: #666 1px 1px 1px;
}
div.downloadbox a.main span {
font-size: 90%;
}
div.downloadbox a.main:hover {
text-shadow: #000 1px 1px 1px;
}
div.downloadbox a strong {
display: block;
margin-bottom: 3px;
color: white;
font-weight: bold;
font-size: larger;
}
div.downloadbox a:hover strong {
text-shadow: #666 1px 1px 1px;
}
div.downloadbox .alternative {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0 10px 10px 10px;
font-size: 11px;
font-family: Arial, sans-serif;
color: #244506;
}
div.downloadbox .alternative a {
color: #244506;
}
div.downloadbox .alternative a+a {
text-align: right;
}
div.downloadbox .alternative a:hover {
color: black;
}
/*
.page_index div.downloadbox {
width: 195px;
margin: 0.5em 0 1em 50px;
}
*/
.rightpane {
width: 210px;
float: right;
clear: both;
margin: 0 0 0 30px;
text-align: center;
}
.rightpane div {
margin: 2em auto;
}
.rightpane div.downloadbox {
margin: 0 auto 2em auto;
}
.rightpane div.screenshot {
font-size: smaller;
font-style: italic;
text-align: center;
}
.rightpane div.support {
margin-bottom: 0;
text-align: center;
}
.page_download div.support {
margin: 20px 0;
}
.rightimg {
width: 210px;
float: right;
clear: both;
margin: 2em 0 2em 30px;
font-size: smaller;
font-style: italic;
text-align: center;
}
.rightimg img {
display: block;
margin-bottom: 1em;
}
div.news .date {
font-weight: bold;
}
.page_download div.contentholder {
margin-right: 15em;
}
.page_download div.news {
background-color: white;
padding-left: 3em;
float: right;
width: 18em;
font-size: x-small;
}
.page_download div.news h2 {
border-bottom: none;
margin-bottom: 1em;
}
.page_download div.news .date {
display: block;
}
.page_download div.downloadbox {
margin-left: auto;
margin-right: auto;
}
li.spacer {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.screenshots {
background-color: white;
padding-left: 3em;
float: right;
width: 270px;
font-size: x-small;
}
.smallshotconst {
width: 270px;
height: 220px;
margin: 0em 1em;
text-align: center;
font-style: italic;
}
.smallshotconst em {
font-style: normal;
}
pre.license {
width: 46em;
margin: 1em auto;
}
.note {
font-size: 80%;
}
.spacing {
margin-top: 2em;
margin-bottom: 2em;
}
dl {
margin: 0 2em;
}
span.command {
white-space: nowrap;
font-family: monospace;
border: solid 1px #ddd;
background-color: #eee;
padding: 1px 3px;
}
.center {
text-align: center;
}
span.licenseimage {
display: block;
float: left;
width: 100px;
margin-left: 10px;
margin-top: 2px;
}
.instructions {
margin-left: 100px;
}