@import "boilerplate.css";
@import "plugins.css";

/* -------------------------------------------------------------- 
   SCREEN
-------------------------------------------------------------- */

body { background: #FFFFFF; }

/* LINKS */
a { text-decoration: none;  }

/* -------------------------------------------------------------- 
   LAYOUT/STRUCTURE
-------------------------------------------------------------- */

/* CENTERED WRAP */  

/* http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div*/
#wrap {
   position: absolute;
   width: 100%; 
   height: 100%;
 
}

/* FLASH INTRO */
#flash #wrap,
#landing #wrap {
  width: 980px;
  height: 560px;
  margin-left: -490px;  /* half width */
  margin-top: -280px; /* half height */
  cursor: pointer;
}

#flashoverlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 560px;
  width: 980px;
  background: transparent;
  /* outline:blue dotted 1px; */
}

#flashoverlay a {
  display: block;
  height: 560px;
  width: 980px;
}

#flashoverlay:hover,
#flashoverlay a:hover,
#flashoverlay {
	cursor:pointer;
}

/* CYCLE IMAGES */
/*#background-wrap { float: left; position: absolute; left: 0px; height: 100%; width: 100%; overflow:hidden;}
#background { float: left; position: absolute; left: 0px; height: 100%; width: 100%;  background: #FFF;}
#background img { width:100%;  position: relative; min-width:1024px; min-height:768px; }
*/

/* FLYOUT: MENU & CONTENT */
#flyout { float: left; position: absolute; width: 145px; height: 100%;  overflow: hidden; z-index: 20; background: transparent url('../images/v2/patterns/home.png') repeat-y; } /* 145px initially; expands to 440px on hover */
   #flyout.expanded { width: 410px; }
   #flyout.contracted { width: 145px; }
   
   #flyout-content { width: 410px; overflow: hidden; }
      
      /* LOGO AND NAVIGATION BOX */
      #primary { float: left; width: 145px; overflow: hidden; }
         #logo { height: 124px; width: 145px; background-color: #0A2F45; }
         
         /* MAIN MENU */
         #navigation { margin: 20px 0 0 35px; background-color: transparent; }
         #navigation ul, #navigation li { margin: 0; padding: 0; list-style-type: none; }
         #navigation li { font-size: 11px; margin-bottom: 18px; line-height: 12px;  }
            #navigation li ul { width: 90px; margin: 10px 0 0 10px; }
            #navigation li ul a { font-weight: normal; }
            
         #navigation a { color: #58595B; font-weight: normal; }
         #navigation a:hover { color: #0B2F45; }
         #navigation .active > a, #navigation a.subactive { font-weight: bold; color: #0B2F45; }
         
         #menu .submenu li { margin-bottom: 4px; }
         
      /* CONTENT BOX */    
      #secondary { float: left; margin: 145px 10px 0 10px; width: 245px; /* height: 415px; */ height: auto; background-color: transparent; overflow: hidden;  z-index: 100; }
         
         /* SUB MENU */
         #secondary .submenu { margin-top: 0px; } 
         #secondary .submenu, #secondary .submenu li { list-style-type: none; }
         #secondary .submenu li { margin-bottom: 4px; }
         #secondary .submenu a { color: #58595B; font-weight: normal; } 
         #secondary .submenu a:hover { color: #0B2F45; }
         #secondary .submenu a.subactive { font-weight: bold; }
         
   /* FLYOUT BACKGROUND - Different backgrounds for each section. 
   body#home #flyout { background: transparent url('../images/v2/patterns/home.png') no-repeat; }
   body#about-us #flyout { background: transparent url('../images/v2/patterns/5.png') no-repeat; }
   body#portfolio #flyout { background: transparent url('../images/v2/patterns/4.png') no-repeat; }
   body#design-centre #flyout { background: transparent url('../images/v2/patterns/1.png') no-repeat; }
   body#contact-us #flyout { background: transparent url('../images/v2/patterns/3.png') no-repeat; }
   body#suppliers #flyout { background: transparent url('../images/v2/patterns/2.png') no-repeat; }
   */
   
  /* Terri just wants this background image all the time */
  body #flyout { background: transparent url('../images/v2/patterns/left52.png') repeat-y; }
   
/* -------------------------------------------------------------- 
   CONTENT
-------------------------------------------------------------- */
.contentblock { font-size: 9px; line-height: 12px; color: #0B2F45; overflow: hidden; }
.contentblock p:first-child { font-size: 12px; line-height: 14px; }

/* -------------------------------------------------------------- 
   CONTROLS - Controls the cycling of the background images
-------------------------------------------------------------- */
#background-control { clear: both; position: absolute; height: 75px;  z-index: 30; left:0px; bottom:0px; width:100%;}
   #background-control a { color: #58595B; font-weight: normal; }
   #background-control a:hover { color: #0B2F45; } 

   /* Show/Hide Content - Show Text, Control Music */
   #background-control #secondary-hide-one { float: left; width: 145px; text-align: center; height:40px; overflow: hidden;}
      #background-control #secondary-hide-one a, 
      #background-control #secondary-hide-two { font-size: 10px; text-transform: uppercase; } 
      
      ul#music , 
      ul#music li {
         margin: 0;
         padding: 0;
         list-style-type: none;
      }
      
      ul#music {
         overflow: hidden;
      }
   
   /* Controls */
   #background-control #controls { float: left; width: 100%; height: 35px; background-color: beige; opacity: 0.7; }
   #background-control #controls a { display: block; float: right; }
   #background-control #controls img { width: 29px; height: 22px; }
   
      #controls #prev, #controls #next { margin: 8px 5px 0 5px;}
      #controls #secondary-hide-two { margin: 14px 5px 0 5px; }
      

/* -------------------------------------------------------------- 
   FORMS - Controls the cycling of the background images
-------------------------------------------------------------- */

form { font-size: 12px; }
form.vform p input, form.vform textarea { width: 200px; padding: 0; font-size:  11px; }
form.vform input { height: 14px; }
form.vform textarea { height: 75px; }
form.vform input.button { height: auto; width: auto; }

/* INLINE FIELD LABELS */
form.vform p { position: relative }
form.vform label  { position: absolute; top: 2px; left: 2px; font-weight: normal; color: #58595B; }

form .error { color: #77132C;  border: 1px solid  #77132C; background: #E7D1CB; }

/* -------------------------------------------------------------- 
   SUPPLIERS
-------------------------------------------------------------- */

#supplier-content p { margin: 0; text-align: justify; }
#supplier-images { position: absolute; left: 144px; top: 0px; width: 265px; overflow: hidden;  }
#supplier-logo { position: absolute; left: 145px; top: 0px; width: 265px; height: 124px; background: #fff; z-index: 100; }
#supplier-logo img { width: 265px; height: 124px; }