@import "reset.css";
@import "cmxformTemplate.css";
@import "cmxform.css";


/* MAIN STYLES  */

body {
background: #62BAE9 url( ../images/pg_bgd.jpg) 50% 0 repeat-x;
}

p {
margin:2px 0 6px 0;
}

strong , dt {
font-weight : bold;
}

.clr {
clear: both;
}

a {
color: #606;
text-decoration: underline;
}

p.standfirst , blockquote {
font-size:1.2727em;
line-height:1.4em;
color:#606;
margin: 0 10px 10px 0px;
padding: 0 6px 0 0;
}

small {
display:block;
font-size:0.9em;
font-style: italic;
}

blockquote {
color:#336;
}

blockquote em {
font-style: italic;
color:#ccc;
}

dl {
float:left;
}

dl.marketTimes {
width: 475px;
border-bottom:1px dotted #606;
padding:5px;
margin:0 0 10px 0;
}

dl.wholesale {
border-bottom:1px dotted #606;
width: 540px;
padding:5px;
margin:0 0 10px 0;
}

dl.marketTimes.hover {
background-color: #EDEFF4;
}


dt {
float: right;
width: 380px;
padding: 0 15px 0 0;
margin: 0;
font-size:1.2727em;
line-height:1.4em;
color: #090;
}

dd {
width: 380px;
padding: 0 15px 0 0;
float: right;
}

dt.r , dd.r {
float: left;
padding:0;
}

dl.noImage dt, dl.noImage dd {
float: left;
width: 475px;
}

dd.img {
float: left;
width: 100px;
padding: 0 15px 0 0;
margin: 0 5px 0 0;
}

dd.imgR {
float: right;
width: 100px;
padding: 0 5px 0 0;
margin: 0;
}


dd.img img, dd.imgR img {
border:1px solid #090;
}

dd.link {
line-height: 1.3em;
}




h1 {
margin: 0 0 4px 0;
padding: 4px 0 0 0;
font-size:1.4545em;
line-height:1.6em;
}

h2 {
margin: 5px 0 10px 0;
padding:0 0 4px 0;
font-size:1.2727em;
line-height:1.4em;
color: #090;
}

h3 {
font-size:1em;
line-height:1.2em;
font-weight: bold; 
padding:10px 0 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
color:#606;
}







/*
--------------------------
------ colours -----------
--------------------------
*/

.jscript .wob {
color:#fff;
}


.blue {
color:#336;
}

.green {
color:#090;
}

ul {
margin:5px 0 0 0;
}

li {
padding: 0 3px 5px 12px;
background-position: 3px 4px;
background-repeat: no-repeat;
list-style: none;
}


div.subnav ul {
display: inline;
list-style-type: none;
padding:0;
margin:0;
}

div.subnav li {
display: inline;
background-image: none;
margin:0;
padding:0;
}

#wrapper {
width:895px;
position:relative;
background: transparent url( ) no-repeat top right;
margin: auto;
margin-top:40px;
font-size:1.1em;
line-height:1.4em;
}

#container {
float: left;
width: 895px;
}

#stars {
position:absolute;
top:0px;
left:0px;
z-index: -1;
width: 100%;
background: transparent url(../images/stars.png) top center repeat;
height: 600px;
}


#content {
background: #ff0 url(../images/content_bgd.gif) repeat-y top right;
width: 895px;
}

#sidebar {
width: 140px;
float: right;
margin:139px 10px 0 0;
}

#sidebar div.roundBox {
display:none;
}

#pressReleaseTicker  {
height:220px;
margin:10px 0 0 0;
}


#pressReleaseTicker dl, #pressReleaseTicker dt, #pressReleaseTicker dd , #pressReleaseTicker a{
float:left;
width:120px;
color:#fff;
}

#pressReleaseTicker dt {
padding:0;
margin: 0;
font-size:1.1em;
line-height:1.3em;
color:#fff;
}


#header {
position:relative;
display:block;
width: 895px;
height:275px;
clear: both;
font-size:1.0909em;
background: transparent url( ../images/header_bdg.gif) no-repeat top left;
}

#header div.logo {
position:absolute;
top: 4px;
left: 4px;
padding:0;
margin:0;
height:114px;
width:297px;
}


#header div.sloopers {
position:absolute;
top: 4px;
left: 350px;
padding:0;
margin:0;
height:114px;
width:297px;
}


div.exhibition {
float:right;
height:170px;
width:164px;
}


#header div.ebay {
position:absolute;
top: 4px;
left: 580px;
padding:0;
margin:0;
height:100px;
width:100px;
}


#header div.lights {
position:absolute;
width: 895px;
height:99px;
top:176px;
background: #ff0 url( ../images/lights_bdg.jpg) no-repeat top left;
}

#header div.h1 {
position:absolute;
top:120px;
left:10px;
}

#header div.h1 h1 {
text-indent:-9000px;
width:264px;
height:120px;
}

#header div.h1 h1.welcome {
background: transparent url( ../images/headers/welcome.gif ) no-repeat 16px 0;
}

#header div.h1 h1.products {
background: transparent url( ../images/headers/products.gif ) no-repeat 16px 0;
}

#header div.h1 h1.market {
background: transparent url( ../images/headers/market.gif ) no-repeat 16px 0;
}

#header div.h1 h1.gallery {
background: transparent url( ../images/headers/gallery.gif ) no-repeat 16px 0;
}

#header div.h1 h1.about {
background: transparent url( ../images/headers/about.gif ) no-repeat 16px 0;
}

#header div.h1 h1.contact {
background: transparent url( ../images/headers/contact.gif ) no-repeat 16px 0;
}

#header div.h1 h1.wholesale {
background: transparent url( ../images/headers/wholesale.gif ) no-repeat 16px 0;
}






/* START - MAIN NAV */

#header div.mainNav {
position:absolute;
top:113px;
left:289px;
}
		
#nav { 
width: 580px;
height: 61px;
margin: 0;
padding: 0;
background: url(../images/dragonfly_nav.png) repeat-x;
list-style: none;
overflow: hidden;
text-indent: -999em;
}
		
#nav li { 
position: absolute;
overflow: hidden;
font-size: 1em;	 
}
		
#nav li, #nav li * { height: 61px; }

#nav a { display: block; }

#nav em, #nav span { 
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: url(../images/dragonfly_nav.png) no-repeat; 
cursor: pointer;
}
		
#nav span { display: none; }
		
#n-home { left: 2px; }
#n-home, #n-home * { width: 64px; }
#n-home em { background-position: -2px 0; }
#n-home:hover em,
#n-home span,
#home #n-home em { background-position: -2px -63px; }
		
		#n-products, #n-products * { width: 82px; }
		#n-products { left: 64px; }
		#n-products em { background-position: -64px 0; }
		#n-products:hover em, #n-products span, #products #n-products em { background-position: -64px -63px; }
		
		#n-wholesale, #n-wholesale * { width: 94px; }
		#n-wholesale { left: 146px; }
		#n-wholesale em { background-position: -146px 0; }
		#n-wholesale:hover em, #n-wholesale span, #wholesale #n-wholesale em { background-position: -146px -63px; }

        #n-market, #n-market * { width: 116px; }
		#n-market { left: 240px; }
		#n-market em { background-position: -240px 0; }
		#n-market:hover em, #n-market span, #market #n-market em { background-position: -240px -63px; }
		
		#n-gallery, #n-gallery * { width: 74px; }
		#n-gallery { left: 	356px; }
		#n-gallery em { background-position: -356px 0; }
		#n-gallery:hover em, #n-gallery span, #gallery #n-gallery em { background-position: -356px -63px; }

		#n-about, #n-about * { width: 60px; }
		#n-about { left: 430px; }
		#n-about em { background-position: -430px 0; }
		#n-about:hover em, #n-about span, #about #n-about em { background-position: -430px -63px; }

		#n-contact, #n-contact * { width: 90px; }
		#n-contact { left: 490px; }
		#n-contact em { background-position: -490px 0; }
		#n-contact:hover em, #n-contact span, #contact #n-contact em { background-position: -490px -63px; }
		
		#nav .over { text-indent: -999em; }
		#nav .over em { background-image: none; }

/* END - MAIN NAV */


#leftCol {
width: 475px;
float: left;
margin:0 0 0 20px;
}

#leftCol.long {
width: 850px;
}


#leftCol.long p {
width: 475px;
}

#leftCol.nobdr {
border-right:none;
}

#leftCol p {
padding:0 10px 0 0;
}

#leftCol h4 {
padding:4px 0 4px 0;
color:#336
text-transform: uppercase;
letter-spacing: 1px
}

#leftCol li a {
text-decoration:none; 
}

#leftCol li a:hover {
color:#336;
text-decoration:underline; 
}

/*
-----------------------------------
------ Slideshow styling ----------
-----------------------------------
*/

#slideShow {
width:500px;
height:350px;
margin:0 0 10px 0;
overflow:hidden;
}

#slideShowNav {
position:relative;
float:left;
margin: 0;
}

#slideShowNav li {
width: 52px;
float: left;
margin: 6px 12px 6px 0;
padding:0;
background-image: none;
list-style: none;
}
 
#slideShowNav a { 
width: 52px;
background: #fff;
padding: 3px;
display: block;
border: 1px solid #606;
}

#slideShowNav a.activeSlide {
background: #606;
}
 
#slideShowNav a:focus {
outline: none;
}

#slideShowNav img { 
border: none;
display: block;
}

#slideShow.square, div.galleryLoop.pics {  
float: right;
display: block;
height:  300px;  
width:   332px;  
padding: 0;  
margin:  0;
overflow:hidden;  
}

div.galleryLoop.portrait {  
height:  500px;
overflow:visible;  
}


 
#slideShow.square img , div.galleryLoop.pics img {  
padding: 15px;  
border:  1px solid #606;  
background-color: #eee;  
width:  300px; 
top:  0; 
left: 0;
}

hr {
clear: right;
border: none;
height:1px;
background: #fff;
color: #fff;
border-bottom: 1px solid #606;
margin: 8px 2px 8px 2px;
}

#rightCol {
width:320px;
position:relative;
margin-left: 545px;
}

#rightCol.short {
width:625px;
margin-left: 285px;
}

#rightCol p {
margin: 4px 0 4px 0;
}


#rightCol.onecol {
margin-left: 0;
background-color:#fff;
}

a.blink {
background-color:#606;
color:#fff;
border:1px solid #090;
padding:1px 6px 1px 6px;
text-decoration: none;
white-space: nowrap;
}


/*
-------------------------------------------------------
---------------- YouTube Gallery -------------------------
-------------------------------------------------------
*/

#youtubeDisplay {
width:438px;
}

#youtubeThumbsContainer {
position:relative;
float:left;
width:325px;
margin:45px 0 0 0;
}

#youtubeThumbsContainer img {
width:153px;
margin:0;
padding:0 5px 5px 0;
}
/*
-------------------------------------------------------
---------------- Header block -------------------------
-------------------------------------------------------
*/

#rightCol div.headerBlock {
margin:0 0 10px 0;
}

#rightCol div.headerBlock h1 {
margin: 0 0 0 10px;
color: #fff;
}

#rightCol div.headerBlock h1.blue {
margin: 0;
color:#336;
}

#rightCol div.boxout  {
background-color : #f5f3de;
padding:10px;
border:none;
}


#rightCol h1, #rightCol h2, #rightCol p.standfirst {
padding-left:0;
}


#footer {
position:relative;
background: transparent url( ../images/footer_bgd.gif ) no-repeat bottom left;
height:192px;
text-align:left;
margin:0 5px 0 5px;
padding:0;
color: #fff;
}

#footer a {
color: #fff;
text-decoration: underline;
}

#footer div.nav {
position:absolute;
width: 600px;
height:40px;
top:140px;
left:80px;
}


#footer ul {
display: inline;
list-style-type: none;
padding:0;
margin:0;
}

#footer li {
display: inline;
background-image: none;
margin:0;
padding:0;
}

address {
text-align: left;
margin:10px 0 10px 0;
}

p.credit {
color:#ff0;
}

a.credit {
text-decoration:none;
color: #9c0;
}

a.credit:hover {
text-decoration:underline;
}



/*
-------------------------------------------------------
-------------------- Boxout styles --------------------
-------------------------------------------------------
*/

div.roundBox {
margin:0 0 10px 0;
}

div.roundBox img {
float:right;
padding:0 0 10px 10px;
}

div.roundBox h3 {
padding:0 0 10px 0;
}

#leftCol div.roundBox {
margin:0 10px 10px 0;
}



/* ------------------ yellow --------------------- */

.jscript #yellow .boxOut .hdr .r { font-size:1px; height:11px; }
.jscript #yellow .boxOut .ftr .r { font-size:1px; height:12px; }
.jscript #yellow .boxOut .hdr { background: transparent url(../images/boxout/yellow_tl.gif) no-repeat 0px 0px;}
.jscript #yellow .boxOut .hdr .r { background:transparent url(../images/boxout/yellow_tr.gif) no-repeat right 0px;}
.jscript #yellow .boxOut .bdy { background: #EBA706 url(../images/boxout/yellow_bdy.gif) repeat-y 0px 0px;}
.jscript #yellow .boxOut .bdy .r { background: #EBA706 url() repeat-y right 0px;}
.jscript #yellow .boxOut .bdy .r .mid { margin:0px 4px 0px 4px; background:#EBA706 url() repeat-x 0px 0px; padding:1em; }
.jscript #yellow .boxOut .ftr { background:transparent url(../images/boxout/yellow_bl.gif) no-repeat 0px 0px;}
.jscript #yellow .boxOut .ftr .r { background:transparent url(../images/boxout/yellow_br.gif) no-repeat right 0px;}