/* Reset the browser defaults for these properties -------------------------- */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, ul,
ol, li, dl, dt, dd, a, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}
/* General settings --------------------------------------------------------- */
html {height: 100%; font-size: 100%; }
header, nav, #content, footer { display: block; }
body { /* working page plus the background */
    height: 100%;
  font-family: "Cronos Pro", Verdana, Arial, sans-serif; font-size: 100%;
  background-color: #d1ecf5;
  background-image: url(images/icons/blue_tiled.png); /* Add blue stitch tiles to display area  */
  background-repeat: repeat; /* Repeat image over the page */
}
#content {height:100%;}
table {border-collapse: collapse; margin: auto;}
thead {background-color: #007088; color: white; padding: 2px 6px;}
td { padding: 5px 15px 5px 15px;}
.banner_blurb {margin: auto; width: 700px; margin-bottom: 15px;}
.banner_blurb p {text-align: left; font-size: 1.2em; font-weight: normal; color:#64586b; }
.banner_blurb h3 {text-align: center; font-size: 1.3em; font-weight: normal; color:#64586b; }
.banner_medium { font-size: 1.1em; font-weight: bold;  text-align: center; }
.banner_medium_plain { font-size: 1.2em; text-align: center;  }
.banner_large  { font-size: 1.3em; font-weight: normal;  text-align: center; margin-bottom: 30px;}
.banner_warning { font-size: 1.1em; text-align: center; font-weight: bold; color: red; margin-bottom: 15px;}
.banner_inform { font-size: 1.1em; text-align: center; font-weight: bold; color: green; margin-bottom: 15px;}
.banner_inform_normal {font-size: 1em; color: green; margin-bottom: 15px;}
.banner_inform_left { font-size: 1.1em; text-align: left; font-weight: bold; color: green; margin: 15px 0;}
.banner_pink {color:#d1037d; font-size: 1.3em; text-align: center; font-weight: bold; margin-bottom: 15px; }
.banner_tutorial {color:#d1037d; font-size: .9em; text-align: center;}
.center {margin: auto;}
.larger {font-size: 1.5em;}
.medium {font-size: 1.3em;}
.mediumstrong {font-size: 1.15em; font-weight: bold; }
.smallprint {font-size: .7em; }
.saleprice {color: red;}
.note {font-size: .9em; color: #655d8c; float: right;}
.right {text-align: right; padding-right: 5px; font-size: 1.2em;}
.left {text-align: left; font-size: 1.2em;}
.middle { text-align: center; }
.navbutton {overflow:visible; font-size:1.1em; margin:2px; padding: 1px; font-weight: bold; background-color:#ffffff; color:#3b3361; }
.lnbutton { overflow:visible; font-size: 1em; margin:0 5px; padding: 2px 3px; font-weight: bold; background-color:#ffffff; color:#d1037d; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { text-align: center; font-weight: normal; color: #665564; margin-bottom: 15px; }
h1 {font-size: 2em; color: #7a6678; margin-top: 15px;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
#page_container { /* contains the working page */
    position:relative;
    max-width: 1250px;
   min-width: 650px;
   line-height: 1.6em;
   background-color: white;
   font-family: Arial, Verdana, sans-serif;
   border-style: solid;
   border-width: 3px;
   border-color: #737373;
   border-radius:10px;
   color: black; 
   font-size: medium;
   padding: 0%;
   margin: auto;
}
/* Header bar --------------------------------------------------------------- */
header { display: block; max-width: 1300px; min-width: 650px; height: 130px; }
#logopic {float: left; padding: 5px 25px 0px 15px;}
#site-title {
  font-family: Verdana, sans-serif;
  font-weight: medium;
  color: #ec038d;
  font-size: 4.2em;
  padding-top: 15px;
  padding-bottom: 2px;
  text-shadow: 1px 1px 2px gray;
  text-align: left;
  line-height: 1em;
}
#motto { /* accessed from ln.php */
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: gray;
  padding: 2px;
  text-align: right;
  padding-right: 100px;
  }
/* Navigation bar ------------------------------------------------------------*/
nav { margin: 0; padding: 0px; display: block; max-width: 1300px; }
nav ul { /* Navigation basic presentation */
  border-top-width: 14px; /* blue top line of nav bar */
  border-top-style:solid;
  border-top-color: #6cbbcc;  /*border-top-color: purple;  test colour */
  background-color:  #bbfb7e;  /*background-color: orange;  test colour */
  list-style-type: none;
  text-align: left;
  padding: 1px 5px 1px 2px;
  }
nav ul li { /* Navigation list elements presentation */
  display: inline; text-align: left; padding: 4px 5px 4px 10px; }
nav ul li a { text-decoration: none; }
nav ul li img {
  border-style: solid;
  border-width: 4px;
  border-color:  #bbfb7e; /* match nav bg colour */ 
}
nav ul li img:hover{/* Navigation "links on hover" presentation */
  border-style: solid;
  border-width: 4px;
  border-color: white;  
  background-color:white;  
  text-decoration: none;
}
#ddmenus {display: inline;}
#ddmenus li form { padding: 3px 10px; margin-top: 0px; margin-right: 15px; width: 180px; }
#shop, #information {text-decoration: none; float: left;}
#sitemap {width: 90%; position: relative;}
#sitemap ol {margin: auto; width: 600px;}
#sitemap ul {list-style-type: none; padding-left: 20px; line-height: 1.8em;}
#login {
  font-size: 0.8em;
  background-color: #bbfb7e; 
  float: right;
  padding: 2px 0 10px 0;  
  margin: 0;
}
#register {
  font-size: 0.8em;
  padding: 2px 0 10px 0;
  background-color: #bbfb7e; 
  float: right;
  margin: 0;
  }

  /* General page settings ---------------------------------------------------- */
.form_center {margin: auto; padding: 20px; text-align: center;}
.public_video_container {clear: left; padding: 20px 40px; width:400px;} /* for free videos */
fieldset { padding: 2px 20px 30px 20px; background-color: white; margin-top: 30px; margin-bottom: 10px;}
legend {font-size:120%; color: #948ac7; }

.accountpage { padding: 0 0; width: 550px; margin: auto; margin-top: 30px; background-color: #f7fbf3; }

/* Shopping Cart page settings     -------------------------------------------- */
#cart_cost {text-align: right; padding-right: 10%;}

/* Notebook page settings ---------------------------------------------------- */
.notebook_navbutton {overflow:visible; font-size: 0.9em; margin:4px; padding:1px; font-weight: bold; background-color: white; color: #403769; }
#notebook_welcome {padding: 50px 100px; line-height: 2em;}
#notebook_navbox {max-width: 1250px; min-width: 650px; clear: both; padding: 10px 20px;  background-color: #bbf2fc; margin-bottom: 20px;} /*dfeff2*/
#qr-text form {padding: 20px 0 30px 0; margin: auto;text-align: center;}
#memberbenes li {text-align: left; width: 650px; margin: auto;}

.notebook table { border-style: solid; border-width: 1px; border-color: gray; width: 90%; margin: auto; padding: 6px; margin-bottom: 50px;}
.notebook table tr { border-style: solid; border-width: 1px; border-color: #dedede; }
.notebook table  td {padding: 7px 10px 10px 25px; }

.actionbutton {width: 64px; padding: 10px;}

/* -------------    *make_pix_gallery*  pages  -------- */
.product_gallery {position:relative; margin: auto; width: 95%; display: block; margin-top: 30px;}
.image_container {display: inline; float: left; height: 340px; width:270px; padding: 10px 10px 25px 10px; margin-bottom: 25px;}
.image_box { position: relative; margin: auto; height: 260px; width: 270px; padding-bottom: 0;}
.image_box img {margin: auto; border: 0; }
.image_container p  { font-size: 1.1em; }


/* Specific product page ---------------------------------------------------- */
.specific_page { position: relative; padding: 0 20px;}
#product_left_col { position: relative; padding: 10px 20px; max-width: 1300px;}
#product_image_container {float: left; width: 512px; margin-top: 7px; }
#product_right_col { position: relative; margin-left: 550px; padding-top: 5px; padding-right: 4%; }
#product_right_col p {padding: 5px 0 7px 0;}
#product_right_col ol {padding-left: 15%; padding-bottom: 15px;}
#product_button_container {position: relative; width: 300px; padding-top: 10px;}
#product_button_container li { list-style-type: none; margin-right: 20px; padding-top: 10px;}
#morepics {float: left; clear: both; padding-top: 25px; }

/* Shopping Cart page ---------------------------------------------------- */
#shopping_cart { background-color:  #f7fbf3; padding: 20px;}
#shopping_cart table {margin: auto;}
#shopping_cart tr {padding-bottom: 10px;}
#wishlist {}
#wishlist table {margin: auto;}
#wishlist tr {padding-bottom: 10px;}

/* Newsletter archive  -------------------------------------------- */
#newsletters { position: relative;}
#newsletters ul { margin: auto; width: 300px; list-style-type: none; }
#newsletters h2 { text-align: left;  margin: auto; width: 300px;}
#newsletters li { font-size: 1.1em; }
#newsletters  a { padding: 0 20px 0 0;}

/* testimonials  page-------------------------------------------------- */
#testimonials { position: relative; padding: 30px;}
#testimonials  ul { margin: auto; list-style-type: none; }

#workshops table { width: 100%; }
#workshops table td {font-size: 0.8em;}
#links table {width: 80%; margin: auto;}

/* Contact page info ------------------------------------------------------------*/
#contact {width: 650px; margin: auto;}
#contact p {padding: 5px 0 7px 0;  font-size: 1.2em;}


/* Shipping Rates page ------------------------------------------------------------*/
.shippingcost table { }

/* DVD Subscription page info ------------------------------------------------------------*/
.dvdsubpage {position: relative; padding: 5px 20px;}
#dvdsubscribe {width: 340px; margin: auto; padding-bottom: 30px;}
/* Clearance Map page info ----------------------------------------------------------*/
#clearancepage { padding: 30px; position: relative;}


/* Home page info ------------------------------------------------------------*/
#home_content {clear: both;}
#eu-note { text-align: left;  font-style: italic; color:#CC009A; padding: 20px 30px; }
#news_container {float: left; width: 650px; height: 810px; margin-left: 20px; margin-top: 10px; }
#home_page_news {
  position: relative;
  overflow: auto;
  width: 600px;
  height: 805px;
  background-color:  #f7fbf3;
  padding: 0px 5px 20px 20px;
  border-style: solid;
  border-width: 3px;
  border-color: #8eb36b;
}
#home_page_news h2 {text-transform: uppercase; color:#ec038d;font-size: 1.5em;} 
#home_page_news h3{text-transform: uppercase; color: black; text-align: left; font-size: 1.2em; padding-top: 18px; padding-bottom: 0;}  /*#4d593f*/
#home_page_news img {border: 0; float:left; margin: 0 10px 3px 0; }
#second_container {position: relative; margin-left: 670px; height: 800px; margin-top: 1px; }
#productsearch {position: relative; text-align: right; padding-right:10px; margin-bottom: 20px; font-weight: bold; height: 20px; max-width: 600px;}
#newsletternote  {
  background-color:  #f7fbf3;
  padding: 3px 10px 3px 10px;
  width: 350px;
  height: 26px;
  border-style: dotted;
  border-width: 1px;
  border-color:  #ec038d;  /*#403768*/
  margin: auto;
  margin-bottom: 10px;
}
#newsletternote  h3 {  text-decoration: none;  margin: auto; padding: 0;}
/*#newsletternote:hover { background: #bbfb7e; }*/
/*#newsletternote a:hover { background: #bbfb7e; }*/  /* "link on hover" colour */
#newsletternote:hover { background: #bbfb7e; }  /* "link on hover" colour */
#craftsy_container {
  position: relative;
  width: 370px;
  padding: 0px;
  height: 260px;
  border-style: dotted;
  border-width: 1px;
  border-color:  #403768;
  margin: auto;
  margin-bottom: 10px;
  background-color:  #f7fbf3;
}
#craftsy_container:hover { background: #bbfb7e; }
#craftsy_container h3{ color: #ec038d; margin-top: 2px; margin-bottom: 5px;}
#craftsy1 { width: 100px; height: 100px; float: left; margin-left: 45px; margin-bottom: 15px;}
#craftsy2 {float: right; width: 120px; height: 100px; margin-right: 45px; margin-bottom: 15px;}
#craftsy3 {float: left; margin-left: 45px;  width: 100px; height: 100px;}
#craftsy4 {float: right; margin-right: 45px;  width: 120px; height: 100px;}
/*#craftsy1:hover {  /* "link on hover" presentation */
/*  border-style: solid;
  border-width: 1px;
  border-color: #ec038d;*/
}
#craftsy2:hover {  /* "link on hover" presentation */
/*  border-style: solid;
  border-width: 1px;
  border-color: #ec038d;*/
}
#craftsy3:hover {  /* "link on hover" presentation */
/*  border-style: solid;
  border-width: 1px;
  border-color: #ec038d;*/
}

#home_page_video {
    position: relative;
    /*height: 250px;*/
    width: 320px;
    margin: auto;
    margin-bottom: 20px;
}
#my_slide_show  {
    position: relative;
    display: block;
    width: 320px;
    margin: auto;
    margin-bottom: 25px;
}
#homeblurb  {
  clear: both;
  width: 650px;
  font-weight: bold;
 /* color: #0f0f0f;*/
  font-size: 1.2em;
  margin: auto;
  margin-top: 30px;
  padding-top: 30px;
 }
#homepage_quote {color: #5593a1; font-style: italic; }
/* Footer (buttons, blurb, copyright) --------------------------------------- */

#footer_box { clear: both; padding: 15px; padding-bottom: 10px; margin-top: 20px;}
footer { color: black; margin: auto; text-align: center;}

A.square:link    { COLOR: blue; background-color: transparent; text-decoration: none;}
A.square:visited { COLOR: green; background-color: transparent; text-decoration: none;}
A.square:active  { COLOR: yellow; background-color: transparent; text-decoration: none;}
A.square:hover   { COLOR: white; background-color: transparent; text-decoration: none; }


#shippingcost table { padding: 20px 0px 30px 0px; margin: auto; }

/* -------------- Miscellany from old CSS ------------------ */
.banner_pics { font-size: 75%; vertical-align: bottom; text-align: center; }
.banner_huge_plain   { font-size: 300%; text-align: center; }
.banner_small  { font-size: 75%;  font-weight: bold;  text-align: center; }
.banner_huge   { font-size: 300%; font-weight: bold;  text-align: center; }

.lnheadbutton { overflow:visible; font-size:1.0em; margin:2px; font-weight: bold;}
.patternbutton { overflow:visible; font-size:75%; margin:2px; font-weight: bold;
            background-color:#ffffff; color:#ff0099; }
.mnbutton { overflow:visible; font-size:62.5%; margin:2px; font-weight: bold;
            background-color:#FFFFCC; color:#330066; }

.thumbnail { position: relative; z-index: 0; }
.thumbnail:hover { background-color: transparent; z-index: 50; }
.thumbnail span { position: absolute; background-color: #000066; color: #ffffff;
                  padding: 5px;  bottom: 0px; left: -1000px;
                  border: 1px dashed gray; visibility: hidden;}
.thumbnail span img { border-width: 0; padding: 2px;}
.thumbnail:hover span { visibility: visible; bottom: 0px; left: 80px; }

.swatch { position: relative; z-index: 0; }
.swatch:hover { background-color: transparent; z-index: 50; }
.swatch span { position: absolute; background-color: #000066; color: #ffffff;
                  padding: 5px;  bottom: 0px; left: -1000px;
                  border: 1px dashed gray; visibility: hidden;}
.swatch span img { border-width: 0; padding: 2px;}
.swatch:hover span { visibility: visible; bottom: 64px; left: 64px; }

.tn2{ position: relative;  z-index: 0; }
.tn2:hover{ background-color: transparent; z-index: 50; }
.tn2 span{ background-color: #000066; color: #ffffff;
           position: fixed; bottom: 10px; left: -1000px;
           padding: 5px; border: 1px dashed gray; visibility: hidden;}
.tn2 span img{ border-width: 0; padding: 2px;}
.tn2:hover span{ visibility: visible;  position: fixed; left: 100px; bottom: 10px; }

#footerlinks {
  display: inline;
  padding: 20px 25px 0 25px;
  width: 50px;
  text-align: center;
}

.footer_nav {
    margin-top:20px;
    margin-bottom:15px;
}

/* -------    end regular screen css -----------    */



/*  ************* Display for smaller screens  ****************************** */
/* General settings --------------------------------------------------------- */
@media (max-width: 1050px) {
#page_container {width: 98%;}
/* Header bar --------------------------------------------------------------- */
header { display: block; width: 97%; height: 100px; padding: 0; margin: 0; }
.banner_blurb {margin: auto; width: 600px; margin-bottom: 10px;}
#site-title {
       font-family: Verdana, sans-serif;
       font-weight: medium;
       color: #ec038d;
       font-size: 2.8em;
       padding-top: 27px;
       text-align: left;
       text-shadow: 0;
     }
#motto {
  font-family: Verdana, sans-serif;
  font-size: 0.7em;
  font-weight: normal;
  color: black;
  padding: 0px;
  margin: 2px;
  padding-right: 2px;
  }
#login { font-size: 0.8em; padding: 1px 0 3px 0; }
#register { font-size: 0.8em; padding: 1px 0 3px 0; }
  
/* Navigation bar ------------------------------------------------------------*/
nav { margin: 0; padding: 0; display: block; max-width: 100%; }
nav ul {border-top-width: 8px; height: 80px; margin-left: 2px;}
nav ul li { /* Navigation list elements presentation */
       display: inline;
       text-align: left;
       padding: 2px 3px 3px 4px;
       margin: 0 5px 0 0;
       }
nav ul li img {
  border-style: solid;
  border-width: 2px;
  border-color:  #bbfb7e; /* match nav bg colour */ /*border-color: orange;  test colour */
}
nav ul li img:hover{/* Navigation "links on hover" presentation */
  border-style: solid;
  border-width: 2px;
  border-color: white;  /*#ec038d*/
  background-color:white;   /*#ec038d*/
  text-decoration: none;
}
#ddmenus li form { padding: 3px 10px 3px 2px; margin: 0px; margin-right: 10px; width: 160px; }
/*#ddmenus li form{padding: 6px; margin-right: 10px; width: 160px; }*/
/* Home page specific info ---------------------------------------------------*/
#home_content {clear: both;}
#news_container {position: relative; width: 100%; height: 630px; padding-top: 5px; margin: 0; }
#home_page_news {
       position: relative;
       margin: auto;
       overflow: auto;
       width: 500px;
       height: 600px;
       background-color:  #f7ffed;
       padding: 0 5px 5px 10px;
       border-style: solid;
       border-width: 2px;
       border-color: #879971;  /* darkish green  */
      }
#second_container { float: left; padding-top: 15px; margin: 20px 1% 20px 1%; height: 790px;	width: 100%; }
#homeblurb  {
        clear: both;
        display: block;
	 width: 500px;
        font-weight: bold;
        color: #e612e6;
        font-size: 135%;
        margin: auto;
        padding: 35px 15px 10px 10px;
        }
#product_left_col { position: relative; width: 90%;}
#product_image_container {float: none; margin: auto;}
#product_right_col {float: left; padding-top: 15px; margin: 20px 1% 20px 1%; max-width: 800px; }
} /* ----------- end small screen css  -----------------   */