layout.css

/*
 * FreeBSD.org - Layout Styles
 *
 * $FreeBSD$
 */

/* Container Definitions */

/* Page Container */

#container {
  margin: 0em auto;
  width: 90%;
  max-width: 1600px;
  text-align: left; /* Win IE5 */
}

/* Header */
header {
  display: flex;
  flex-direction: row;
  height: 75px;
}

#headerlogoright {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}

/* Search */

@media screen {
#search {
  text-align: right;
  padding: 0;
  color: #666;
}

#search form {
  margin: 0; /* need for IE Mac */
  text-align: right; /* need for IE Mac */
  white-space: nowrap; /* for Opera */
}

#search form label {
  color: #666;
}

#search form #submit {
  background: transparent;
  color: #fff;
  border-right: 1px solid #DADADA;
  border-bottom: 1px solid #DADADA;
  border-top: 1px solid #DADADA;
  border-left: 1px solid #DADADA;
  padding: 1px 5px 1px 5px;
}

#search form #words {
  width: 65%;
  border: 1px solid #DADADA;
  background: #FFFFFF;
  color: #666;
  padding: 2px 2px 2px 5px;
}
}

@media print {
#search { display: none; }
}

/* Mirror Select */

#mirror {
  text-align: right;
  padding: 0;
  margin: 0;
  margin-top: 6px;
  color: #666;
}

#mirror form {
  padding-top: 5px;
  right: 0;
  margin: 0; /* need for IE Mac */
  text-align: right; /* need for IE Mac */
  white-space: nowrap; /* for Opera */
}

#mirror form label {
  color: #666;
  font-size: 0.8em;
}

#mirror form select {
  font-size: 0.8em;
}

#mirror form #mirrorsel {
  font-size: 0.8em;
  width: 150px;
  border: 1px solid #DADADA;
  background: #FFFFFF;
  color: #666;
}

#mirror input {
  font-size: 0.8em;
  background: transparent;
  color: #666;
  border: 1px solid #DADADA;
}

/* Content */

#content {
  clear: both;
  display: block;
}

#frontcontainer {
  width: 100%;
}

#frontfeaturecontainer {
  clear: both;
}

#frontfeatureleft{
  width: 30%;
  margin: 0;
  padding: 0;
  float: left;
}

#frontfeatureleft h2 {
  border: none;
  margin-top: 0;
}

#frontfeatureleft p {
  margin: 0 0 1em 0;
}

	#frontfeaturecontent {
	  margin: 10px 10px 10px 13px;
	}

#frontfeaturemiddle {
  float: left;
  margin-top: 20px;
  background: url(../images/beastie.png) no-repeat center left;
  min-height: 196px;
  width: 30%;
}

#frontfeatureright {
  position: relative;
  border: 0px;
  padding: 0px;
  margin: 0px;
  width: 30%;
  float: right;
}

.center {
  text-align: center;
}

.right {
    display: block;
    float: right;
}

.screen {
  overflow: auto;
  font-family: monospace;
  padding: 1ex;
  background-color: #edc;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.screen pre, .programlisting pre {
  margin: 0;
}

.programlisting {
  overflow: auto;
  font-family: monospace;
  padding: 1ex;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.warning {
    color: #9F1313;
    background: #f8e8e8;
    border: 1px solid #e59595;
    width: 90%;
    border-radius: 4px;
    padding: 0 2ex;
    margin: .75em 3em .75em 1em;
    line-height: 1.3;
}

.note {
  color: #222;
  background: #eee;
  border: 1px solid #ccc;
  width: 90%;
  border-radius: 4px;
  padding: 0 2ex;
  margin: .75em 3em .75em 1em;
  line-height: 1.3;
}

.important {
  font-style: italic;
  border: 1px solid #a00;
  border-left-color: rgb(170, 0, 0);
  border-left-style: solid;
  border-left-width: 1px;
  border-left: 12px solid #c00;
  width: 90%;
  border-radius: 4px;
  padding: 2ex;
  margin: .75em 3em .75em 1em;
  line-height: 1.3;
}

/* News/Events/Media/Security Box */

#frontnemscontainer {
  width: 100%;
  background: #eee;
  display: inline;
  float: left;
  margin-top: 8px;
  margin-bottom: 8px;
}

#frontnews {
  width: 24%;
  margin: 0;
  padding: 0;
  float: left;
}

#frontnewscontent {
  margin: 17px 15px 24px 18px;
}

#frontevents {
  width: 24%;
  margin: 0;
  padding: 0;
  float: left;
}

#fronteventscontent {
  margin: 17px 15px 24px 14px;
}

#frontmedia {
  width: 24%;
  margin: 0;
  padding: 0;
  float: left;
}

#frontmediacontent {
  margin: 17px 15px 24px 14px;
}

#frontsecurity {
  width: 24%;
  margin: 0;
  padding: 0;
  float: left;
}

#frontsecuritycontent {
  margin: 17px 15px 24px 14px;
}

/* No way to get equal columns in pure CSS - setting height is a temporary hack */
.frontseparator {
  width: 0.5%;
  height: 500px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  float: left;
}

.newseventswrap {
  padding-left: 5px;
}

.newseventslist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}

.newseventslist img.rssimage {
  display: inline;
  border: 0;
  vertical-align: bottom;
}

.newseventslist li {
  padding: 0 0.3em 0 0.5em;
  display: inline;
  border-right: 1px solid #B6B6B6;
}

.newseventslist li a {
}

.newseventslist li.last-child {
  border-right: 0;
  padding-right: 0;
  display: inline-block;
  line-height: 0.9em;
}

.newseventslist li.first-child {
  margin: 0;
  padding-left: 12px;
  background-image: url(../images/blt_red_arrow.png);
  background-repeat: no-repeat;
  background-position: 0px 0.5em;
}

.newseventslist li.only-child {
  border-right: 0;
  padding-left: 0;
}

/* Shortcuts */

#frontshortcuts {
  margin: 0;
  padding: 0;
  color: #666;
}

#frontshortcutscontent {
  float: right;
  margin: 0;
  padding: 0;
  padding-left: 15px;
  padding-top: 20px;
}

#frontshortcutslist {
  margin: 0;
  padding: 0;
  margin-left: 5px;
  margin-top: 5px;
  list-style: none;
}

#frontshortcutslist li {
  margin: 0;
  padding-left: 12px;
  background-image: url(../images/blt_red_arrow.png);
  background-repeat: no-repeat;
  background-position: 0px 0.5em;
}

/* Latest Releases */

#frontreleases {
  padding: 0;
  margin: 8px;
  margin-left: 210px;
  margin-top: 5px;
  padding-bottom: 20px;
  color: #666;
  width: 85%;
}

#frontreleasescontent {
  margin: 0;
  padding: 0;
}

#frontreleaseslist {
  margin: 0;
  padding: 0;
  margin-left: 5px;
  margin-top: 5px;
  list-style: none;
}

#frontreleaseslist li {
  margin: 0;
  padding-left: 12px;
  background-image: url(../images/blt_red_arrow.png);
  background-repeat: no-repeat;
  background-position: 0px 0.5em;
}

/* New User Box */

 /* height and width details */
.frontnewtop div, .frontnewtop, .frontnewbot div, .frontnewbot {
  width: 100%;
  height: 12px;
}

.frontnewcontent {
  margin: 0;
  padding: 0;
  margin-top: -4px;
  margin-bottom: -4px;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
}

.frontnewcontent a, .frontnewcontent a:link, .frontnewcontent a:visited, .frontnewcontent a:hover, .frontnewcontent a:active {
  color: #990000;
  text-decoration: none;
}

.frontnewroundbox {
  float: left;
  margin: 0;
  margin-top: 30px;
  padding: 0;
  width: 130px;
  background-color: #D8D8D8;
  border-radius: 10px;
}

/* Donate Button */
.donate {
  background-color: white;
  border-radius: 10px;
  padding: 2% 8%;
  margin-bottom: 3%;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.donate a, .donate a:link, .donate a:visited, .donate a:hover, .donate a:active {
  color: #990000;
  text-decoration: none;
}

/* Get FreeBSD Box */

 /* height and width details */
.frontgettop div, .frontgettop, .frontgetbot div, .frontgetbot {
  width: 100%;
  height: 18px;
  font-size: 1px;
}

.frontgetcontent {
  margin: 0;
  padding: 0;
  margin-top: -8px;
  margin-bottom: -8px;
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
}

.frontgetcontent a, .frontgetcontent a:link, .frontgetcontent a:visited, .frontgetcontent a:hover, .frontgetcontent a:active {
  color: #990000;
  text-decoration: none;
}

.frontgetroundbox {
  margin-top: 10px;
  margin-left: 210px;
  padding: 0;
  width: 325px;
  background-color: #facc2e;
  border-radius: 15px;
}

.frontgetroundbox.newtofreebsd {
  margin-top: 50px;
  background-color: #eee;
}

/* Secondary Pages */

@media screen {
#sidewrap {
  float: left;
  width: 166px;
  margin-top: 15px;
  margin-right: -170px;
}

#rightwrap {
  float: right;
  width: 166px;
  margin-left: 15px;
}

#contentwrap {
  margin-left: 170px;
  padding-top: 15px;
}
}

@media print {
#sidewrap, #rightwrap { display: none; }
#contentwrap { margin-left: 16px; padding-top: 15px; }
}

/* Footer */

footer {
  font-size: 0.9em;
  text-align: center;
  color: #737373;
  line-height: 1.3em;
  padding-bottom: 15px;
  padding-top: 15px;
  clear: both;
}

/* Misc Classes */

.clearboth {
  clear: both;
  margin: 0;
  padding: 0;
}

.blockhide {
  display: none;
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;  /* IE5 Mac */
}

img {
  border: 0;
}

/* Table of contents */
#toctitle {
    font-weight: bold;
    line-height: 1.3;
    margin: 1em 0;
    margin-left: 0;
    color: #990000;
    font-size: 115%;
}