/* Style sheet for baskenterprisesllc.com main website.  Created 7/18/2009 */
/* url: http://www.baskenterprisesllc.com/stylesheets/style.css */
/* Last modified 9/28/09 */
/* General and default styles */

html {
        height: 100%;
        }
        
body {
        margin:0;
        padding:0;
        border:0;                       /* This removes the border around the viewport in old versions of IE */
        width:100%;
        min-width: 1000px;
        height: 100%;
        font-size:88%;
        font-family: "Gill Sans", Helvetica, Arial, sans-serif;
        }
a:link, a:visited {
        color:blue;
        text-decoration:underline;
        }
a:hover {
        color:#fff;
        background:#369;
        text-decoration:none;
        }
p, h1, h2       {
margin:0;
padding:0 0 1em;
        }
        
img {
        border:none;
        }
        
.image a:link, .image a:hover {
        border:none;
        text-decoration:none;
        background:none;
        }
        
a:link.image, a:visited.image, a:hover.image, a:active.image {
        border:none;
        text-decoration:none;
        background:none;
        }

#pageframe {
        background-color: white;
        background-image: url("../images/skygrad3.bmp");
        background-position: top right;
        background-repeat: repeat-x;
        width: 100%;
        overflow: hidden;
        min-height: 100%;
        position: relative;
        padding-bottom: 200px;
        }
        
#header {
        position:relative;
        min-height: 100px;
        background-image: url("../images/bannerv5.jpg");
        background-position: top right;
        background-repeat: no-repeat;
        }
        
#headurl {
        font-size:1.2em;
        padding:7px 0 0;
        font-weight:bold;
        }
        
.lr {
        float:right;
        clear:left;
        }
.r {
        float:right;
        clear:left;
        }
.l {
        float: left;
        }
/* -------------------------------------------------- */
/* --------- Text Styles ---------------------------- */
/* -------------------------------------------------- */

h1, .headline {
        font-size:2em;
        font-weight:bold;
        padding:7px 0 0;
        margin-bottom: 2em;
        }
h2, .subhead {
        font-size: 1.2em;
        font-weight: bold;
        }       

/* -------------------------------------------------- */
/* ------header navigation button styles ------------ */
/* ----- metaltop-gold (by matthewjamestaylor.com --- */
/* ---- This style sheet is modified to make -------- */
/* ------------- sky blue buttons ------------------- */
/* -------------------------------------------------- */
        #headernav {
                clear:left;
                float:left;
                margin-top: 100px;
                padding:0;
                background:#B5D5FE url(../images/bluegradient2x30.gif) top repeat-x;
                border-bottom:1px solid #000;
                width:100%;
                border-top:1px solid #000;
                overflow:hidden;
                font-family:Verdana, sans-serif;
        }
        #headernav ul {
                float:left;
                margin:0;
                padding:0;
                list-style:none;
                position:relative;
                text-align:center;
        }
        #headernav ul li {
                display:block;
                float:left;
                list-style:none;
                margin:0;
                padding:0;
                position:relative;
        }
        #headernav ul li.first {
                border-left:1px solid #B6B6B6;
        }
        #headernav ul li.last {
                border-right:1px solid #FFF;
        }
        #headernav ul li a {
                display:block;
                float:left;
                margin:0;
                padding:20px 10px 6px 10px;
                border-left:1px solid #ECE9D8;
                border-right:1px solid #7E7567;
                text-decoration:none;
                color:#000;
                font-size:.8em;
                font-weight:bold;
                text-transform:uppercase;
                line-height:1.3em;
        }
        #headernav ul li a:hover {
                color:#000;
                background-color:#ECE9D8;
                border-left:1px solid #fff;
                padding-top:18px;
                padding-bottom:8px;
        }
        #headernav ul li.active a,
        #headernav ul li.active a:hover {
                color:#fff;
                background:#000;
                border-left:1px solid #000;
                padding-top:18px;
                padding-bottom:8px;
        }
/* ------------------------------- */
/* End of header nav buttons style */
/* ------------------------------- */

/* -------------------------------- */
/* ------- Content ---------------- */
/* -------------------------------- */

#content {
        padding: 20px 0 300px 20px;
        }
        

/* -------------------------- */
/* Styles for content and navigation columns */
/* -------------------------- */

#colcontainer {
        width:90%;
        max-width: 1000px;
        margin-left:auto;
        margin-right:auto;
        margin-top: 75px;
        background-color:transparent;
        /* padding-bottom: 100px; */
        }
        
#contentcolumn {
        width:70%;
        float:right;
        font-size:1.2em;
        background-color:white;
        padding:2%;
        border:solid thin #066;
        min-height:500px;
        /* padding-bottom: 240px; */
        }
        
#contentcolumn img {
        padding:0 2% 1% 2%;
        }
        
a:link.dest, a:hover.dest, a:visited.dest {
        color: black;
        text-decoration: none;
        background: white;
        }

.blurbbox {
        /* background-image:url(../images/castle2.jpg); */
        background-repeat:no-repeat;
        background-position:top right;
        background-color:white;
        width:30em;
        background-color:white;
        padding:3%;
        border:solid thin #066;
        float:left;
        margin:0 0 10px 0;
        }
        
.blurbbox a, .headbox a:visited {
        background:none;
        text-decoration:none;
        color:black;
        }
        
.blurbbox a:hover {
        color:white;
        background:#369;
        text-decoration:none;
        }

#contentcolumn.catpage {
        background-color:transparent;
        border:none;
        padding:0;
                }
        
#navcolumn {
        width:200px;
        background-color:white;
        min-height:500px;
        padding:8px;
        border:solid thin #066;
        margin-top:10px;
        }
        
#navcolumn .note {
        margin-top: 10px;
        }
        
/* I was having trouble with getting the appearance right for */
/*  <li> elements in IE and Safari.  I found this excellent idea */
/*  at http://www.w3schools.com/Css/css_list.asp */
/* scroll down to _Using an image as a list item marker_ */

li.done {
        list-style-image: url("../images/buttons/greencheck.gif");
        }

.current {
        font-weight:bold;
        font-size:112%;
        }

li.current {
        list-style-image: url("../images/buttons/redarrowplain.gif");
        font-weight:bold;
        font-size:112%;
        }
        
li.hyperlink {
        color:blue;
        text-decoration:underline;
        }

.hyperlink a:hover {
        color:#fff;
        background:#369;
        text-decoration:none;
        }

li.nonjstext a {
        color: black;
        text-decoration: none;
        background: white;
        }
        
/* the catline category is being commented */
/* out as a test on 9/25/09.  The html affected */
/* should occur only in the navcolumn where */
/* the category lines were originally envisioned */
/* .catline {
        float:left;
        width:100%;
        padding-top:12px;
        } */
        
.soon   {
        background-image:url(../images/comingsoon4.gif);
        background-position:bottom right;
        background-repeat:no-repeat;
        }
        
.catline.indent {
        padding-top:7px;
        padding-left:7px;
        }

ul.priceline li /* see monitoring.html, for example */ {
        padding: 17px 0;
        }
ul.priceline img {
        margin-top: 10px;
        }
        
        
/* Styles for the category pages */
.catbox {
        border:solid thin #369;
        width:14em;
        height:300px;
        padding:1em;
        float:left;
        margin:0 10px 10px 0;
        background-color:white;
        }


/* ------Styles for on-page boxes for emphasizing and setting out ------- */
/* ------important or interesting information --------------------------- */

/* General styles for sales page boxes */

.bigred, .bigred a:link,  .bigred a:visited, .bigred a:hover, .bigred a:active {
        border: none;
        text-decoration: none;
        background: none;
        padding:3px 0px 10px 5px;
        color:red;
        font-size:1.5em;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
}

#price #notes p.subhead, #features p.subhead {
        padding:3px 0px 10px 5px;
        }

/* Styles for notes box */
#notes {
        border:solid thin #369;
        background:url(../images/bluegrad1.bmp) top left repeat-x;
        width:20em;
        height:250px;
        margin:3px;
        float:right;
        }
        
/* Styles for Features box */
#features {
        border:solid thin #369;
        background:url(../images/greengrad1.bmp) top left repeat-x;
        width:20em;
        height:250px;
        margin:3px;
        float:right;
        }
        
/* Styles for Price box */
#price {
        border: solid thin #369;
        background:url(../images/bluegrad1.bmp) top left repeat-x;
        width:20em;
        height:150px;
        margin:2px;
        padding:40px 3px 3px;
        }

#price.floatright {
        float: right;
        }
        
#price img.floatright {
        float: right;
        }

.note {
        font-size: smaller;
        }
.paybutton {
        margin-top:10px;
        }
        

/* ----------------------------------------------- */
/* ---------- Styles for Footer ------------------ */
/* ----------------------------------------------- */
#footer {
        position:absolute;
        bottom: 0;
        width:100%;
        min-height:60px;   /* Height of the footer */
        font-size: 80%;
        }

.center {
        text-align:center;
        }

/* Commented out on 11/20/09
        #sslseal {
        position:absolute;
        bottom: 0;
        right: 0;
        } */

/* ------------------------------------------------ */
/* ----- End of Styles for Footer ----------------- */
/* ------------------------------------------------ */




/* -------------------------------------------------------------------- */
/* -- Styles for the form on the Contact page ------------------------- */
/* -- discussion of the problem of legends and fieldsets -------------- */
/* -- in IE 6 & 7 (and 8 as it turns out) can be found at ------------- */
/* -- http://www.asimplecell.com/articles/styling-the-legend-element -- */
/* -------------------------------------------------------------------- */

.formation {
        margin-top: 3em;
        }
        
.contact form {
        margin-bottom: 12px;
        }
.contact fieldset {
        margin: 0;
        padding: 0;
        border:none;
        width:400px;
        background-image:url(../images/grayblue2.bmp);
        background-repeat:repeat-x;
        background-color:#a8bacc;
        }
.contact legend {
        display:block;
        color: #000; /* IE6,7,&8 need the color specified ... otherwise it's link blue */
        margin-left: 10px;
        }
.contact legend span {
        display: block; /* needs to be here to work in Safari, FF, Camino */
    width: 100px; /* set width for Safari, FF, Camino */
    padding: 3px 10px;
    border: 1px solid #b4b4b4;
    background-color: #e6e6e6;
        }
.contact label {
        width: 8em;
        float: left;
        text-align: right;
        margin-right: 0.5em;
        display: block;
        }
.contact form p, .contact form textarea, .contact form input {
        margin-left:10px;
        }
.visible {
}
.invisible {
        display: none;
        }
.required {
        }
.redrequired {
        color: red;
        }
.redrequired input {
        background-color: #F99;
        color: black;
        }
        
input.redrequired {
        background-color: #F99;
        color: black;
        }
/* ---------------------------------------------------- */
/* -- End of styles for the form on the Contact page -- */
/* ---------------------------------------------------- */




/*----------------------------------------------------- */
/* ----- Styles for the forms in the PERS Order ------- */
/* ----- submission pages ----------------------------- */
/* ---------------------------------------------------- */

.persform fieldset {
        margin: 0;
        padding: 0;
        border:none;
        }
        
.formarea {
        margin-bottom: 15px;
        padding: 2%;
        width:550px;
        background-image:url(../images/grayblue2.bmp);
        background-repeat:repeat-x;
        background-color:#a8bacc;
        }
/* ----------------------------------------------------- */
/* -------- End of styles for the PERS Order forms ----- */
/* ----------------------------------------------------- */




/*------------------------------------------------------ */
/* ---------------- Style for 404 and White pages ------ */
/* ----------------------------------------------------- */

.white {
        margin: 10% 10% 0;
        }
        
h1.fourohfour {
        padding-left: 10%;
        padding-bottom: 1em;
        margin-bottom: 0
        }

.blurbbox404 {
        background-color:white;
        width:30em;
        background-color:white;
        padding:3%;
        border:solid thin #066;
        float:left;
        margin:5em 0 0;
        }

/* -------- End styles for 404 and White pages ---------- */




/* ------------------------------------------------------ */
/* ------------------ Styles for Slideshow -------------- */
/*------------------------------------------------------- */

.slides {
        /* border:solid thin #369; */
        margin-bottom: 15px;
        float: left;
        padding: 0;
        }

.slides a:link, .slides a:visited, .slides a:hover, .slides a:active {
        border: none;
        text-decoration: none;
        background: none;
        }

/* ------------------------------------------------------ */
/* ---------- End of styles for Slideshow --------------- */
/* ------------------------------------------------------ */



/* ------------------------------------------------------ */
/* ----------- Styles for Shopping Cart ----------------- */
/* ------------------------------------------------------ */


#contentcolumn.sc { /* styles for the content column on the shopping cart page */
        padding: 8px;
        }
/* ---------- Styles for tables in Shopping Cart -------- */

.sct {
        background-color:#f1f2f3;
        font-family: "Courier New", Courier, monospace;
        font-size: .8em;
        text-align: right;
        /* float: left; */
        width: 450px;
        padding-top: 10px;
        padding-right: 15%;
        padding-bottom: 10px;
        }
.sct input {
        margin-top: .3em;
        }
.sct .alignleft {
        text-align: left;
        margin-left: 10px;
        }
        
        .sct2 {
        background-color:#f1f2f3;
        font-family: "Courier New", Courier, monospace;
        font-size: .8em;
        padding-top: 10px;
        padding-right: 15%;
        padding-bottom: 10px;
        }
        
        .alignright {
        text-align: right;
        margin-left: 10px;
        }
        
form {
        padding: 10px;
        }


thead {
        font-size: .9em;
        color: gray;
        font-weight: normal;
        text-align: left;
        }
tr.bb td {
/* for problem with bottom borders on tr elements, see http://www.webmasterworld.com/forum83/1947.htm */
/* bb stands for "border-bottom" */
border-bottom: 1px solid gray;
        }