layout.css

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

/* Container Definitions */

/* Page Container */

#containerwrap {
  text-align: center; /* Win IE5 */
}

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

/* Header */

#headercontainer {
  padding-bottom: 2px;
}

#header {
  position: relative;
  height: 75px;
  margin: 0;
  padding: 0;
  clear: both;
}

#headerlogoleft {
  position: relative;
  border: 0px;
  padding: 0px;
  top: 0px;
  float: left;
}

#headerlogoleft img {
  border: 0px;
}

#headerlogoright {
  position: relative;
  border: 0px;
  padding-left: 0px;
  float: right;
}

#headerlogoright img {
  border: 0px;
}

/* 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;
}

/* 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 */
 /* height and width details */
.frontdonatetop div, .frontdonatetop, .frontdonatebot div, .frontdonatebot {
  width: 20%;
  height: 10px;
  font-size: 1px;
  text-align: center;
}

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

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

.frontdonateroundbox {
  margin-top: 0.5em;
  padding: 0;
  white-space: nowrap;
  background-color: white;
  border-radius: 10px;
}

/* 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-top: 5px;
  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;
}