/* some styles are not netscape 4 compatible. NS4 ignores @import so
   formatting will be imported for all other browsers. */
@import "notns4.css";

/*
 * @(#) $Id: main.css,v 1.20 2005/09/29 13:31:22 threedsom Exp $
 * Main stylesheet for 3dsom.com webpages.
 * Run through cpp to remove the comments before publishing.
 */

/* Fonts used for logo ideally FF Meta or Eras, 
 * but probably not installed on user machine */
html body
{ 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 90%;
}

/* 
 * Major structure defined by divs layed out in a table:
 *    div#header, div#content, div#footer
 * Header includes divs for:
 *    div.menu with nested div.submenu - #current for selected entry
 * Content can include:
 *    div.section, div.subsection - document structure
 *    table.form, table.swreg - forms and tables for SWREG templates which
 *         can contain tr.sep that is visually separated from previous row
 *         and tr.error for SWREG error messages
 *    div.block - floating block outside main text usually with links
 *    table.figure - floating block with image and td.caption
 *    ul.linklist - special list containing just links
 *    p.summary - highlighted summary paragraph
 *    span.quote, span.som - highlighted text (for banner)
 * Footer includes divs for special items:
 *    .credits .totop
 */

/* color pallette:
 *   white (= #ffffff)
 *   cream = #ffffcc
 *   gold = #cc9900
 *   brown = #996600
 *   black (= #000000)
*/

/* Change default link styles to match colour scheme
a
{ 
  text-decoration: none;
} */
a:link
{ 
  color: #cc9900;
}
a:visited
{ 
  color: #996600;
}
a:hover
{ 
  color: #996600;
  background-color: #ffffcc;
}
span.unlink
{ 
  color: black;
  background-color: #ffffcc;
  text-decoration: none;
}
.special
{ 
  padding-left: 10px;
  padding-right: 10px;
}

.quote .text, .special
{ 
  color: #cc9900;
  font-style: italic;
  font-weight: bold;
  height: 20pt;
}
.quote .author
{ 
  color: black;
  font-style: italic;
  font-weight: bold;
}
tr.where td
{ 
  font-size: smaller;
  color: #996600;
  padding-top: 4pt;
}
/* Special "to top" link */
.totop
{ 
  font-size: 70%;
  padding: 0;
  margin: 0;
  width: 74px;
  background: white url("golduparrow.gif");
  background-repeat: no-repeat;
  background-position: bottom left;
}
.totop a
{
  padding-left: 12px;
  text-decoration: none;
}
/* Credits at bottom of page */
.credits
{ 
  color: #996600;
  font-size: smaller;
  text-align: center;
  padding: 3pt 3pt 3pt 3pt;
}
.credits a:visited,
.credits a:link
{ 
  text-decoration: none;
  color: #996600;
}
.credits a:hover
{ 
  text-decoration: none;
  color: black;
  background-color: white;
}
tr#footer div.menu
{ 
  margin-top: 20px;
}

/* Content styles - most content is indented from left to match the
   logo width and menu bar positions with headings, figures, blocks
   floating to the left and swreg forms filling the whole width. */

div#content
{ 
  background: white url("creamdots.gif");
  background-repeat: no-repeat;
  background-position: center left;
  padding: 4pt 4pt 4pt 4pt;
}

div#content.twocolpage
{ 
  background: white url("creamdots.gif");
  background-repeat: no-repeat;
  background-position: 0px 30px;
  padding: 4pt 4pt 4pt 4pt;
}

/* fix Internet Explorer bug with floating captioned figures. */
div#content
{
  height: 100%;
}

h1, h2, h3, h4
{ 
  color: #996600;
}
h2
{ 
  margin-left: 100px;
  margin-top: 20px;
}
h3
{ 
  margin-left: 174px;
  font-style: italic;
  border-bottom: 1px solid #cc9900;
}
h4
{ 
  margin-left: 174px;
  font-style: italic;
  text-align: center;
}
h4.title
{ 
  text-align: left;
}
div#content div.subsection
{ 
  clear: both;
}



div#content p
{ 
  text-align: justify;
}
div#content p,
div#content table.form,
div#content pre
{ 
  margin-left:  200px;
  margin-right: 20px;
}

div#content ol,
div#content ul
{ 
  margin-left: 230px;
  margin-right: 50px;
}
div#content dl
{ 
  margin-left: 200px;
}
div#content .block dl
{ 
  margin-left: 0px;
}

div#content ul ul,
div#content ul ol,
div#content ol ul,
div#content ol ol,
{ 
  margin-left: 40px;
}
div#content table.swreg
{ 
  margin-left:  00px;
  margin-right: 00px;
}
div#content table.form tr td,
div#content table.swreg tr td
{ 
  padding: 2px 6px 2px 6px;
  background-color:  #ffffcc;
  border-top: 0pt solid #996600;
}
div#content table.form tr td.question
{ 
  text-align: right;
}
div#content table.form tr th,
div#content table.swreg tr th
{ 
  background-color:  #cc9900;
  color: #ffffcc;
  border-left:   1px solid #ffffcc;
  border-right:  1px solid #ffffcc;
}
div#content table.swreg tr th a:link
{ 
  color: #ffffcc;
}
div#content table.swreg tr th a:hover
{ 
  color: #996600;
  background-color:  #cc9900;
}
div#content table.form tr.sep td,
div#content table.swreg tr.sep td
{ 
  padding: 4px 6px 2px 6px;
  background-color:  #ffffcc;
  border-top:    1pt solid #996600;
}
div#content table.form,
div#content table.swreg
{
  border-top: 1pt solid #996600;
  border-bottom: 1pt solid #996600; }

div#content table.swreg tr.error td
{ 
  color: red;
  font-weight: bold;
  text-align: center;
}
div#content table.swreg ul,
div#content table.swreg ol
{ 
  margin-left:  50px;
  margin-right: 50px;
}

div#content div.flashmovie
{ 
  background: black;
  width: 100%;
  padding-left: 60px;
  border-bottom: 1pt solid #996600; 
} 

/* Fixup problems with SWREG cheque page display
div#content table p,
div#content table ul
{ 
  margin-left: 20px;
}
*/
/* SWREG DEFAULT TEMPLATES STYLE */
table.tmplTable {
 background-color:#ffffcc;
 border: solid #996600 1px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-decoration: none;
}
th.tmplTable {
 background-color:#996600;
 font-size: 11px;
 color: #ffffcc;
 text-decoration: none;
 text-align:center;
}
tr.tmplTable {
 background-color:#ffffcc;
 font-size: 11px;
}
td.tmplTable {
 font-size: 11px;
}



div.block
{ 
  float: left;
  width: 160px;  
  clear: both;
}
div.block dl
{ 
  border: 1px solid #996600;
  background-color: #ffffcc;
  color: #cc9900;
  text-align: center;
}
div.block dt
{ 
  background-color: #996600;
  color: #ffffcc;
  text-align: center;
  margin-left: 0px;
  padding: 2px 4px 2px 4px;
}
div.block dd
{ 
  text-align: right;
  margin-left: 0px;
  font-style: italic;
  padding: 2px 12px 2px 4px;
  background: #ffffcc url("goldarrowcream.gif");
  background-repeat: no-repeat;
  background-position: center right;
}

td#new
{ 
  width: 32px;
  height: 16px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  background: #ffffcc url("new.gif");
  background-position: top left;
}

div.block a
{ 
  text-decoration: none;
}
div.block a:hover
{ 
  text-decoration: underline;
}

table.figure
{ 
  display: inline;
  float: left;
  margin-right: 20px;
  clear: both;
}

td.centre table.figure
{ 
  float: none;
  margin: 0px;
  margin-top: 50px;
}

table.cfigure
{ 
  display: inline;
  margin-right: 20px;
  margin-left: 0px;
}

div.icon
{ 
  display: inline;
  float: left;
  margin-right: 20px;
  width: 160px;
  text-align: right;
}

table.callout
{ 
  border: 1px solid #996600;
  background-color: #ffffcc;
}


div.inset
{ 
  clear: both;
}

#content div.inset p.clickhere
{ 
  float: left;
  margin-left: 0px;
  color: #cc9900;
  font-style: italic;  
  font-size: 80%;
}
#content div.inset p.author
{ 
  text-align: right;
  color: #cc9900;
  font-style: italic;  
  margin-right: 20px;
  font-size: 80%;
}

a:hover img
{ 
  border: 2px solid #996600;
}
/* CSS2 will display above over anchors too, so fix this for firefox */
a[name] img
{ 
  border: 0;
}

.caption
{ 
  font-size: smaller;
  font-style: italic;
  text-align: center;
  padding: 4px 4px 4px 4px;
}

.bigcaption
{ 
  font-size: larger;
  font-weight: 700;
  color: #909090;
  text-align: center;
  padding: 4px 4px 4px 4px;
}

div#content p.summary
{ 
  text-align: center;
  font-style: italic;
  padding-left: 50px;
  padding-right: 50px;
}
/* Because of bug with list-style-image in Opera, use a background-image */
ul.linklist
{ 
  list-style-type: none;
  list-style-position: outside;
}

ul.linklist li
{ 
  background-image: url(goldarrow.gif);
  background-position: 0px 5px;
  background-repeat: no-repeat;
  padding-left: 15px;
  clear: both;
}
ul.linklist li a img
{ 
  float: left;
  margin-bottom: 2px;
}
ul.linklist li a:hover img,
ul.linklist li a:link img,
ul.linklist li a:visited img
{ 
  vertical-align: center;
  border: 0px;
}
ul.linklist li a
{ 
  text-decoration: none;  
}

ul
{ 
  list-style-type: none;
  list-style-position: outside;
}

ul li
{ 
  background-image: url(goldarrow.gif);
  background-position: 0px 5px;
  background-repeat: no-repeat;
  padding-left: 15px;
  text-decoration: none;  
}
/*applet, object
{ 
  border: 1pt solid #cc9900;
  padding: 0 0 0 0;  
  margin: 0 0 0 0;
}*/

div.applet
{ 
  border: 1pt solid #cc9900;
  padding: 0 0 0 0;  
  margin: 0 0 0 ;
}
code
{ 
  /* font-size: 100%; */
  font-family: courier new, courier, fixed
}

/* overwrite styles for floating "button" class */
.button
{ 
  float: left;
  padding-bottom: 10px;
  margin: 0;
  clear: both;
}
.button img,
.button a:hover,
.button a:hover img, 
.button a:link img,
.button a:visited img
{ 
  border: 0;
  background-color: transparent; 
}

/* special stuff for frontpage layout */
table.frontpage
{ 
  width: 100%;
}
td.left
{ 
  //width: 190px;
  width: 220px;
  padding: 0;
  margin: 0;
}
td.centre
{ 
  width: 400px;
  padding-right: 10px;
  padding-left: 20px;
}
table.twocol
{ 
  width: 100%;
}
td.twocolleft
{ 
  width: 300px;
}
td.twocolright
{ 
  width: 1000px;
}
div#content td.twocolright p,
div#content td.twocolright h4
{ 
  margin: 0px 0px 10px 0px;
  padding: 0;
}

div#content td.twocolright ul
{ 
  margin-left: 20px;
  margin-right: 50px;
}

div#content td.centre p,
div#content td.centre h4
{ 
  margin: 0px 0px 10px 0px;
  padding: 0;
}
td.right
{ 
  padding-left: 10px;
}
td.left div.button
{
  padding: 0;
  margin: 0 0 10px 0;
}


/* boxes down the right column */
div.box
{ 
  width: 95%;
  background-color: #ffffcc;
  border: 1px solid #996600;
  padding: 0 0 5px 0;
  margin-bottom: 10px;
}
div#content div.box h5
{ 
  background-color: #996600;
  color: #ffffcc;
  text-align: left;
  margin: 0 0 10px 0;
  padding: 2px 4px 2px 4px;
}
div#content div.box p
{ 
  font-size: 80%;
  margin-left: 10px;
  margin-top: 2px;
  padding-top: 2px;
  color: black;
}
div#content div.box ul
{ 
  padding: 0;
  margin: 0 10px 5px 15px;
  font-size: 80%;
  color: black;
}
div#content div.box ul li
{ 
  padding: 0 0 5px 15px;
}
div.box a
{ 
  text-decoration: none;
  color: #cc9900;
}
div.box a:hover
{ 
  text-decoration: underline;
}

div.testimonial
{ 
  width: 220px;
  clear: both;
  padding: 10px 0px 0px 0px;
  margin: 0;
}

div#content div.section p.quoteauthor
{ 
  font-weight: 700;
  color: #909090;
  text-align: left;
  margin-bottom: 10px;
  font-weight: bold;
  font-style: italic;
  font-size: smaller;
  margin-left: 0px;
}

div#content span.author
{ 
  font-size: smaller;
  font-weight: normal;
}


/* Frontpage news image links in left column */
div.news
{ 
  width: 160px;
  clear: both;
  padding: 0;
  margin: 0;
}
div.news h5
{ 
  color: #996600;
  border-bottom: 1px solid #996600;
  text-align: left;
  margin: 0 0 10px 0;
  padding: 1px 0 1px 0;
}

table.demogroup div.demogroup
{ 
  position: relative;
  top: 0px;
  left: 0px;
  /*float: left;*/
  margin: 0px;
  padding: 0px;
  border: 0px;

}

div.featureset li
{ 
  
  margin: 6px 0 6px 0;

}

table.quickbuttonlinks
{ 
  margin-left:50px;
}

img#noborder
{ 
  margin: 0px;
  padding: 0px;
  border: 0px;
}
/* CSS2-compliant browsers implement a:hover also for named anchors; in order
to avoid a:hover to change properties of named anchors they must define as
important; in this solution a:hover should not use the !important rule */
a[name] {color: ... !important; background-color: transparent !important}


/* debug */
/*
table, ul, ol, dl { border: 1px solid red; }
td, li { border: 1px solid green; background-color: #ccccff; }
p, div { border: 1px solid blue; }
*/


/* default opacity for IE */
img {
	filter:alpha(opacity=100);
	}


/* duplicate image positioning */
img.idupe {
	position:absolute;
	z-index:30000;
	visibility:hidden;
	}
	
/* social bookmarking styles */ 

div.sharesb {
  clear:both;
  position:relative;
  border:1px solid #878787;
  padding:3px;
  margin:15px 50px 10px 200px;
  font-size: 90%;
}
.sharesb p {
  padding:0;
  margin:0;
	}
.sharesb p a{
  position:absolute;
  top:0px;
  right:0px;
  padding:3px 5px 0 0;
}
.sharesb h3{
  padding:0 3px 0 0;
  margin:0;
  margin:0 5px 0 3px;
  font-size: 90%;
  font-weight:normal;
  border-bottom: 0px;
}
.sharesb ul{
  text-align: center;
  list-style:none;
  margin:6px 0 4px 0;
  padding:0;
}
.sharesb ul li{
  text-align: center;
  display:inline;
  padding:0 4px 6px 0 ;
}
.sharesb ul li.delicious{
  background:url("http://www.3dsom.com/news/img/delicious.gif") no-repeat 0 0;
}
.sharesb ul li.digg {
  background:url("http://www.3dsom.com/news/img/digg.gif") no-repeat 0 0;
}
.sharesb ul li.reddit{
  padding:0 0 0 2px;
  background:url("http://www.3dsom.com/news/img/reddit.gif") no-repeat 0 0;
}
.sharesb ul li.facebook{
  background:url("http://www.3dsom.com/news/img/facebook.gif") no-repeat 0 0;
}
.sharesb ul li.stumbleupon{
  background:url("http://www.3dsom.com/news/img/stumbleupon.gif") no-repeat 0 0;
}
.sharesb ul li a{
  padding:0 0 0 18px;
  margin:0 3px 0 0px;
}

.sharesb a:hover
{ 
  color: #996600;
  background: none;
}