@charset "UTF-8";
/* Filmet Professional Imaging */
/* Style Sheet - Global Settings (shared by all sub-structures) */

/*
  TABLE OF CONTENTS:
	1. Defaults
	2. REDUX
	3. Base Layout
	4. Links
	5. Typography
	. Alive Chat
	. Clearfix - float clearing hack
	. Lightbox
	
  Check for Deletion:
	Form Parameters

*/

/* ------ 1. DEFAULTS ------ */
* { /* Negate all browser defaults to all tags */
	margin:0;
	padding:0;
	}

body {
	font:12px Arial, Helvetica, sans-serif;
	font-weight:normal;
	background:#ffffff;
	color:#000000;
	}

a img {
	border:none;
	}

img {
	border:0;
	}

hr {/* Firefox/Gecko will not style horizontal rules - use div tag with empty div child */}
	.hrule {
		width:90%;
		height:6px;
		padding-top:3px;
		margin:0 auto;
		}
	.hrule div {
		width:100%;
		border-top:1px solid #f3b400;
		padding-bottom:5px;
		}

/* ------ 2. REDUX ------ */
.blue {color:#007ac2;}

#main-nav {
	width:870px;
	height:27px;
	padding:0 15px;
	margin:3px auto;
	text-align:left;
	background:url(file:///Data/Website/DRAGONFLY/img/asset/nav-barBG.jpg);
	}
	
	#main-nav a {
		border:none;
		padding:0 10px;
		}


/* ------ 3. BASE LAYOUT ------ */
#masthead, #navi, #footer {
		width:900px;
		margin:0 auto;
		}
	#navi { /* contained within #masthead */
		text-align:center;
		}
	#extraNoteSpace {
		padding:0 20px 5px;
		text-align:center;
		}
	#footer {
		clear:both;
		}
	
#wrapper, #content-Top, #content-Middle, #content-Bottom { /* Content container for light blue backdrop */
		width:900px;
		}
	#wrapper {
		margin:0 auto 10px;
		}
	#content-Top {
		height:19px;
		background:url(../images/global/BG_content-top.jpg) no-repeat;
		}
	#content-Middle {
		padding-left:12px;
		background:url(../images/global/BG_content-mid.jpg) repeat-y;
		}
	#content-Bottom {
		height:19px;
		background:url(../images/global/BG_content-bot.jpg) no-repeat;
		}
	
/* ------ 4. LINKS ------ */

a:link, a:visited { /* Basic link structure */
		text-decoration:none;
		}
	a:link {
		color:#0071ba;
		}
	a:visited {
		color:#175781;
		}
a:hover, a:active {
		text-decoration:underline;
		}
	a:hover {
		color:#c80a39;
		}
	a:active {
		color:#ff9900;
		}

.copy a:link, .copy a:visited { /* Alternate linkset - highlight links contained in text copy */
		text-decoration:none;
		border-bottom:1px dashed #cccccc;	
		}
	.copy a:hover {
		text-decoration:none;
		border-bottom:1px solid #c80a39;
		}
	.copy a:active {
		text-decoration:none;
		border-bottom:1px solid #ff9900;
		}
	
/* Downloadable Item Link Set - Catalog Green */
  a.download {  
	color:#00ab33;
	}
  a.download:visited {
  	color:#217b37;
	}
  a.download:hover {
	color:#f3b400;
	}
	
/* Jump Link Set (move to another section) - Catalog Gold */
  a.jumplink {
	color:#ff9900;
	}
  a.jumplink:visited {
  	color:#a77520;
	}
  a.jumplink:hover {
	color:#c80a39;
	}

	
/* ------ 5. TYPOGRAPHY ------ */

.tempText { /* Highlights dummy text in areas that need copy written */
	/*color:#ff00ff;*/
	color:#cc0000;
	background:#ff9999;
	}
.editText { /* Highlights text that needs to be proofread and edited */
	color:#660099;
	background-color:#ffff33;
	}
.proofread { /* HIghlights links on the Sitemap that need to be proofread in order to use it as a checklist */
	background-color:#99CCFF;
	font-weight:bold;
	}

.copy {padding:6px 0;}
.newcopy {
	line-height:1.25em;
	}

.copyright { /* Copyright info in #footer */
	margin:5px;
	padding-bottom:5px;
	font-size:10px;
	color:#999999;
	text-align:center;
	}

.subNavi { /* Text link navigation in #footer */
	margin:5px;
	padding-bottom:5px;
	color:#666666;
	text-align:center;
	}

.phototidings { /* small copyright tag for the Photo Tidings templates as requred by the license */
	color:#cccccc;
	font:8px italic;
	text-align:right;
	padding-top:-10px;
	margin-right:30px;
	}
	
.highlight { /* Highlights certain text in copy text to stand out */
	color:#0071ba;
	font-weight:bold;
	}
.highlightGLD {
	color:#fbac18;
	font-weight:bold;
	text-transform:uppercase;
	}
.highlightGRN {
	color:#00ab33;
	font-weight:bold
	}

.disclaimer {
	color:#999999;
	font:12px Arial, Helvetica, sans-serif;
	font-style:italic;
	text-align:right;
	padding-top:5px;
	}

.floaterL {
	float:left;
	display:inline;
	padding:5px;
	}
	
.floaterR {
	float:right;
	display:inline;
	padding:5px;
	}

/* ------ FORM PARAMETERS ------ */
.newAccount {
		margin:5px;
		width:145px;
		}
	.newAccount input {
		display:block;
		background-color:#e6eef0;
		margin:2px 0 5px;
		width:140px;
		}
	.newAccount p {
		width:120px;
		}
	.newAccount input.submitButton {
		margin:10px auto;
		}
	.newAccount input.floatButton {
		width:20px;
		height:20px;
		float:left;
		display:inline;
		margin:4px 5px 5px 0;
		}
	
/* ------ TABLES ------ */
.tip {} /* Table structure for Connect Tips scattered throughout pages */
	.tip td {
		vertical-align:top;
		}
	.tipIcon {
		width:40px;
		}
		.tipIcon {
			width:40px;
			height:40px;
			}
	.tipText {
		padding-top:3px;
		}
	.tipText p {
		padding:2px 5px 0;
		border-top:1px dashed #9bb5db;
		}
		
.icon {} /* Table structure for small icons with links */
	.icon td {}
	.iconPic {
		/*padding:2px;*/
		text-align:right;
		vertical-align:top;
		}
	.iconText {
		/*padding:2px;*/
		vertical-align:middle;
		}

.comparison {} /* Table structure for comparing items that follows the original catalog color structure */
	.comparison td {
		border-top:1px solid #ffffff;
		border-right:1px solid #ffffff;
		padding:2px 5px;
		}
	/* td classes for use with table cells */
	.ditem { /* Left-most column, Paler Blue */
			background:#ced9ee;
			text-align:left;
			vertical-align:top;
			}
		.ditem img {
			vertical-align:middle;
			}
	.dvalue, .dselect, .ddeluxe {
			text-align:center;
			vertical-align:top;
			}
		.dvalue { /* Pale Blue */
			background:#9bb5db;
			}
		.dselect { /* Pale Green */
			background:#add4a5;
			}
		.ddeluxe { /* Pale Gold */
			background:#f9d594;
			border-right:none;
			}
	.comparison td ul {
		border:none;
		margin-left:0;
		text-align:left;
		}
	/* th classes for the label row */		
	.hitem, .hvalue, .hvalueW, .hselect, .hselectW, .hdeluxe, .hblue {
			height:18px;
			color:#ffffff;
			font-variant:small-caps;
			}
		.hitem { /* Left-most column; Left edging - Blue */
			background:url(../images/global/BG_tableEdge-BlueLeft.png) left no-repeat;
			}
		.hvalue { /* Blue edging into Green */
			background:url(../images/global/BG_tableEdge-Blue.png) right no-repeat;
			}
		.hvalueW { /* Blue edging into White for use as right-most column */
			background:url(../images/global/BG_tableEdge-BlueW.png) right no-repeat;
			}
		.hselect { /* Green edging into Gold */
			background:url(../images/global/BG_tableEdge-Green.png) right no-repeat;
			}
		.hselectW { /* Green edging into White for use as right-most column */
			background:url(../images/global/BG_tableEdge-GreenW.png) right no-repeat;
			}
		.hdeluxe { /* Right-most column; Right edging - Gold */
			background:url(../images/global/BG_tableEdge-Gold.png) right no-repeat;
			}
		.hblue { /* Blue tile image with no edging for a solid row to section off the table */
			background:url(../images/global/BG_tableTile-Blue.png) repeat-x;
			}
	
  /* Color Swatches */
  	.swatch {
		padding:3px 0 3px 12px;
		}
	.swatch img {
		padding:1px;
		}

.clear {clear:both; /*line-height:0;*/} /* Extra float clear for IE7 - used in new account form */

/* ------MISCELLANEOUS - check for deletion ------ */
.secondaryHead {color:#0072bb; font-size:16px; letter-spacing:1px; font-weight:lighter; padding:5px 0;}

ul.noindent {margin-top: 0px; margin-bottom: 0px; list-style-type: disc;}
ul.nobullet {margin-top: 0px; margin-bottom: 0px; list-style-type: none;}


/* ------ ALIVE CHAT ------ */
#aliveChat {
	width:175px;
	text-align:center;
	}
	#aliveChat img {
		display:block;
		padding:3px 0;
		margin:0 auto;
		cursor:pointer;
		}
	#aliveChat a {
		color:#666666;
		font-style:italic;
		}
		
/* ------ POP-UP INFORMATION ------ */
#newsletterSignup { /* full-size overlay container */
	visibility:hidden;
	display:none;
	z-index:200;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	}
.popupBG {
	width:100%;
	height:100%;
	top:0;
	left:0;
	padding-bottom:3000px;
	margin-bottom:-3000px;
	z-index:205;
	background:#000000;
	opacity:0.75;
	filter:DXImageTransform.Microsoft.BasicImage(opacity=0.75);
	}
.popupArea {
	width:634px;
	background:#ffffff;
	margin:0 auto;
	z-index:210;
	}
	

/* =+=+=+=+=+= FLOAT FIX - DO NOT CHANGE =+=+=+=+=+= */
/* This set of styles deals with clearing of the floats. Please see http://www.positioniseverything.net/easyclearing.html */

.clearfix:after, #content-Middle:after, .icon:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
	
.clearfix, #content-Middle, .icon {
	display:inline;
	}
	
/* Hides from IE-mac \*/
* html .clearfix, * html #content-Middle, * html .icon {
	height:1%;
	}
	
.clearfix, #content-Middle, .icon {
	display:block;
	}
/* End hide from IE-mac */


/* =+=+=+=+=+= LIGHTBOX - DO NOT CHANGE =+=+=+=+=+= */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #0071ba;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 2px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/special/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/special/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/special/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #0071ba;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #ffffff; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; height: 22px; float: right;  padding-bottom: 0.7em; }	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000000;
	}
	
/* ------ FONT KITS (temporary) ------ */
/* 
Copyright (c) 2011, Pablo Impallari (www.impallari.com|impallari@gmail.com),
Copyright (c) 2011, Igino Marini. (www.ikern.com|mail@iginomarini.com),
with Reserved Font Names "Lobster" and "Lobster Two".

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is available with a FAQ at: http://scripts.sil.org/OFL
*/


@font-face {
    font-family: 'Lobster_Two-bold';
    src: url('fonts/LobsterTwo-Bold-webfont.eot');
    src: url('fonts/LobsterTwo-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LobsterTwo-Bold-webfont.woff2') format('woff2'),
         url('fonts/LobsterTwo-Bold-webfont.woff') format('woff'),
         url('fonts/LobsterTwo-Bold-webfont.ttf') format('truetype'),
         url('fonts/LobsterTwo-Bold-webfont.svg#lobster_twobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Lobster_Two-bold_italic';
    src: url('fonts/LobsterTwo-BoldItalic-webfont.eot');
    src: url('fonts/LobsterTwo-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LobsterTwo-BoldItalic-webfont.woff2') format('woff2'),
         url('fonts/LobsterTwo-BoldItalic-webfont.woff') format('woff'),
         url('fonts/LobsterTwo-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/LobsterTwo-BoldItalic-webfont.svg#lobster_twobold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Lobster_Two-italic';
    src: url('fonts/LobsterTwo-Italic-webfont.eot');
    src: url('fonts/LobsterTwo-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LobsterTwo-Italic-webfont.woff2') format('woff2'),
         url('fonts/LobsterTwo-Italic-webfont.woff') format('woff'),
         url('fonts/LobsterTwo-Italic-webfont.ttf') format('truetype'),
         url('fonts/LobsterTwo-Italic-webfont.svg#lobster_twoitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LobsterTwo_regular';
    src: url('LobsterTwo-Regular-webfont.eot');
    src: url('LobsterTwo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('LobsterTwo-Regular-webfont.woff2') format('woff2'),
         url('LobsterTwo-Regular-webfont.woff') format('woff'),
         url('LobsterTwo-Regular-webfont.ttf') format('truetype'),
         url('LobsterTwo-Regular-webfont.svg#lobster_tworegular') format('svg');
    font-weight: normal;
    font-style: normal;

}