html, body {
margin: 0;
padding: 0; }
body {
color: #000;
background-color: #fff;
font-family: sans-serif;
font-size: 94%;
margin: 0 auto;
position: relative; }
a:link {
text-decoration: underline;
color: #00f; }
a:visited {
text-decoration: underline;
color: #60a; }
a:hover {
text-decoration: none; }
a:active {
text-decoration: underline;
color: #f00; }
h1 {
font-size: 200%;
font-weight: bold; }
h2 {
font-size: 160%;
padding-top: 5mm;
border-top: 1px solid black; }
h3 {
font-size: 140%;
font-weight: bold; }
h4 {
font-size: 120%;
font-weight: bold; }
h5 {
font-size: 120%;
font-style: italic; }
h1, h2, h3 {
clear: both; }
dl {
margin: 1em 0em;
padding: 0; }
dt {
margin: 0.3em 0 0 0;
padding: 0;
font-weight: bold; }
dd {
margin: 0 0 0.3em 1em;
padding: 0; }
dd > ul {
margin-top: 0;
margin-left: 0.5em;
padding-left: 0;
margin-bottom: 1em; }
.banner {
margin: 0;
padding: 0;
background-color: #94adff;
color: black;
text-align: left; }
.banner img {
border: none;
color: #000;
height: 86px;
width: 308px;
display: block; }
.navigation {
width: 12.6em;
padding: 0;
position: absolute;
left: 0;
top: 86px;
background: #c6d3ff url("webimages/nav.png") repeat-y top left; }
.navigation .navsection {
font-size: 106%;
border-top: 1px solid white;
margin: 0;
padding: 0.8em; }
.navigation ul {
margin: 0;
padding: 0;
background: #bbcbff; }
.navigation li {
display: block;
list-style-type: none;
margin: 0; }
.navigation li a {
display: block;
padding: 0.2em 0.5em 0.2em 1em;
color: #00f;
text-decoration: none;
border-top: 1px solid #ccd8ff;
border-bottom: 1px solid #a4b9ff;
border-left: 1px solid #ccd8ff;
border-right: 1px solid #a4b9ff; }
.navigation li a:visited {
display: block;
color: #00f;
text-decoration: none; }
.navigation li a:hover {
display: block;
color: #00f;
background: #ccd8ff;
text-decoration: none; }
.navigation li a:active {
display: block;
padding: 0.2em 0.3em 0.2em 1.2em;
color: #00f;
background: #ccd8ff;
text-decoration: none;
outline: none; }
.navigation li ul {
margin: 0;
padding: 0; }
.navigation li li {
display: block;
list-style-type: none;
margin: 0; }
.navigation li li a {
display: block;
padding: 0.2em 0.5em 0.2em 2em;
color: #00f;
text-decoration: none;
background: url("webimages/arrow.png") no-repeat 1.2em 50%; }
.navigation li li a:visited {
display: block;
color: #00f;
text-decoration: none; }
.navigation li li a:hover {
display: block;
color: #00f;
background: #ccd8ff url("webimages/arrow.png") no-repeat 1.2em 50%;
text-decoration: none; }
.navigation li li a:active {
display: block;
padding: 0.2em 0.3em 0.2em 2.2em;
color: #00f;
text-decoration: none;
background: #ccd8ff url("webimages/arrow.png") no-repeat 1.4em 50%; }
.navigation h2 {
margin: 0;
padding: 0.4em 0.6em;
font-size: 75%;
background: #bbcbff;
border-top: 1px solid #ccd8ff;
border-left: 1px solid #ccd8ff;
border-right: 1px solid #a4b9ff; }
.navigation p {
margin: 0;
padding: 0.4em 0.6em;
font-size: 75%;
background: #bbcbff;
border-top: none;
border-left: 1px solid #ccd8ff;
border-right: 1px solid #a4b9ff; }
.navigation h2.navtitle {
font-weight: bold;
text-align: center;
font-size: 75%; }
.navigation dl {
margin: 0;
padding: 0.4em 0.6em;
font-size: 75%;
background: #bbcbff;
border-bottom: 1px solid #a4b9ff;
border-left: 1px solid #ccd8ff;
border-right: 1px solid #a4b9ff; }
.navsection > dl > dd + dt {
margin-top: 1em; }
.navigation dl dl {
margin: 0;
padding: 0;
border: none;
font-size: 100%; }
.navigation ul.languages, .navigation ul.sitelinks {
margin: 0;
padding: 0.4em 0.6em;
font-size: 75%;
background: #bbcbff;
border-top: 1px solid #ccd8ff;
border-bottom: 1px solid #a4b9ff;
border-left: 1px solid #ccd8ff;
border-right: 1px solid #a4b9ff; }
.navigation ul.languages li, .navigation ul.sitelinks li {
border: none;
background: transparent;
padding: 0;
margin: 0;
font-weight: bold; }
.navigation ul.sitelinks li + li {
margin-top: 0.2em; }
.navigation ul.languages li a, .navigation ul.sitelinks li a {
display: block;
padding: 0;
margin: 0;
font-weight: normal;
border: none; }
.navigation ul.languages li a:hover, .navigation ul.sitelinks li a:hover {
display: block;
color: #00f;
padding: 0 0 0 0.2em;
margin: 0;
background: transparent;
text-decoration: none; }
a.seemore, span.seemore {
text-align: right;
font-weight: bold; }
a.seemore:after, span.seemore:after {
content: " »"; }
.onlycontent {
font-size: 104%;
margin: 0 1em; }
h2.firsthead {
border: none;
padding: 0;
margin-top: 1.4em; }
.content {
background-color: #fff;
margin: 0 0 0 12.6em;
padding: 1em; }
.content .frontpageintro {
float: left;
width: 49%; }
.content .frontpagelatestinfo {
float: right;
width: 50%;
background-color: #fff; }
.content .frontpageintro h2 {
border: none;
padding-top: 0; }
.content .frontpagelatestinfo h2 {
border: none;
padding-top: 0; }
.content .frontpagelatestinfo > div {
padding-left: 1em; }
#leader {
font-weight: bold; }
div.frontscreen {
overflow: auto;
width: 100%;
border-color: #94adff; }
div.frontscreen p.frontscreen {
margin: 0 auto;
width: 252px;
border: 2px solid #c5d3ff; }
div.frontscreen a {
display: block;
margin: 0; }
div.frontscreen a img {
width: 250px;
height: 188px;
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff; }
div.frontscreen a:hover img {
border: 1px solid #00f; }
div.frontscreen a {
text-decoration: none; }
div.frontscreen a:hover span {
text-decoration: underline; }
div.frontscreen span {
display: block;
margin: 0;
padding: 0.2em;
text-align: center;
background-color: #d8e2ff;
border-top: 2px solid #c5d3ff; }
.downloadbox {
padding-top: 20px;
position: relative;
overflow: hidden;
width: 100%;
color: white;
max-width: 28em;
margin: 0 auto; }
.downloadbox a {
color: white;
display: block;
height:100%; }
.downloadbox .downloadcontainer {
position: relative;
width: 100%;
margin: 0; }
.downloadbox .downloadcontent {
border: 6px solid #0000b8;
margin: 0;
background: #000059 url("webimages/downloadbg.png") repeat-x top left; }
.downloadbox div.topleft {
border: none;
position: absolute;
width: 31px;
height: 30px;
top: 0;
left: 0;
background: url("webimages/downloadtl.png") top left; }
.downloadbox div.topright {
border: none;
position: absolute;
width: 31px;
height: 30px;
top: 0;
right: 0;
background: url("webimages/downloadtr.png") top right; }
.downloadbox div.bottomleft {
border: none;
position: absolute;
width: 31px;
height: 30px;
bottom: 0;
left: 0;
background: url("webimages/downloadbl.png") bottom left; }
.downloadbox div.bottomright {
border: none;
position: absolute;
width: 31px;
height: 30px;
bottom: 0;
right: 0;
background: url("webimages/downloadbr.png") bottom right; }
.downloadbox div.arrow {
border: none;
position: absolute;
width: 81px;
height: 81px;
top: 0px;
left: 16px;
background: url("webimages/downloadarrow.png") no-repeat bottom right; }
.content .frontpagelatestinfo .downloadbox h2 {
margin: 0;
display: block;
padding: 0.2em 20px 0.8em 100px;
min-height: 45px; }
.downloadbox h2 a {
text-decoration: none; }
.downloadbox h2 a:hover {
text-decoration: underline; }
.downloadbox .downloadcontent ul {
min-height: 64px;
background: url("webimages/downloadlogo.png") no-repeat bottom right;
margin: 0 0 0 1.5em;
padding: 0.2em 110px 10px 1.5em; }
.downloadbox p {
margin: 1em 120px 0 1em;
padding: 0 0 1em 0;
text-align: right; }
.searchbox {
position: absolute;
right: 0;
top: 0;
text-align: right;
padding: 15px 1em 0 0; }
.searchbox input {
margin: 2px; }
.searchbox input[type=text] {
border: 1px solid #4b77ff;
background: #eef2ff;
color: #000; }
.searchbox input[type=submit] {
border: 2px outset #94adff;
color: #000;
background: #94adff; }
.frontnews {
margin: 0; }
.frontnews dt {
font-weight: normal;
padding-right:6.5em;
position: relative;
margin-top: 1em; }
dl.frontnews > dt a:link, dl.frontnews > dt a:visited,
dl.frontnews > dt a:hover, dl.frontnews > dt a:active {
font-weight: bold; }
.frontnews dt span {
position: absolute;
top: 0;
right: 0;
color: #888;
font-style: normal;
text-align: right; }
p.award {
clear: both; }
p.award a.award {
float: right;
margin: 0 0 0.5em 1em; }
p.award a img {
border: 0; }
.more {
margin-top: 0;
text-align: right;
font-weight: bold; }
.breadcrumbs {
text-align: right;
margin: 0; }
.footer {
clear: both;
font-style: italic;
color:#666;
text-align: right; }
.footer p {
margin-top: 1.5em;
padding-top: 0.4em;
border-top: 2px solid #94adff; }
.downloadosselection {
margin: 1.2em auto;
width: 80%;
font-size: 130%;
border-spacing: 0.2em;
padding: 0; }
.downloadosselection li {
display: block;
border-top: 1px #bbcbff solid;
border-bottom: 1px #bbcbff solid;
margin: 0;
padding: 0; }
.downloadosselection li + li {
display: block;
border-top: none; }
.downloadosselection li a {
display: block;
padding: 10px 0 10px 50px;
min-height: 20px;
margin: 0; }
.downloadosselection li.riscos a {
background: url("webimages/dlriscos.png") no-repeat 0% 50%; }
.downloadosselection li.gtk a {
background: url("webimages/dllinux.png") no-repeat 0% 50%; }
.downloadosselection li.beos a {
background: url("webimages/dlhaiku.png") no-repeat 0% 50%; }
.downloadosselection li.amiga a {
background: url("webimages/dlamiga.png") no-repeat 0% 50%; }
.downloadosselection li.windows a {
background: url("webimages/dlwindows.png") no-repeat 0% 50%; }
.downloadosselection li.atari a {
background: url("webimages/dlatari.png") no-repeat 0% 50%; }
.downloadosselection li.macosx a {
background: url("webimages/dlapple.png") no-repeat 0% 50%; }
.downloadosselection li.source a {
background: url("webimages/dlsource.png") no-repeat 0% 50%; }
.downloadosselection li a:hover {
background-color: #e8edff; }
.downloadlatestouter {
width:93%;
margin: 0 auto;
position: relative;
padding-top: 6px;
clear: both; }
.downloadlatest {
display: table;
border-spacing: 1em; }
.downloadlatest > .downloadlatestbox {
display: table-cell;
padding:0 1em 1em 1em;
background: #bbcbff;
border: 4px solid #98b0ff; }
.downloadlatest > .downloadlast {
background: #bbcbff url("webimages/downloadlogo.png") no-repeat bottom right; }
.downloadlatest .downloadfirst {
padding-left: 80px; }
.downloadlatest .downloadmain {
font-size: 120%;
margin-top: 0.8em;
border-bottom: 2px solid #fff; }
.downloadlatest .downloadmain > a {
background: url(webimages/source.png) no-repeat top left; }
.downloadlatest .downloadfirst > a {
background: url(webimages/netsurf.png) no-repeat top left; }
.downloadlatest .downloadmain a {
font-weight: bold;
display: block;
padding-left: 45px;
padding-bottom: 1.8em;
min-height: 34px;
text-decoration: none;
position: relative; }
.downloadlatest .downloadmain a span {
text-decoration: underline; }
.downloadlatest .downloadmain a:hover span {
text-decoration: none; }
.downloadlatest .downloadmain a span + span {
color: #000;
text-decoration: none;
font-weight: normal; }
.downloadlatest .preul {
margin-bottom: 0; }
.downloadlatest ul {
margin-top: 0; }
.downloadlatest .downloaddate {
font-size: 70%;
position: absolute;
right: 0;
bottom: 0.5em; }
.downloadlatest .downloadinstructions {
text-align: right;
font-style: italic; }
.downloadlatest .downloadinstructions a:before {
content: "("; }
.downloadlatest .downloadinstructions a:after {
content: ")"; }
.downloadlatestouter div.arrow {
display: block;
border: none;
position: absolute;
width: 81px;
height: 81px;
top: 0px;
left: 26px;
background: url("webimages/downloadarrow.png") no-repeat bottom right; }
.developmentbuilds {
display: table;
width: 90%;
margin: 1em auto;
border-spacing: 1.2em; }
.developmentbuilds li {
display: table-row; }
.developmentbuilds li a, .developmentbuilds li span {
display: table-cell;
vertical-align: middle;
text-align: center; }
.developmentbuilds li a {
display: table-cell;
padding-top: 34px; }
.developmentbuilds li a[href="/downloads/development/netsurf.zip"] {
background: url("webimages/netsurf.png") no-repeat top center; }
.developmentbuilds li a[href^="/downloads/development/netsurf-r"] {
background: url("webimages/source.png") no-repeat top center; }
.developmentbuilds li a[href="releases/nstheme.zip"] {
background: url("webimages/nstheme.png") no-repeat top center; }
.bignote {
margin: -0.5em 0 1em 1em;
padding: 0.6em 0.8em;
width: 40%;
min-width: 15em;
float: right;
background-color: #ffeeb6; }
.bignote dl {
margin: 0;
padding: 0; }
.bignote dt {
margin: 0;
padding: 0; }
.bignote dd {
margin: 0;
padding: 0; }
.caution {
margin: 1.33em auto;
width: 60%;
min-height: 51px;
padding: 10px 10px 10px 110px;
background: #fff2a9 url("webimages/caution.png") no-repeat 5px center;
border: 3px solid #ffe85c;
font-weight: bold; }
/*
* Recent Source Control System Activity
*/
.changelog p {
margin-top: 0.2em;
margin-bottom: 0em; }
.entry + .entry .meta {
border-top: 1px solid #ddd;
padding-top: 0.6em;
margin-top: 0.6em; }
.msg {
padding-left: 5em; }
.date {
font-weight: normal; }
.author {
color: #005; }
.svnpath {
color: #777; }
/*
* Themes Page
*/
.themename {
margin-top: 1em;
padding-top: 5mm;
margin-bottom: 3mm;
border-top: thin solid #ddd; }
.themeimage {
padding-bottom: 0;
margin-bottom: 3mm;
overflow: auto; }
.themeimage a img {
border: 1px solid #fff; }
.themeimage a img:hover {
border: 1px solid #00f; }
.themeauthor {
padding: 0;
margin: 0;
background-color: #fff; }
/*
* Screenshot gallery
*/
ul.screenshotgallery {
margin: 1em 0;
padding: 0;
overflow: auto; }
ul.screenshotgallery li {
float: left;
font-size: 90%;
display: block;
border: 2px solid #c5d3ff;
margin: 7px; }
ul.screenshotgallery li > a {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff; }
ul.screenshotgallery li > a:hover {
display: block;
margin: 0;
padding: 0;
border: 1px solid #00f; }
ul.screenshotgallery li > a img {
border: none;
margin: 0;
padding: 0;
display: block; }
ul.screenshotgallery li span {
display: block;
margin: 0;
padding: 0.2em 0 0.2em 0;
text-align: center;
font-weight: bold;
background-color: #d8e2ff;
border-top: 2px solid #c5d3ff; }
/*
* About NetSurf
*/
dl.projectgoals {
counter-reset: goal; }
dl.projectgoals > dt:before {
content: counter(goal) ". ";
counter-increment: goal; }
table.timeline {
margin-bottom: 1em; }
table.timeline th {
white-space: nowrap;
text-align: left;
vertical-align: top;
padding-right: 1em; }
table.timeline td {
text-align: left;
vertical-align: top; }
/*
* News
*/
dl.news > dt {
font-size: 120%;
color: #000;
padding-left: 8em;
position: relative; }
dl.news > dt > span {
color: #888;
position: absolute;
left: 0; }
dl.news > dd {
margin-bottom: 1em; }
/*
* Documentation
*/
.docsections > li {
margin-bottom: 1em; }
.updated {
text-align: right; }
.headnote {
color: #777;
font-style: italic; }
/*
* User Guide
*/
.submenu {
border-bottom: thin solid #ddd; }
.menupath {
margin-bottom: 0;
font-weight: bold;
color: #555; }
.menuitem {
margin-top: 0; }
.menu {
border-spacing: 0px;
margin-left: auto;
margin-right: auto;
border: 1px solid black; }
.menu a {
text-decoration: none; }
.menutitle {
background-color: #ccc;
font-variant: small-caps;
text-align: center;
border-bottom: 1px solid black;
font-weight: normal; }
.menusplit {
border-top: 1px dashed black; }
.menuarrow {
text-align: right; }
.guidescreenshot {
float:right;
padding:0 0 1em 1em; }
.guidescreenshotfeature {
text-align: center; }
.guideiconinfo {
clear: left; }
.guideicon {
float: left;
padding: 0.2em; }
.action {
font-family: monospace;
color: #600; }
.window {
border: #000 solid 1px;
background-color: #ddd;
display: block;
width: 70%;
margin: 0 auto 1em auto;
padding: 1em 0 0.5em 0.5em; }
.window ul {
display: block;
padding: 0;
margin: 0; }
.window li {
display: block;
float: left;
width: 6em;
text-align: center;
background: #ddd;
padding: 0;
margin: 0 0.5em 1.1em 0;
padding: 0; }
.window li > span {
display: block;
margin: 0 auto 0.3em auto; }
.window p {
clear: both;
text-align: right;
font-style: italic;
margin: 0 1em 0 0; }
.window p.throbber {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 0 1em 0.5em 0.5em;
margin: 0; }
.window p.throbber + .throbber {
padding-left: 0; }
.window span a {
text-decoration: none; }
.option_group {
margin: 0 0 1em 0;
padding: 0 0 0 1em;
border-left: 1px #888 solid; }
.note {
width: 80%;
background-color: #d2ffd2;
padding: 0.8em;
border: 4px ridge #d2ffd2;
margin-left: auto;
margin-right: auto; }
.caption {
text-align: right;
font-style: italic; }
/*
* NSTheme
*/
.toolbarsprites {
font-size: 90%;
display: table-cell;
padding: 0 0 0 1em;
vertical-align: top; }
.toolbarsprites th, .toolbarsprites td {
padding: 1px 6px 1px 0; }
.toolbarsprites th[colspan] {
text-align: center; }
.toolbarsprites + .toolbarsprites {
border-left: thin solid #bbb; }
.toolbarsprites + p {
margin-top: 1em; }
/*
* Progress page
*/
.progress {
width: 100%;
border-spacing: 2px;
margin-left: auto; margin-right: auto; }
.progress td {
vertical-align: top; }
.progress .progresstitle {
width: 28%; }
.progress .progressstatus {
width: 7em; }
.notplanned {
background-color: #eee;
color: #333;
font-style: italic; }
.notstarted {
background-color: #ffd4d4; }
.juststarted {
background-color: #ffe8d2; }
.inprogress {
background-color: #ffffd0; }
.nearlydone {
background-color: #e6ffce; }
.complete {
background-color: #ccffcc; }
/*
* Two Column
*/
.content .leftcol {
float: left;
width: 49%; }
.content .rightcol {
float: right;
width: 50%;
background-color: #fff; }
.content .leftcol h3 {
font-size: 120%;
font-weight: bold; }
.content .rightcol h3 {
font-size: 120%;
font-weight: bold; }
.content .rightcol > div {
padding-left: 1em; }
.content .rightcol .changelog .msg {
padding-left: 2em; }
.content .example {
overflow: auto;
background: #feb;
color: #a42;
border: 1px solid #db1;
padding: 0.1em 0.3em; }
/*
* GSoC
*/
.details {
margin: 0 1em 0 2em;
background: #ddd;
border: 1px solid #000;
padding: 0 1em 1em 1em; }
/*
* Welcome page
*/
.welcomenslinks {
display: table;
width: 100%;
margin: 0;
border-spacing: 0;
padding: 0;
background: #ccd8ff; }
.welcomenslinks li {
display: table-cell;
text-align: center;
padding: 0.2em 0.3em 0.3em 0.3em;
vertical-align: middle; }
.welcomenslinks li + li {
border-left: 2px solid #b1c3ff; }
.welcomeversion {
border: none;
padding: 0;
margin: 1.2em auto 0 auto;
width: 90%;
color: #444; }
.welcomeintro {
width: 90%;
margin: 1em auto;
color: #666; }
.websearch {
margin: 1.5em auto;
padding: 1.2em 0.3em;
background: #d8e2ff;
border: 2px solid #c5d3ff;
width: 80%;
text-align: center; }
.websearch input[type=text] {
border: 1px solid #62697f;
background: #f9faff;
color: #000;
margin-right: 0.3em; }
.websearch input[type=submit] {
border: 2px outset #cedaff;
color: #000;
background: #cedaff; }
.welcomelinks {
display: table;
width: 80%;
margin: 0 auto 3em auto; }
.welcomelinks ul {
display: table-cell;
padding-left: 2.5em; }
.welcomelinks ul + ul {
padding-left: 1em; }
/*
* Thanks page
*/
img.thankslogo {
float: right;
margin: 0 0 1em 1em; }
/*
* GSoC page
*/
dl.gsocstudents li {
color: #222; }