/* CSS Document */
@import url("/css/fensons_reset.css");
@import url("/css/fensons_columns.css");

/* NOTES
Each page needs a template property set as follows:
adl = Aqua Di Lara
qq = Qiss Qiss
*/

/* ======== GENERAL TAGS
====================================================== */
html,body { height: 100%; }
body { font: 70%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; color: #ccc; margin: 0; padding: 0; xoverflow: hidden; background: #fff url("/gr/bg/wrapper-adl-outer42.jpg") 0 center repeat-x;}
#wrapper { width: 100%; height: 100%; margin: 0 auto; padding: 0;  }
#vcentre { width: 100%; height: 100%; }
#vcentre td { vertical-align: middle; margin: 0 auto; }


/*======= SITE STRUCTURE
=================================================*/
#siteholder { position: relative; width: 990px; height: 612px; margin: 0 auto; background: url("/gr/bg/siteholder4.png") no-repeat; border: 1px solid #333; }
#siteholder_content { padding: 10px; }
#close { position: absolute; top: -20px; right: 10px; text-align: right; font-size: 0.85em; }

/*======= MAIN
=================================================*/
#main { width: 970px; overflow: hidden; }
#main_content  { padding: 10px; margin: 80px 0 0 50px; color: #ccc; }
body#adl.home #main_content,
body#adl.collections #main_content,
body#adl.collectionlithium #main_content,
body#adl.collectionmandisa #main_content,
body#adl.collectionzinc #main_content { margin: 0; padding: 0; }
body#adl.careers #main_content,
body#adl.wheretobuy #main_content { width: 400px; }
body#adl.legal #main_content { xwidth: 600px; height: 350px; overflow-x: hidden; }

.collections-main { margin: 200px 0 0 100px;}
.collections-main h2 { font-size: 100%; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; }
.collections-main a { display: block; padding: 2px 5px 2px 20px; border: 1px dotted #555; width: 80%; margin-bottom: 3px; text-decoration: none !important; }
.collections-main a:hover { background-color: #F36; xborder-color: #fff; }

#main_content h1 { font-size: 1.2em; color: #fff; width: 250px; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1px dotted #ccc; margin-bottom: 10px; }
#main_content h1 span { color: #999; }
#main_content h1 .firstline { color: #666; }
#main_content h3 { color: #eee; margin: 0; font-weight: bold; font-weight: normal; margin: 15px 0 3px 0; text-transform: uppercase; }
body#adl.wheretobuy h3 { color: #fff; font-weight: bold; }
#main_content p { margin: 0 0 10px 0; }
#main_content a { color: #999; text-decoration: underline; }
#main_content a:visited { color: #999; }
#main_content a:hover { color: #fff; }

#presscoverage { margin: 0 0 50px 0; width: 900px; height: 330px; text-align: left; overflow: auto; overflow-x: hidden; line-height: 1.3em; padding-right: 10px; color: #666; text-transform: uppercase; font-size: 0.9em; }
#pressindex { xbackground-color: #fff; border-bottom: 2px solid #FF3366; height: 310px; margin: 0; overflow: auto; overflow-y: hidden; padding-left: 10px; text-align: left; white-space: nowrap; width: 100%; }
#pressindex table { height: 100%; margin: 0; padding: 0; width: 100%; }
#pressindex td { border: 0; padding: 10px 60px 0 0; text-align: center; font-size: 0.9em; vertical-align: top; }
#pressindex img { border: 0; margin-bottom: 4px; }
#pressindex a { text-decoration: none; display: block; padding-bottom: 2px; }
#pressindex a:hover { background-color: #000; color: #FFF; }

/*======= NAV
=================================================*/
#nav { position: absolute; width: 970px; margin: 0; bottom: 0; }
#nav_content { padding: 0; xmargin-top: 20px; font-size: 0.9em; } 
#nav a { padding-right: 10px; color: #888; text-transform: uppercase; }
#nav a:hover { color: #fff; }
#nav h1 { text-transform: uppercase; font-weight: bold; margin-bottom: 3px; color: #ccc; }
#nav h1 a { color: #fff; } 
.logo-q { float: left; background: url("/gr/logo-q.png") 0 3px no-repeat; width: 24px; height: 30px; }
body#adl #nav .aquadilara { margin-left: 30px; }
body#adl #nav .aquadilara h1 { background: url("/gr/bars-three2.png") center right no-repeat; }
body#adl #nav .aquadilara .swimwear { color: #fff; background: url("/gr/bullet-pink-square.gif") 0 4px no-repeat; padding-left: 10px; }
body#adl #nav .qissqiss { border-left: 1px dotted #bbb; padding-left: 5px; }
body#adl #nav .qissqiss h1 a { color: #a3a3a3; }
body#adl #nav .qissqiss h1 a:hover { color: #fff; }

#nav a:hover { color: #fff; }

#nav #announcement { display: none; xz-index: 2000; }

#nav-sub { height: 120px; margin: 0; padding: 15px 0 0 20px; background: url("/gr/bg/subheader-grey3.png") repeat-x; }
#nav-sub_content { padding: 5px 0 0 0; }
#nav-sub #logo { position: absolute; bottom: 60px; right: 50px; background: url("/gr/logo-aqua-di-lara2.png") no-repeat; width: 238px; height: 27px; }
#nav-sub #logo span { display: none; }
#nav-sub #logo a { display: block; height: 21px; width: 184px; }
#nav-sub #links { text-transform: uppercase; }
.vert-spacer { height: 5px; }
#nav-sub #links a { color: #888; }
#nav-sub #links a:hover { color: #ff0066; } 
#nav-sub #links .current { color: #fff !important; }
#nav-sub #links .sep { margin: 0 6px; }
#nav-sub #links a.collection { display: inline; }
#nav-sub #links a.q10 { position: absolute; top: 15px; left: 0; width: 150px; background: url("/gr/bullet-pink.png") 0 center no-repeat; padding-left: 10px; }
#nav-sub #links a.q09 { position: absolute; top: 15px; left: 50px; width: 150px; background: url("/gr/bullet-pink.png") 0 center no-repeat; padding-left: 10px; }
#nav-sub #links a.about { display: inline; }
#nav-sub #links a.creativedirector { position: absolute; top: 15px; left: 0; width: 150px; background: url("/gr/bullet-pink.png") 0 center no-repeat; padding-left: 10px; }
#nav-sub #links a.press { display: inline; }
#nav-sub #links a.mediacoverage { display: inline; background: url("/gr/bullet-pink.png") 10px center no-repeat; padding-left: 20px; }
#nav-sub #links a.pressreleases { display: inline; }
#nav-sub #links a.events {}
#nav-sub #links a.register {}
#nav-sub #links a.careers { margin-bottom: 5px; 	}
#nav-sub #links a.wheretobuy { margin-bottom: 5px; }
#nav-sub #links a.contact {}

/*======= COLLECTIONS BUTTONS
=================================================*/
#collbuttons { margin: 250px auto 0 auto; overflow: auto; }
.buttons {  width: 241px; height: 183px; float: left; border: 0; }
	.buttons a { display: block; width: 100%; height: 100%; }
	.lithium { background: url("/gr/button-lithium.png") top no-repeat; }
	.mandisa { width: 241px; height: 183px; background: url("/gr/button-mandisa.png") top no-repeat; }
	.zinc { width: 241px; height: 183px; background: url("/gr/button-zinc.png") top no-repeat; }
.buttons:hover { background-position: bottom; }

#collectionindex { position: absolute; bottom: 140px; left: 0; width: 990px; }
#zoom { height: 410px; margin: 0; padding: 0; z-index: 3000; }
#zoom img { background: url("/gr/loading.gif") no-repeat; text-align: center; margin-top: -30px; }
* html #zoom { /*IE only style*/ height: 400px; }

#quotes { margin: 20px 20px 0 10px; text-align: left; color: #999; }
#quotes p { margin: 0; padding: 0 10px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; }
#quotes .credit { color: #000; font-style: normal; }

/*======= FOOTER
=================================================*/
#footer { position: absolute; bottom: -75px; right: 0; color: #555; xfont-weight: bold; padding: 10px 20px 0 0; text-align: right; text-transform: uppercase; z-index: 200; font-size: 0.85em; }
#footer a,a:visited { color: #888; text-decoration: none; }
#footer a:hover { color: #888; }
.sep { margin: 0 3px; }
#credits { margin-top: 10px; text-transform: none; font-weight: normal; }

/*======= EVENT RSVP FORMS/TABLES
=================================================*/
#rsvp { width: 100%; margin-top: 25px; }
#rsvp td { width: 25%; vertical-align: top; }
#rsvp td+td { padding-left: 50px; width: 75%;  }
#rsvp input, #rsvp textarea { border: 1px solid #555;  }


/*======= MISC
=================================================*/
a { color: #888; text-decoration: none; }
em { font-style: italic; }
a:visited { color: #888; }
a:hover { color: #000; }
.line { border: 0; height: 1px; width: 50px; border-bottom: 1px dotted #999; margin-bottom: 10px; }
hr { width: 50px; border-style: none; border-bottom: 1px dotted #999; color: #000; margin: 10px 0; background: #000; }
.white { color: #fff; }
.pink { color: #FF3366; }
.small { font-size: 85%; }
.img-left { float: left; margin: 0 15px 5px 0; }
.img-right { float: right; margin: 0 0 5px 15px; }
.img-left, .img-right img { padding-bottom: 30px; }
input, select, textarea { border: 1px solid #777; border-color: #222 #444 #444 #222; font-size: 1.0em; color: #fff; font-family: Georgia, "Times New Roman", Times, serif; background-color: transparent; xfilter: alpha(opacity=85); x-moz-opacity: 0.85; xopacity: 0.85; }
select { background-color: #000; color: #fff; }
input:focus, select:focus, textarea:focus { border: 1px solid #f06; }
body#adl.contact textarea { width: 300px; height: 100px; }
.designerswimwear { font: bold 100% Georgia, "Times New Roman", Times, serif; text-transform: uppercase; color: #fff; }
.button { background-color: #000; border: 1px solid #666; color: #FFF; }
.indent { margin-left: 20px; }
.indent2 { margin-left: 35px; }
.event { width: 50%; margin-top: 25px; border-bottom: 1px dotted #ccc; padding: 10px 0; }


/*======= MEDIA COVERAGE PAGE
=================================================*/
/* root element for the scrollable. 
	when scrolling occurs this element stays still. */
div.scrollable {	
	/* required settings */
	position:relative; overflow:hidden; width: 750px; height: 320px;
	/* custom decorations */
	xpadding:10px 0;	xborder:1px outset #ccc; xbackground-color:#efefef;	
}

/* 	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element. */
div.scrollable div.items { /* this cannot be too large */ width:60000em; position:absolute; clear:both; /* decoration */ margin-left:10px; }

/* single scrollable item */
div.scrollable div.items div { float:left; margin-right: 40px; 
	
	/* custom decoration */  /*  WIDTH MUST BE SET TO THE WIDEST IMAGE IN THE ITEMS - CS */
	xtext-align:center; width: 420px; xpadding:25px 0px; margin-top: 5px; xborder:1px outset #ccc; xbackground-color: #ddd; xmargin-right: 20px; x-moz-border-radius:5px; text-transform: uppercase; color: #fff; }

div.scrollable div.items div img { display: block; margin-bottom: 5px; }
/* active item */
div.scrollable div.items div.active { xborder:1px inset #ccc; xbackground-color:#fff; }

/* this makes it possible to add next button beside scrollable */
div.scrollable { float:left; }

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { display:block; width:18px; height:18px; background:url("/gr/left.png") no-repeat; float:left; margin: 130px 10px 0 10px; cursor:pointer; }

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }

/* disabled navigational button */
a.disabled { visibility:hidden !important; }

/* next button uses another background image */
a.next, a.nextPage { background-image:url("/gr/right.png"); clear:right; }

/*********** navigator ***********/

/* position and dimensions of the navigator */
div.navi { margin: 0 auto; width:550px; height:20px; }

/* items inside navigator */ div.navi a { width:8px; height:8px; float:left; margin:3px; background:url("/gr/navigator.png") 0 0 no-repeat; cursor:pointer;	}

/* mouseover state */
div.navi a:hover { background-position:0 -8px; }

/* active state (current page state) */
div.navi a.active { background-position:0 -16px; }