/*     www.packcentre.com.au     */


/* ~~~~~~~~~~~~~~~~~~~~ Fonts ~~~~~~~~~~~~~~~~~~~~ */


* { font-family: Arial, Helvetica, sans-serif; }
* { font-weight: lighter; }




body, td, input, textarea, select { font-size: 10pt; }

h1 { font-size: 160%; }
h2 { font-size: 140%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; font-weight: normal; margin: 2em 0 .5em 0; }
h5 { font-size: 100%; }

p  { line-height: 1.5em; }

p.centred          { text-align: center; }
p.right            { text-align: right; }
th                 { text-align: left; font-weight: bold; }
.larger            { font-size: larger; }

#logo              { position: absolute; left: 10px; top: 27px; font-style: italic; font-family: Arial, Helvetica, sans-serif; }

address            { font-weight: normal; font-style: normal; width: 300px; padding: 1em 0; margin-bottom: 0; }
address .highlight { }
address .bold      { font-size: larger; }



/* ~~~~~~~~~~~~~~~~~~~~ Layout ~~~~~~~~~~~~~~~~~~~~ */

html, body, div, table, img, form { margin: 0; padding: 0; border: 0; }


#head                { height: 100px; border-left-width: 230px; }

.side                { padding: 5px; }

#sidebar             { float: left; width: 210px; padding: 10px; }

#content             { border-left-width: 230px; padding: 30px 30px 0 50px; }

#content ul          { margin: 0; padding-left: 15px; list-style-image: url(../images/bullet.gif); list-style-type: circle; }
#content li          { margin: .5em 0; }
#content p           { margin: .5em 0; line-height: 1.5em; }
li.highlight         { list-style-type: none; }


img#Impact           { margin-bottom: -6px; }

#cornerTL            { position: absolute; left: 230px; top: 100px; z-index: 0; }

blockquote           { width: 350px; padding: 10px; border: 1px solid #fff; }



#triangle            { float: right; width: 250px; height: 250px; bottom: 0; margin: 0 20px; padding: 0;
                       text-align: center; line-height: .7; font-size: .7em; letter-spacing: -.05em; }

#triangle img        { margin: 0 25px -6px 25px; }


#flash               { position: relative; z-index: 0; width: 800px; margin-left: -40px; }
#flash p             { position: absolute; width: 100%; text-align: center; font-style: italic; font-size: 110%; }

.clear               { clear: both; }
thead                { height: 2em; }

#contact #content p  { padding: .25em 0; }
#contact form        { margin: 1.5em 0; }



/* Forms on the contact page have labels beside text input boxes
   The overall width is set at 350px
   The text input elements are variable widths, to fit around the labels
 */

form .size1 label,
form .size2 label,
form .size3 label    { display: block; float: left; padding-left: 0; text-align: left; }

form .size1 label    { width: 50px;  }
form .size1 input    { width: 300px; }

form .size2 label    { width: 80px;  }
form .size2 input    { width: 270px; }
form .size2 textarea { width: 270px; }

form .size3 label    { width: 120px; }
form .size3 input    { width: 230px; }
form .size3 textarea { width: 230px; }


form#search          { width: 210px; }
form#search #term    { width: 205px; }
form#search label    { font-size: 90%; }
textarea             { height: 100px; }



/* ~~~~~~~~~~~~~~~~~~~~ Colours ~~~~~~~~~~~~~~~~~~~~ */

#head                { background: transparent url(../images/header.jpg) 250px top repeat-x; }


body, #logo          { background-color: #00529c; }

#content, #head      { border-color: #00529c; border-style: solid; }

#content             { background: transparent url(../images/shadow/left.jpg) repeat-y; }
#wrap                { background: transparent url(../images/shadow/top.jpg)  repeat-x; }

#certified           { display: block; margin: 15px 0 0 0; }
#certified           { background: transparent url(../images/certified-sml.jpg) no-repeat; width: 120px; height: 69px;  margin-bottom: 40px; }
#certified:hover     { background: transparent url(../images/certified-lge.jpg) no-repeat; width: 200px; height: 115px; margin-bottom: 10px; }

/* Include the quality logos here to preload them before the hover */
#logo                { background: transparent url(../images/certified_lge.jpg) no-repeat; }

address              { border-bottom: 1px solid #69c; }

body, a              { color: #eef; }

.highlight, #logo, h1, h2, h3, h4, th, body#faq strong, form#search, .incorrect { color: #fdb913; }



/* ~~~~~~~~~~~~~~~~~~~~ Vertical Menus ~~~~~~~~~~~~~~~~~~~~ */



/* ~~~~~~~~~~~~~~~~~~~~ Positioning ~~~~~~~~~~~~~~~~~~~~ */


.menu, .menu li, .menu ul   { list-style-type: none; }

.menu                       { z-index: 3000; }
.menu ul                    { z-index: 3100; }
.menu a                     { z-index: 1000; cursor: pointer; text-decoration: none; font-size: 85%; }
.menu a.nolink              {                cursor: default; }


/**
 *  Create a relative container in which to absolutely position the sub-menu.
 *  The sub-menu sits off the screen to the left until required
 *  When hovered over, set left to auto and create a small negative margin so sub-menu overlaps slightly
 *
 *  Notes:
 *  display: none;    some screen readers will then refuse to make it visible again
 *  left: auto;       Opera offsets absolutely positioned boxes only in relation to the page
 */


.vertical li                { position: relative; }
.vertical li ul             { position: absolute; left: -999px; }
.vertical li:hover ul,
.vertical li.hover ul       {                     left: 208px; top: 0; margin: -5px; }

.menu li a                  { display: block; }


/* ~~~~~~~~~~~~~~~~~~~~ Dimensions ~~~~~~~~~~~~~~~~~~~~ */

.vertical                   { width: 210px;               margin: 0; padding: 0;       border-width: 0; }
.vertical li                { width: 210px;               margin: 0; padding: 0;       border-width: 0; }

/*** sub-menu ***/

.vertical ul                { width: 200px; height: auto; margin: 0; padding: 5px;     border-width: 1px 2px 2px 1px; }
.vertical ul li             { width: 100%;                                             border-width: 0; }


.vertical a                 {                                        padding: 7px 0;   border-width: 0 0 1px 0; }
.vertical ul a              {                             margin: 0; padding: 7px 2px; border-width: 0 0 1px 0; }



/* ~~~~~~~~~~~~~~~~~~~~ Colours ~~~~~~~~~~~~~~~~~~~~ */


.menu ul                    {                 background-color: #00529c;     border-style: solid; border-color: #69c #036 #036 #69c; }
.menu a, .menu ul a         { color: #eef;    background-color: transparent; border-style: solid; border-color: #69c; }
.menu ul li.last a          {                                                                     border-color: #00529c; }

.menu li a:hover,
.menu li a:focus,
.menu li a.active           { color: #fdb913; background-color: transparent; }

.menu h1, .menu h2, .menu h3, .menu h4, .menu h5, .menu h6  { width: 100%; font-size: 1em; }
                    .menu h3, .menu h4, .menu h5, .menu h6  { display: block; margin: 0; padding: 0; border: 0; text-decoration: none; }


select                     { visibility: visible; }