/* ie modifications */

.tabs-nav { /* auto clear */
    display: inline-block;
}
.tabs-nav .tabs-disabled {
    position: relative; /* fixes opacity */
    filter: alpha(opacity=40);
}
.tabs-nav .tabs-disabled a span {
    _height: 19px; /* for some reason the height is 1px to less with opacity... */
    min-height: 19px; /* ...in both IE 6 and 7 */
}

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 7px;
    background: url(tab.png) no-repeat;
}
.tabs-nav a {

position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0;
    color: #27537a;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */
}
.tabs-nav .tabs-selected a {
    color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
    background-position: 100% -150px;
    outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
    background-position: 100% -100px;
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
    background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.tabs-nav .tabs-disabled {
    opacity: .4;
}
.tabs-container {
    border-top: 1px solid #97a5b0;
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}


/* page layout */
    	#container {
			width: 795px;
		    margin: 3px;
			margin-left: auto;
			margin-right: auto;
			padding: 3px;
		}
		#header {
            padding: 5px;
			margin-bottom: 3px;
/*			background-color: rgb(235, 235, 235); */
            background-image: url(images/b-t2-skyblue.png);
			height: 50px;
			border: 1px solid gray;
			font: 100% Verdana, Tahoma, Arial, sans-serif;
            text-align: left;
        }
		#body {
			padding: 5px;
            margin-bottom: 0px;
			margin-left: 172px;
			margin-right: 160px;
			border: 1px solid gray;
			font: 80% Verdana, Tahoma, Arial, sans-serif;
            color: #444444;
		}
		#left {
			float: left;
			width: 165px;
			margin: 0;
            margin-right: 5px;
			padding: 3px;
/*			background-color: rgb(235, 235, 235); */
            background-image: url(images/b-l2-skyblue.png);
			border: 1px solid gray;
			font: 75% Verdana, Tahoma, Arial, sans-serif;
		}
		#right {
			float: right;
			width: 153px;
			margin: 0;
			margin-left: 5px;
			padding: 3px;
            background-color: #AADCF8;
			border: 1px solid gray;
			font: 75% Verdana, Tahoma, Arial, sans-serif;
            text-align: center;
		}
		#footer {
			clear: both;
			padding: 5px;
			margin-top: 5px;
			background-color: rgb(235, 235, 235);
			border: 1px solid gray;
			font: 70% Verdana, Tahoma, Arial, sans-serif;
		}
/*        #menucontainer {width: 120px;}      */
        #buttons a {color: #000033;
            background-color: #FFFFFF;
            padding: 2px;
            padding-left: 3px;
            display: block;
            font: 12px Arial, sans-serif;
            font-weight: bold;
            text-decoration: none;
            text-align: left;}
        #buttons a:hover {background-color: #FFFFFF;
            color: #0033CC;
            text-decoration: none;}
         body {
            text-align: center;
            font-family: Verdana;
            color: #444444;
            font-size: 80%;
            background-color: #FFFFFF;
              }
        #main {
		background:#fff;
        text-align: left;
	    }

        /* ---------- anchors ---------- */
		a {
		color:#000066;
		text-decoration:none;
		}
		a.g {
		color:#444444;
		text-decoration:none;
		}
		a:hover {
		color:#0000CC;
        text-decoration: underline;
		}
		a.g:hover {
		color:#444444;
        text-decoration: none;
		}
        a.span  {
        font-size: 95%;
        text-decoration: none;
        }
        a.selected  {
        font-size: 95%;
        text-decoration: none;
		color:#000066;
        font-weight: bold;
        vertical-align: bottom;
        background-color: #AADCF8;
        }
        a.menub {
        text-align: left;
        font-family: Verdana;
        color: #000000;
        font-size: 120%;
        vertical-align: bottom;
        font-weight: bold;
        line-height: 17px;
        }
        a.stbar.chicklet img {
        border:0;
        height:16px;
        width:16px;
        margin-right:3px;
        vertical-align:middle;
        }
        a.stbar.chicklet {
        height:16px;
        line-height:16px;
        }
        /* ---------- gallery container ---------- */
        div.gallery {

        position: absolute;
/*        position:relative; */
        width:70%;
        height:500px;
        margin:1em auto;
        }


        /* ---------- thumbnail images ---------- */
        div.thumb, .no-thumb {
        float:left;
        width:100px;
        height:100px;
        margin-top: 2px;
        margin-bottom: 2px;
        margin-left: 4px;
        margin-right: 4px;
        }

        div.thumb {
        border:1px solid #000;
        }

        div.no-thumb {
        border:1px solid #fff;
        }

        div.thumb a img {display:block;}
        div.thumb a span {display:none;}
        div.thumb a:hover, .thumb a:active, .thumb a:focus {background:transparent;}

        /* ---------- preview image ---------- */
        div.gallery a:hover span {
        display:block;
        position:absolute;
        width:300px;
        height:225px;
        top:50px;
        left:350px;
        }

        /* ---------- preview image title block ---------- */
        div.thumb em {
        position:relative;
        width:100px;
        top:-285px;
        left:2px;
        /* -moz-border-radius:12px; */
        background:#fff;
        color:#036;
        font:normal 11px/15px verdana;
        text-align:center;
        /* opacity:0.8; */
        /* filter:alpha(opacity=80); */
        /* -moz-opacity:0.80; */
        /* -khtml-opacity:0.8; */
        }

        div.thumb a {
        text-decoration:none;
        }

        /* ---------- no border on images ---------- */
        a img {border:0;}

        /* ---------- clear floats ---------- */
        .clear {
        height:0;
        line-height:0px;
        font-size:0;
        clear:both;
        }

        /* ---------- headers ---------- */


   h1 {
   vertical-align: top;
      text-align: right;
      font-style: italic;
      font-family: arial;
      color: #444444;
      font-size: 200%;
      }
   h2 {
      text-align: center;
      font-family: Verdana;
      color: #444444;
      font-size: 120%;
      }
   h3 {
      text-align: left;
      font-family: Verdana;
      color: #444444;
      font-size: 120%;
      }
   h3.bc {
      text-align: center;
      font-family: Verdana;
      color: #0000FF;
      font-size: 120%;
      }
 body {
      text-align: center;
      font-family: Verdana;
      color: #444444;
      font-size: 80%;
      background-color: #FFFFFF;
      }
 a.lrg  {
      font-size: 125%;
      color: #330066;
      }
 td.c {
      text-align: center;
      }
 li.bzll {
      text-indent: -12px;
      font-weight: bold;
      color: #0000FF;
      vertical-align: middle;
      list-style: none;
      }
 li.z {
      vertical-align: middle;
      list-style: none;
      height: 7px;
      }
 li.t {
      height: 17px;
      vertical-align: middle;
      }
 li.dt {
      height: 27px;
      vertical-align: middle;
      }
ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
      }
ol#toc li {
    background: #bdf url(tab.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
      }
ol#toc a {
    background: url(tab.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
      }
ol#toc li.current {
    background-color: #48f;
    background-position: 0 -60px;
      }
ol#toc li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
      }
ol#tod {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
      }
ol#tod li {
    background: url(tab1.gif);
    float: left;
    margin: 0 1px 0 0;
      }
ol#tod a {
    background: url(tab1.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 7px;
    padding-left: 7px;
    text-decoration: none;
      }
ol#tod li.current {
    background-position: 0 -60px;
      }
ol#tod li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
      }
ol#tocjq {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
      }
ol#tocjq li {
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
      }
ol#tocjq a {
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
      }
ol#tocjq li.current {
    background-color: #000;
    background-position: 0 -60px;
      }
ol#tocjq li.current a {
    background-position: 100% -60px;
    color: #000;
    font-weight: bold;
      }
ol#todjq {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
      }
ol#todjq li {
    float: left;
    margin: 0 1px 0 0;
      }
ol#todjq a {
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 7px;
    padding-left: 7px;
    text-decoration: none;
      }
ol#todjq li.current {
    background-position: 0 -60px;
      }
ol#todjq li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
      }
div.content {
    border: #48f solid 2px;
    clear: left;
    padding: 1em;
    font-family: Verdana;
    font-size: small;
      }
div.area {
    font-family: Verdana;
    font-size: 100%;
      }
 #main {
		background:#fff;
        text-align: left;
	   }

        a.menu {
        text-align: left;
        font-family: Verdana;
        color: #000000;
        font-size: 120%;
        vertical-align: bottom;
        }

 li.menu {
      text-align: left;
      text-indent: -35px;
      text-decoration: none;
      height: 18px;
      list-style: none;
      }

 p.menu {
      font-family: Verdana;
      font-weight: bold;
      font-size: 120%;
      display: inline;
      }
/* sharethis */
.st_twitter_custom{
        background: url("http://www.diyshutters.com/images/tweet.png") no-repeat scroll left top transparent;
        padding:6px 24px 0 0;
}
.st_facebook_custom{
        background: url("http://www.diyshutters.com/images/facebook.png") no-repeat scroll left top transparent;
        padding:6px 24px 0 0;
}
.st_gbuzz_custom{
        background: url("http://www.diyshutters.com/images/googlebuzz.png") no-repeat scroll left top transparent;
        padding:6px 24px 0 0;
}
.st_email_custom{
        background: url("http://www.diyshutters.com/images/mail.png") no-repeat scroll left top transparent;
        padding:6px 24px 0 0;
}
.st_sharethis_custom{
        background: url("http://www.diyshutters.com/images/sharethis.png") no-repeat scroll left top transparent;
        padding:6px 24px 0 0;
}