/* home page stylesheet for artglassuk.co.uk... */

/* reset stuff... */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td
  {margin:0; padding:0; border:0; outline:0; vertical-align: baseline;
        font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit;}
  /* remember to define focus styles! */
  :focus {outline:0;}
  body {line-height:1px; color:black; background:white;}
  ol, ul {list-style:none; margin:0; padding:0;}
  /* tables still need 'cellspacing="0"' in the markup */
  table {border-collapse:separate; border-spacing:0;}
  caption, th, td {text-align:left; font-weight:normal;}
  blockquote:before, blockquote:after, q:before, q:after {content:"";}
  blockquote, q {quotes:"" "";}

/* basic page structure... */
  body    {text-align:center; color:#f0f0fc; background-color:#000000; font:small arial, tahoma, sans-serif;}
  * html body {font-size:x-small; f\ont-size:small;}  /* fix IE5 font size bug! */
  /* div#site centers in the body while div#page floats within #site
     to contain the floating page elements... */
  div#site   {width:900px; margin:10px auto; text-align:left; font-size:90%;}
  div#page   {float:left; clear:left; display:inline; padding:0 0 20px 0; background:#000000 url(imgs/homebkgnd.jpg) left top no-repeat;}

  /* banner bits... */
  #logo   {float:left; clear:left; display:inline;}
  #nav    {float:left; display:inline; width:300px;}
    #nav img {float:left; display:inline;}
    #nav #navHome, #nav #products {clear:left;}
  #subnav {float:right; display:inline; font-size:1.2em; font-weight:bold; color:#ffffff;}
    #subnav ul {float:right; display:inline; margin:3px 9px 3px 0;}
    #subnav li {float:left; display:inline; margin:0; padding:0 2px 0 17px; background:url(imgs/greydot3x3.gif) left 50% no-repeat;}
    #subnav li:first-child {clear:left;background-image:none;}
    #subnav a {color:#dddddd; text-decoration:none; padding:0 2px;}
    #subnav a:hover {color:#ffffff; background-color:#333333;}
    #subnav p {display:inline; margin:0; padding:0 2px;}

  /* page bits... */
  div.fullwid  {float:left;  clear:left;  display:inline; width:880px; margin:0 10px 0 10px;}
  div.leftcol  {float:left;  clear:left;  display:inline; width:430px; margin-left:10px;}
  div.rightcol {float:right; display:inline; width:430px; margin-top:25px;}
  h1 {font-size:1.5em; font-weight:bold; margin:18px 0 6px 0;}
  h2 {font-size:1.2em; font-weight:bold; margin:12px 0 0 0;}
  h3 {font-size:1.1em; font-weight:bold; margin:9px 0 0 0;}
    h1 a, h2 a, h3 a {text-decoration:none;}
  p  {margin:9px 0 0 0;}
  a  {color:#f0f0fc;}
  a:hover {background-color:#fff0f0; color:#000000; text-decoration:none;}
  em {font:bold 1.2em 'comic sans ms', cursive; color:#ffffff;}
  p.dream {font:bold 1.4em 'comic sans ms', cursive; color:#ffffff; padding:5px 5px 5px 10px; margin:5px 25px 0 0;
              background:url(imgs/bkgndsparkle2.gif) left top repeat-x;}
  p#byeline {float:right; clear:right; display:inline; margin:3px 3px 0 0; font:10px arial, tahoma, sans-serif; color:#cccccc;}
  p#byeline a {text-decoration:none; color:#999999;}
  p#byeline a:hover {background-color:transparent; color:#cccccc;}
  ul {margin:10px;}
  li {list-style:inside disc;}
  .rightcol img {margin-bottom:10px; border:solid 1px #999999;}
  .leftcol img {margin-top:10px;}

/* home page stuff... */
  #pageHome {font-size:125%;}
  #pageHome div.leftcol  {width:380px; margin:30px 0 0 0;}
  #pageHome div.rightcol {width:500px; margin:30px 0 0 0;}
  #pageHome ul {float:left; clear:left; display:inline; font-size:1.2em; line-height:32px; margin:10px 10px 10px 10px;}
    #pageHome li {list-style:none; margin:0 0 20px 0; padding-left:40px;}
      #pageHome #bltRed    {background:url(imgs/diamond_red.gif) left 2px no-repeat;}
      #pageHome #bltOrange {background:url(imgs/diamond_org.gif) left 2px no-repeat;}
      #pageHome #bltYellow {background:url(imgs/diamond_yel.gif) left 2px no-repeat;}
      #pageHome #bltGreen  {background:url(imgs/diamond_grn.gif) left 2px no-repeat;}
      #pageHome #bltBlue   {background:url(imgs/diamond_blu.gif) left 2px no-repeat;}
  #pageHome #phone {font-size:1.6em; text-align:center;}
  #pageHome #byeline {width:400px; text-align:right;}
  
/* Products page... */
  
/* gallery page... */
  #pageGallery {}
    #pageGallery div.rightcol {width:275px;}
      #pageGallery div.rightcol a {background-color:transparent;}
      #pageGallery div.rightcol a img.thumb {cursor:pointer; width:62px; height:62px; border:#CCCCCC 1px solid; margin:2px; text-align:center; vertical-align:middle;}
      #pageGallery div.rightcol a img.thumb:hover {border:#F0F0F0 2px solid; margin:1px;}
      #pageGallery div.rightcol p#instructions {font-size:0.9em; margin-bottom:5px; text-align:center;}
    #pageGallery div.leftcol {width:620px; margin:0 0 0 5px; }
  #imgctrls {float:left; clear:left; width:600px; margin:0; padding:0; text-align:center; vertical-align:bottom;}
    #imgctrls ul {float:left; display:inline; clear:left; margin:0; padding:2px 0 0 0; list-style:none;}
    #imgctrls li {float:left; display:inline; margin:0; padding:0 2px 0 2px;}
    #imgctrls a {text-decoration:none;}
    #imgctrls a:hover {background-color:transparent;}
    #imgctrls img {margin:0; padding:0; cursor:pointer; vertical-align:bottom;}
    #imgctrls p#caption {margin:0 0 3px 0; padding:0;}
  #slide  {float:left; clear:left; display:inline; width:600px; margin:3px 0 0 0; text-align:center;}
  #slide img {border:1px solid #CCCCCC; margin:0; padding:0;}
  
/* about us page... */
  #pageAbout table {margin:3px 0 0 12px;}
    #pageAbout div.leftcol p {margin:10px 30px 0 0;}
    #pageAbout div.rightcol {margin-top:10px;}
    #pageAbout h2 {margin-top:35px;}
    #pageAbout td  {padding:3px; text-align:left; vertical-align:top;}
    #pageAbout td:first-child  {padding-right:12px;}
    #pageAbout td#faxno  {padding-left:3.0em;}
    #pageAbout table#message td {padding:1px 3px;}
    #pageAbout td.cap_req {font-weight:bold;}

/* send message (acknowledgement) page... */
  #pageSendMessage #page {height:500px;}
  #pageSendMessage h1 {margin:40px 0 40px 0;}