/*
 * Style sheet for newt.com.
 */

body {
  background-color: white;
}

h2 {
  clear: both;
}

h3 {
  clear: both;
}

.clear {
  clear: both;
}

/* Adds white space between bullets. */
li {
  margin-top: .5em;   
}

/* Boxed tables. */
table.boxed {
  border: solid;
  border-collapse: collapse;
}

th.boxed {
  border: solid;
  padding: .3em .8em;
}

td.boxed {
  border: solid;
  border-width: 1px;
  padding: .2em .5em;
}

td.boxed-right {
  border: solid;
  border-width: 1px;
  padding: .2em .5em;
  text-align: right;
}

/* Centered images. */
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Centered tables. */
table.centered {
  margin-left: auto;
  margin-right: auto;
}

/* General image settings. */
img {
  border-width: 0;
}

/*
 * Provide a drop shadow. The !important lines are for the rest of the
 * world; the other properties with the same name are for IE which
 * can't hack transparent images, nor the !important. With many thanks
 * to Sergio Villarreal.
 *
 *   http://www.alistapart.com/articles/cssdropshadows/
 *   http://www.alistapart.com/articles/cssdrop2/
 */
.shadow {
  float: left;
  background: url(/images/shadow.gif) no-repeat bottom right;
}

/*
 * Make the edges of the shadow fuzzy. The padding will move the image
 * above and to the left of the drop shadow.
 */
.shadow div {
  background: url(/images/shadow2.png) no-repeat left top !important;
  background: url(/images/shadow2.gif) no-repeat left top;
  padding: 0px 12px 8px 0px;
}

/* Place image. */
.shadow img {
  background-color: #ffffff;
}

/* Use to place photos in tables. */
div.photo {
  display: table;
  margin: 1em auto 1em auto;
}

/* Use to place photos in text (on the left). */
div.photo-left {
  float: left;
  clear: left;
  margin: 1em 1em 1em 0em;
}

/* Use to place photos in text (on the right). */
div.photo-right {
  float: right;
  clear: right;
  margin: 1em 0em 1em 1em;
}

/* Captions are more distinctive than the rest of the text in italics. */
.photo p, .photo-left p, .photo-right p, caption, .caption {
  clear: both;	 
  font-weight: bold;
  font-size: 90%;
  text-align: center;
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  padding-top: 5px;
}

.photo .copyright, .photo-left .copyright, .photo-right .copyright {
  font-weight: normal;
  font-style: italic;
  font-size: 75%;
}

/* Give photos plenty of whitespace and center them on page. */
.gallery {
  display: table;
  clear: both;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/*
 * The idea is to put each photo in an equally-sized box so that
 * wrapping looks nice. However, photo isn't centered...
 */
.gallery .photo-left {
  clear: none;
  /*width: 300px;*/
  /*height: 300px;*/
}

/*
 * For those photos in tables, align the tops in case the caption
 * height varies.
 */
.gallery td {
  vertical-align: top;
}

/* Force the following paragraph below the gallery. */
.gallery + p {
  clear: both;
}

/*
 * Framed content boxes. Use the div to surround the text and h2 to
 * create a title that blends in with the outline.
 */
div.frame {
  -moz-border-radius: 20px 20px 20px 20px;
  border-style: solid;
  border-color: #30896d;
  padding: 5px;
  margin-top: 20px;
}

h2.frame {
  -moz-border-radius: 20px 20px 0px 0px;
  color: #dddddd;
  background: #30896d;
  padding: 5px;
  margin: -6px -6px 0 -6px;
}

/* Webcams within framed content boxes (or anywhere, really). */
.webcam {
  padding: .3em .5em 0 .5em;
}

/*
 * Scroll iframe to a desired location.
 *
 * Wrap the iframe (class scrollable-iframe) in a div (class
 * scrollable-iframe-div). Add a height style to the div to control
 * how much space the frame takes on the page.
 * 
 * Then add a height style to the iframe and set it large enough to
 * embrace the external page. It should be large enough so that two
 * scrollbars are not generated, but not so large that you have a lot
 * of blank space at the end of the page.
 *
 * Finally, add an id to the div, and scroll to the desired location
 * with something like the following:
 *
 * <script>document.getElementById("carmel-bay-tides").scrollTop = 400</script>
 */
.scrollable-iframe-div {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 95%			/* margin helps when scrolling entire page */
}

.scrollable-iframe {
  width: 100%;
  padding: 0px 8px;
  margin: 0px 0px 0px -8px;
}

/*
 * Thin pinstripe at the top of each page so that the header doesn't
 * blend with the tabs and browser functions.
 */
div.headliner {
  width: 100%;
  border-top: 2px solid black;
  margin: -8px 0px 0px -8px;
  padding: 0px 8px;
}

/* Add a bit of white space around small logo on all but home page. */
div.small-logo {
  padding: 10px 0px;
}

/* Navigation bar. Stretch it out so it touches the sides. */
div.navbar {
  width: 100%;
  clear: both;
  border-style: solid;
  border-width: 1px 0px;
  background: #E4E4E4;
  margin: 0px 0px 0px -8px;
  padding: 0px 8px;
  color: #666666;
  font-size: .75em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/* Navigation bar link. Avoid the link underline. */
a.navbar {
  color: #666666;
  padding: 0em 4em;
  text-decoration: none;
}

/*
 * Search box for the navigation bar. Locate it on the right side.
 * Move it up a pixel to center it in the navigation bar.
 */
form.navbar-search {
  display: inline;
  position: absolute;
  right: 20px;
  margin-top: -1px;
}

/*
 * Box for entering text in the navigation bar search box. Make text a
 * little smaller and add a vertical line as a separator to the left of
 * the box. The margin and alignment help to center the box in the
 * navigation bar.
 */
input.navbar-search-text {
  font-size: 1em;
  padding: 0px 5px;
  border: none;
  border-left: 1px solid;
  vertical-align: top;
  margin-top: 1px;
}

/*
 * Image for submitting the search in the navigation bar search box.
 * The padding and alignment help to center the image in the
 * navigation bar.
 */
input.navbar-search-button {
  vertical-align: top;
  padding-top: 2px;
}

/*
 * Breadcrumbs at top of page to help with page context. Make text a
 * bit smaller and provide a bit of white space around it. Followed by
 * div.separator.
 */
div.breadcrumbs {
  font-size: .7em;
  padding: 8px 0px;
}

/*
 * Light line that separates breadcrumbs and content. Stretches across
 * entire display.
 */
div.separator {
  width: 100%;
  border-top: 1px solid #E4E4E4;
  margin: 0px 0px 0px -8px;
  padding: 0px 8px;
}

/*
 * Create a heading with a solid black line under it.
 */
.sectionHead {
  clear: both;
  width: 50%;
  border-bottom: 2px solid black;
  padding-bottom: 0;
}

/*
 * Create a light dotted line to separate event descriptions.
 */
div.eventSeparator {
  clear: both;
  width: 98%;
  height: 1px;
  border-top: 1px dotted #9DA2B0;
  margin-bottom: 1em;
  line-height: 0px;
}

/*
 * Overrides for photo thumbnail in event descriptions.
 */
div.eventPhoto {
  margin: 0em 1em 1em 0em;
}

/* Copyright block at bottom of page is in a smaller font. */
.copyright {
  font-size: .8em;
}

/* Used when quoting original material. */
blockquote.quote {
  font-size: 85%;
}

/* Make notes stand out. */
.note {
  color: red;
}

/* Place examples in a blue box. */
pre.example {
  background-color: #c0c0ff;
  font-size: .9em;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

/*
 * If you're selling something, use these classes to mark them sold by
 * striking through the element and appending a red SOLD! sign.
 * On Galeon, the text-decoration of none doesn't seem to keep the
 * SOLD! sign from being stricken.
 */
.sold {
  text-decoration: line-through;
}

.sold:after {
  text-decoration: none;
  content: " SOLD!";
  color: red;
}

/*
 * Heading/separator. To use, insert a <br> right before and an <hr>
 * right after the heading. For example:
 *
 *   <div style="margin: 2em 0em">
 *     <br>
 *     <div class="headingSeparator">
 *       Point Lobos (2006-09-01)
 *     </div>
 *     <hr>
 *   </div>
 *
 * Couldn't we inject the leading <br> and <hr> here, as well as the
 * margin-bottom shown in the example?
 */
.headingSeparator {
  float: left;
  font-weight: bold;
  font-size: 120%;
  padding: 0em 1em 0em 0em;
  margin-top: -.25em;
}

/*
 * Tabbed content boxes. Tabs have rounded corners.
 *
 * Courtesy Michael Visdos: http://www.michaelvizdos.com/style.css.
 */
.box-header {
  border: 1px solid Black;
  width: 250px;
  background-color: Black;
  color: White;
  font-weight: bold;
  /*font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;*/
  /*font-size: 14px;*/
  border-top: 1px !important; -moz-border-radius: 20px 20px 0px 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 20px;
}

.box {
  border: 1px solid Black !important; -moz-border-radius: 1px 20px 20px 20px;
  width: 98%;
  background-color: White;
  padding: 5px 5px 5px 5px;
  font-weight: normal;
  /*font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;*/
  /*font-size: 12px;*/
}