/* --------------------------------------------- */
/* Ozarks Creative Notions Style Sheet */
/* --------------------------------------------- */
/* Ozarks Creative Notions Style Sheet with Bootstrap 3.3.7 */
/* -------------------------------------------------------- */
/* Created - Mar 2017 LEC (OZCN) - Version 3.0 with responsive design */
/*  -------------------------------------------  */
/*  Color scheme:             */
/*   #585858   - medium gray  */
/* --------------------------------------------- */

body {
           margin: 2px 2px 2px 2px;       <!-- (Top, Right, Bottom, Left)  -->
           padding: 0;
           text-align: center;
           font: 100% Helvetica, sans-serif;
           color: #999;
           background-color:  #FFFFFF ;    
          <!-- 	background: url(backgrounds/xxx.png); --> <!-- Background image HERE -->
          }

a:link {
           text-decoration: none;
           color: #6A6A6A;               <!-- Affect (only) email address link -->
           }

a:visited {
           text-decoration: none;
           color: #6A6A6A;
            }

a:hover {
          text-decoration: underline;
           color: #6A6A6A;
           }

address {
        font-style: normal;
        color: #6A6A6A;
        }

/* ************************************************  */
h1, h2, h3 {
	color: #999;
                   }

h1 {
     margin-top: 0;
     font-size: 1.3em;
      }

h2 {
     margin-top: 0;
     font-size: 1.2em;
     }

h3 {
     margin-top: 0;
     font-size: 1.1em;
     }

hr {
    color: #6A6A6A;          <!-- Dark Gray -->
    background: #6A6A6A;   
    border: none;
   }


/* ************************************************ */
/* Site Structure */
/* Header width: 900px; */
/* Frames needed diff wrapper */
/* ************************************************ */
#hdrwrapper {
                        margin: 0 auto;
                        width: 900px;    
                        text-align: left; <!-- Aligns text in left nav bar to the left -->
                        background: #FFFFFF; 
                        }

/* ************************************************ */
#wrapper {   <!-- This is the first width applied to the total right hand box. -->
          margin: 0 auto;
          width: 600px;         <!-- was 700 for purple page-->
          height: 2000px;       <!-- 620 Height of background box.-->
          text-align: left;     <!-- Align to left leaving empty space to right. --> 
          background: #FFFFFF;  <!-- #FFFFFF color of left over space below content text box  #BCC2DC; Use "blue" to see edges. -->
                  }

/* ************************************************ */
/* Welcome box/Main Text box Area */
#content {
                 float: left; <!-- was right -->
                 padding: 1px;
                 width: 600px;    <!-- width of main text box was 690-->
                 _width: 600px;   <!--  was 680-->
                 min-height: 520px; 
                 background:  #FFFFFF;  <!-- background of main text box -->
                 }

* html #content {
                   height: 520px;  <!--  was 520-->
                  }

/* ************************************************ */
#header h1 {
            margin: 0;
            padding: 0;
            height: 170px;
            background: url(./CN_header9.jpg) center center no-repeat;
                      }

#header h1 span {
                  display: none;
                }

/* ************************************************ */
/* Navigation controls the bar across the top. */
/* min-height: 500px removed. */
/* ************************************************ */
#navigation {
                    margin: 0;
                    padding: 5px 0;
                    text-align: center;
                    list-style: none;
                    font-weight: bold;
                    background: #D4D4D4;  <!-- #D4D4D4 Background light gray color of top nav bar -->
                    }

#navigation a:link, 
#navigation a:visited {
                        color: #333;
                          }

#navigation a:hover {
                      color: #666;
                      text-decoration: none;
                        }

#navigation li {
               display: inline;
                }

/* ***************************************************** */
/* categories controls the left-hand navigation bar.   */
/* ****************************************************  */
/* float - shift box right or left */
/* padding -  */
/* width - of blue box background */
/* min-height - min height that blue box will be */
/* **************************************************** */
#LeftNavwrapper {
                                margin: 0 auto;
                                width: 175px;    
                                height: 700px;
                                text-align: left;   <!-- Aligns text in left nav bar to the left -->
                                background: #FFFFFF; 
                              }

#categoryWrapper {
                        float: left;  
                        padding: 5px;
                        width: 175px;  
                        font-weight: bold;
                        text-align: left;
                        min-height: 700px;
                        overflow: hidden;
                        background: #FFFFFF;
                       }

* html #categoryWrapper {
                         height: 700px;  
                         }

#categoryWrapper a:link, 
#categoryWrapper a:visited {
                             text-decoration: none;
                             color: #666;
                                                   }

#categoryWrapper a:hover, 
#categoryWrapper a:active {
                            color: #333;
                            }

/* ************************************************ */
#categories {
                       margin: 0;
                       padding: 0;
                       list-style: none;
                       }

#categories li {
                          padding: 5px 0;  <!-- Controls line spacing in left Navigation bar -->
                          }

#categories ul {
                           display: none;
                           margin: 0 0 10px 15px;
                           padding: 0;
                           list-style: none;
                           font-size: 10px;
                           }

#categories li.selected ul {
                             display: list-item;
                             }

#categories ul li {
                    margin: 0;
                    padding: 0;
                    color: #FFFFFF;
                     }

/* ************************************************ */
#footer {
              clear: both;
              padding: 1px 0 ;
              text-align: left;
              font-size: .7em;
              background: #FFFFFF; 
              bottom: 0;
              }

#footer a:link, 
#footer a:visited {
                    color: #666;
                     }

#footer a:hover {
                 color: #000000;    
                 }

/* ************************************************ */
/* -- Photo Gallery - Not Used. -- */
/* ************************************************ */
#galleryWrapper {
	text-align: left;
}
#galleryWrapper p {
	margin: 30px 0;  
	padding: 0;
}

/* ************************************************ */
/* -- SlideShow - Photo Gallery -- */
/* ************************************************ */
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#slideshow_wrapper {width:606px; margin:15px auto; display:none}
#slideshow_wrapper * {margin:0; padding:0}

#fullsize {position:relative; width:606px; height:450px; padding:2px; border:1px solid #ccc; background:#000}

#information {position:relative; bottom:0; width:606px; height:0; background:#555; color:#fff; overflow:hidden; z-index:200; opacity:.9; filter:alpha(opacity=70)}
#
#information h3 {padding:4px 8px 3px; font-size:16px}
#information p {padding:0 8px 8px }

#image {width:606px}
#image img {position:absolute; left:0; z-index:25;  width:auto;}

.imgnav {position:absolute; width:25%; height:456px; cursor:pointer; z-index:150}

#imgprev {left:0; background:url(images/left.gif) left center no-repeat}

#imgnext {right:0; background:url(images/right.gif) right center no-repeat}

#imglink {position:absolute; height:456px; width:100%; z-index:100; opacity:.5; filter:alpha(opacity=40)}

.linkhover {background:url(images/link.gif) center center no-repeat}

#thumbnails {margin-top:15px}

#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}

#slideleft:hover {background-color:#333}

#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}

#slideright:hover {background-color:#333}

#slidearea {float:left; position:relative; width:556px; margin-left:5px; height:81px; overflow:hidden}

#slider {position:absolute; left:0; height:81px}

#slider img {cursor:pointer; border:1px solid #665; padding:2px}