/*
TOC
0. reset
1. overall layout
2. laptop/flash
3. navs
4. nav0
5. nav1
6. nav1.1
7. nav2
8. navtc (training center nav
9. galleries
10. media
11. margins
12. flags
13. #includes
*/

/* BEGIN YAHOO CSS RESET v2.2*/
/* (c) 2007, Yahoo! Inc. All rights reserved.  BSD License: http://developer.yahoo.net/yui/license.txt */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    img{border:0;}
    address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
    /* uh, no.  ol,ul {list-style:none;} */
    caption,th {text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym {border:0;}
/* END YAHOO CSS RESET */

/* -------------------------------------------------------------------------- overall / common*/
.clear { clear:both; }

/* remove dotted outline on click */
a:focus { outline:none; }

a, a:visited {color:#6699cc;}
a:hover { color:#ff6600; }

img { border:0; }

h1 { font-size:22px; }
h1, h2, h3, h4, h5, h6 {
  color: #6699cc;
  font-weight: bold;
  font-family: Gill Sans, Helvetica, Arial, sans-serif;;
}

body {
  background: white;
  background-image:url(/img/stripey-background.gif);
  color: #333;
  font-size: 11px;
  font-family: Trebuchet MS, Verdana, Georgia;;
}

#bd { height:460px; }
#hd, #bd, #ft, #nav0shim { margin-left:3px; }
#nav0shim { position:relative; }

#doc {
  width:960px;
  margin:auto;
  margin-bottom:3em;
  background:white;
}


#ft .copyright { font-size:10px; color:gray; margin:1em 1em 6px 32px; }

#banner_logo { margin:12px 0 12px 25px;}

/*------------------------------------------------ page layout */
table#layout { background:#fff; border:0; width:100%; height:490px; }
#layout td { vertical-align:top; }
td#gfx{ width:460px; }
td#txt { width:490px; }


/* ---------------------------  laptop flash, absolutely positioned */
#laptop {
	margin-top:10px;
	width:450px;
	height:400px;
	background-image:url(/img/mac_black_website.jpg);
	background-repeat:no-repeat;
	position:relative;
	z-index:0;	/* need to set this so the flags dropdown will display above #laptop in ie6, 7 */
}

#monitor {
	margin-top:10px;
	width:450px;
	height:400px;
	background-image:url(/img/monitor.jpg);
	background-repeat:no-repeat;
	position:relative;
}

#monitor-flash {
	height:224px;
	width:335px;
	position:absolute;
	top: 35px;
	left:37px;
}

#laptop-flash {
  background-color:black;
  height:224px;
  width:335px;
  position:absolute;
  top: 24px;
  left:58px;
}

/*-------------------------------------------------------- navs */
#nav1, #nav2, #nav3 { font-family:Helvetica, Verdana, Arial, sans-serif;; }

/* ------------------------------------------------ Nav 0 ( flash carousel ) */
#nav0 { position:absolute; bottom:0px; left:0px; }
#nav0shim { width:960px; height:10px; /* trigger hasLayout */ }

/*-------------------------------------------------------------------- Nav 1 */

/*---------------------------------------------- Nav 1.1  (products dropdown) */

.plink h3 { color:black;}

#nav1-1{
  border:2px gray solid;
  background:white;


  display:none;
  position:absolute;
  z-index:9000;
  top:0px;
  left:0px;
  width:380px;

  /* dokuwiki areas need these styles, since our body selector isn't applied there */
  font-size: 11px;
  font-family: Trebuchet MS, Verdana, Georgia;;

}


#nav1-modal-overlay{
    position:absolute;
    left:0; top:0;
    width: 100%;
    margin:auto;
    height:690px;
    background:black;
    opacity:0.01; /* sane browsers */
    filter:alpha(opacity=1); /* MSIE 7; 6eolas doesn't work */
    display:none;
    z-index:1;
    }

    #nav1-container {
        z-index:9000;
        position:relative;
    }


#nav1-1 div.product-tile { background: url('/img/product_icon/tiles.gif') no-repeat; }
#nav1-1 a { display:block;  }


#nav1-1 a { padding-left:84px; width:300px; text-decoration:none;  }
#nav1-1 a h3 { padding-top:12px; }
#nav1-1 div.product-tile {
    width:100%;
    border-bottom:1px #dedede solid;
    margin: 4px 0;
    height:64px;
}



/*---------------------------------------------- margins on both level-2 navs*/
#nav2, #nav2about {
  height:24px;    /* need this b/c content is floated */
  margin-bottom:18px;
  margin-top:13px;
}

/*-------------------------------------------------------- nav2 */
/*-------------------------------------------------------- nav2:about */
/*-------------------------------------------------------- training center nav*/
/*
  markup:
 
 #nav2
          ul
              li
                a
*/
div#nav2 { }
#nav2 ul {list-style-type:none;}
#nav2 ul li { display:block; float:left; }
#nav2 ul li a {
  background-repeat:no-repeat;
  display:block;
  height:24px;
  width:79px;
}
#nav2 ul li a span { display:block; visibility:hidden; }
#nav2 a { background-image:url(/img/nav2/tiles.gif) !important; }

a#nav2-intro { background-position: -0px 0px; }
a#nav2-using { background-position: -81px 0px; }
a#nav2-specs { background-position: -162px 0px; }
a#nav2-clips { background-position: -243px 0px; }
a#nav2-galleries { background-position: -324px 0px; }
a#nav2-buy { background-position: -405px 0px; }

a#nav2-using.current       ,a#nav2-using:hover        { background-position: -81px -24px; }
a#nav2-intro.current       ,a#nav2-intro:hover        { background-position: -0px -24px; }
a#nav2-specs.current       ,a#nav2-specs:hover        { background-position: -162px -24px; }
a#nav2-clips.current       ,a#nav2-clips:hover        { background-position: -243px -24px; }
a#nav2-galleries.current   ,a#nav2-galleries:hover        { background-position: -324px -24px; }
a#nav2-buy.current         ,a#nav2-buy:hover        { background-position: -405px -24px; }

#nav2about ul {list-style-type:none;}
#nav2about ul li { display:block; float:left; }
#nav2about ul li a {
 background-repeat:no-repeat;
 display:block;
 height:24px;
}

#nav2about ul li a span { display:block; visibility:hidden; }
#nav2about a { background:url(/img/nav2about/tiles.gif); }

a#nav2about-contact { width:56px; background-position:-0px -0px; }
a#nav2about-about { width:46px; background-position:-98px -0px; }
a#nav2about-values { width:98px; background-position:-196px -0px; }

a#nav2about-contact.current ,a#nav2about-contact:hover        { background-position:-0px -24px; }
a#nav2about-about.current   ,a#nav2about-about:hover      { background-position:-98px -24px; }
a#nav2about-values.current  ,a#nav2about-values:hover       { background-position:-196px -24px; }

#navtc ul {list-style-type:none;}
#navtc ul li { display:block; float:left; }
#navtc ul li a span { display:block; visibility:hidden; }

#navtc a {
display:block;
width:80px;
height:24px;
background:url(/img/navtc/tiles.gif);
background-repeat:no-repeat;
line-height:8px;
}

a#navtc-forum { background-position:-0px -0px; }
a#navtc-faq { background-position:-80px -0px; }
a#navtc-webcasts { background-position:-160px -0px; }
a#navtc-workshops { background-position:-240px -0px; }
a#navtc-resources { background-position:-320px -0px; }
a#navtc-contest { background-position:-399px -0px; }
a#navtc-education { background-position:-480px -0px; }
a#navtc-howto { background-position:-560px -0px; }
a#navtc-gurus { background-position:-640px -0px; }
a#navtc-newsletter { background-position:-720px -0px; }

a#navtc-forum.current { background-position:-0px -24px; }
a#navtc-faq.current { background-position:-80px -24px; }
a#navtc-webcasts.current { background-position:-160px -24px; }
a#navtc-workshops.current { background-position:-240px -24px; }
a#navtc-resources.current { background-position:-320px -24px; }
a#navtc-contest.current { background-position:-399px -24px; }
a#navtc-education.current { background-position:-480px -24px; }
a#navtc-howto.current { background-position:-560px -24px; }
a#navtc-gurus.current { background-position:-640px -24px; }
a#navtc-newsletter.current { background-position:-720px -24px; }
/*
  markup:
 #nav1
          ul
              li
                  a
                    span
*/
#nav1 {
    background-repeat:no-repeat;
    background:url(/img/main_nav_blank.gif);
    height:21px;
    width:954px;
    text-transform:uppercase;
}

#nav1 ul {
    height:21px;
    list-style-type:none;
    margin-left:15px;
    padding:0;
}

#nav1 li  { display:block; float:left; }

#nav1 li a 
{ 
  color:white;
  display:block;
  font-family:verdana;
  font-size:14px;
  font-weight:bold;
  line-height:21px;
  margin:0 1em;
  text-decoration:none;
 }
#nav1 li a:hover, #nav1 a.current { color:#69c;}
#nav1 li a span{height:21px; }


/*-------------------------------------------------------- training center textile support */
.tc-intro-section {
    margin-left:91px
}

.tc-break {
    clear:both;
    height:1em;
   /* put an nbsp in the element instead of using border and margin */
}

/*-------------------------------------------------------- nav3 */
#nav3 { font-size:11px; width:360px;  display:block; font-size:10px; }
ul.nav { font-family:Helvetica, Verdana, Arial, sans-serif;; color:#333; }
.nav li { display:block; float:left; margin:0 0 0.4em 0.4em; padding:0.2em; }
.nav a:link, .nav a:visited { color:gray; }
.nav a.current { color:#6699cc; text-decoration:none; }

/*-------------------------------------------------- galleries */
/* tbd, maybe: add .tiled selector for switching between tiled(css sprite) and non-tiled images */
div#gallery {
  margin:32px auto 0px auto;
  width:429px;
  height:301px;
  background:url(/img/galleries_big_card.gif) no-repeat;
  background-position: top left;
  position:relative;
  background-color:#cfc;
  border:1px white solid; /* For some insane reason this causes #gallery-pad's margins to be honored in FF. */
}

#gallery-pad {
  margin:23px 0 0 40px;  /* This was simple padding, but IE added 23px of padding to all its child floats as well.  */
}

#gallery-pad h3 {
  margin:0px 0px 0px -33px;
  padding:0px;
  width:384px;
  text-align:center;
}

#gallery  a.gbox {
  display:block;
  float:left;
  width:81px;
  height:52px;
  margin:5px 4px;
  position:relative;
  overflow:hidden; /* IE7 needs it */
  background:url(/img/stripey-background.gif);
}

#gallery  img {
  border:0;
  margin:0;
  position:absolute;
  /* width:auto !important; height:auto !important; otherwise it's scaled to tn_width x tn_height */
}

#gallery h3 {
  position:absolute;
  bottom:12px;
  text-align:center;
  width:100%;
  font-family:Arial;
  font-size:16px;
  color:#666;
}

#gallery-quote {
  margin-top:1em;
  margin-left:64px;
  width:348px;
}



.greek {
 background:url(/img/stripey-background.gif);
 height:52px;
 margin:10px auto 10px auto;
 width:81px;
 }


a.gallery {
  position:relative;
  display:block;
  float:left;
  background-image:url(/img/galleries_thumb_card.gif);
  width:97px;
  height:74px;
  margin:7px 2px;
  text-decoration:none;
  color:#69c;
  }


a.gallery img {
  position:absolute;
  top:7px;
  left:8px;
}
a.gallery div {
  position:absolute;
  left:0px;
  bottom:3px;
  width:100%;
  text-align:center;
  font-size:9px;
  font-family:arial;
}

/* -------------------------------------- media.php */
.article { margin-bottom:2em; width:880px; }
.article caption { font-size:24px; text-align:left; }
.article img { margin:1em; }


/*----------------------------------- #txt margins */
#post-nav1-bump { margin-bottom:16px;}
.txtwrap { margin-left:32px;}
#txt p,#txt h3  {  margin-bottom:1em; }
#txt h3, .txtwrap h3 { margin-top:0px; font-size:14px; }
.tcwrap { margin-left:32px; width:555px; }

/*--------------------------------------- specs */
.txtwrap ul { list-style-position:outside;}
.txtwrap p { width:400px; }

/*-------------------------------------- UI */


#ajaxLoading {
    display:none;

    background:#eef url(/img/ajax-loader-eeeeff.gif) no-repeat 80% 50%;
    border:2px #69c solid;
    text-align:center;
    line-height:32px;

    margin:auto;
    padding:1em;
    width:30%;
    height:32px;

    position:absolute;
    top:5%;
    left:50%;
    z-index:10000;
}
/*--------------------------------------------------------- country flags*/

#nav1 { 
  position:relative;
  z-index:100; /* need to set this so #flags will overlay #laptop in ie6/7's broken positioning model */
}

#flags {
  background:transparent;
  text-align:right;
  height:76px; /* 4 flags, 19x35 each */
  width:71px;
  position:absolute;
  right:45px; /* Judo */
  top:1px;
  z-index:999;
}

#flags a {
	display:block;
	margin:0;
	padding:0;
}
#flags.retracted {
  height:19px;
  width:35px;
  overflow:hidden;
}

/*--------------------------------------------------------- #includes */
#ImageBoxOverlay
{
  background-color: #000;
}
#ImageBoxCaption
{
  background-color: #FFF;
}

#ImageBoxOuterContainer {
  z-index:1001; /* mwj: ie needs the box's wrapper element to have a higher z-index than the overlay's (1000) in order to appear above it */
}

#ImageBoxContainer
{
  width: 250px;
  height: 250px;
  background-color: #FFF;
}
#ImageBoxCaptionText
{
  font-weight: bold;
  padding-bottom: 5px;
  font-size: 13px;
  color: #000;
}
#ImageBoxCaptionImages
{
  margin: 0;
}
#ImageBoxNextImage
{
  background-image: url(/img/arrow-right.png);
  background-repeat:    no-repeat;
  background-position: left bottom;
  background-color: transparent;
}
#ImageBoxPrevImage
{
  background-color: transparent;
  background-image: url(/img/arrow-left.png);
  background-repeat:    no-repeat;
  background-position: right bottom;
}
.bulleted {
font-family:verdana, arial;
}

.bulleted li {
margin-bottom:0.5em;
}

.txtwrap p {
  margin-bottom:0.6em;
}
/* depends on 15pxround.gif, 30pxns.gif, and 30pxew.gif */

.roundcorner .nw, .roundcorner .ne, .roundcorner .sw, .roundcorner .se {
width:9px; height:9px; background:url(/img/roundcorner/15pxround.gif);
}

.roundcorner .n, .roundcorner .s { 
background:url(/img/roundcorner/30pxns.gif);
}

.roundcorner .e, .roundcorner .w {
background:url(/img/roundcorner/30pxew.gif);
}

.roundcorner .nw { background-position:top left;}
.roundcorner .n {background-position:top;}
.roundcorner .ne {background-position:top right;}
.roundcorner .sw {background-position:bottom left;}
.roundcorner .s {background-position:bottom;}
.roundcorner .se {background-position:bottom right;}
.roundcorner .e {background-position:right;}
.roundcorner .w {background-position:left;}