/* Dynamic Art and Text  
 * last update: August 2017 
 * PopUpWeb Template Master */

@import url(DATbase17puw.css); /* = Reset styles */
@import url(popUser17.css); /* = content styles available to Admin User via Wordpress and Penpages */
@import url(jQ-dd-tanaka.css); /* = hnav with dropdown menus */
@import url(customFONT.css); /* = embed custom font */

/* ======== STRUCTURAL DIVS with Attributes and Classes ====*/

body { margin: 0px; padding: 0px; font-family:Helvetica, Arial, Verdana, sans-serif; font-size: 16px; line-height:1; color:#666; background-color: #555; background-image: url(../images/bgGreyStipple.png); background-repeat: repeat; }
#bgWrap { width: 1250px; height: auto; min-height: 100%; margin:0 auto; padding:0; }
#bgWrap.main { background-image: url(../images/popupHomepage.jpg); background-repeat: no-repeat; background-position: center top; }
#bgWrap.category { background-image: url(../images/categoryPage.jpg); background-repeat: no-repeat; background-position: center top;}
#banner { margin:0px auto; width:1250px; height: 120px; }
#banner.main { background-color: #900; background-image: url(../images/popupBanners.png); background-repeat: no-repeat; }
#buffer.home {width: 1200px; height: 570px;}
#buffer.category {width: 1200px; height: 245px; margin:0; padding:0;}
#mainContainer { width:1200px; margin:0 auto; }
#content { width:auto; height:auto; margin:0 auto; clear:both; padding:0; }
#content.basic {margin-top:30px; margin-left:30px;}
#content.paper { background-image: url(../images/paperBG.png); background-repeat: repeat-y; }
#columnLeft { float:left; width:500px; box-sizing:border-box; margin:0 50px 0 100px; padding:0; }
#columnRight { float:left; width:400px; margin:0 0px ; padding:0 30px; border-left-width:2px; border-left-style:dotted; border-left-color:#999999;}
#footer { clear:both; width:1250px; margin:0 auto; padding: 10px 0; text-align:center; color:#fff; height:auto; box-sizing:border-box;}

/* NOTE popup windows need to be replaced with new methods */
#bgWrap.pop {	width: 550px; background-color: #FFFFFF;}
#popBanner {width:auto; height:100px; padding-top:1px 0; background-color:#000; text-align:left; color:#fff; }
#popContent {width:500px; margin:0 auto;}
img.popbanner {float:right; padding-right:10px;}
/* ---- MORE DIVS for structure ----
#contentLeft.boxed { background-color:#eee; margin-top: 30px; padding-top: 0}
#contentLeft h4.title { font-family: 'DaysRegular', Verdana, sans-serif; font-size: 1.25rem; color: #990000; font-style:normal; padding-bottom:5px;}
#contentRight.fixed {position: fixed;}
#contentRight h2 {	font-size: .875rem;	padding-bottom: 0px;	font-style: italic;	line-height: 1.4;	letter-spacing: .05em;}	
#contentRight h3 {	font-size: 1.25rem; line-height: .9; 	padding-bottom: 0px;	color: #999999;} */

/* ------- Custom Pages Positional Containers ----
#bgWrap.custom { width: 830px; height: auto; min-height: 100%; margin:auto; margin-top:0; background-color: #333; }
#popWrap
#popBanner*/

/* ===== BOXES - use with DIVs */
.paperTop { height: 86px; background-image: url(../images/paperTOP.png); background-repeat: no-repeat; background-position: center top; margin:0; padding:0; }
.frameCenter {width:1100px; margin:0 auto; } /* put the floating columns inside this DIV-class */
.frameCenter:after { content: "";  display: table;  clear: both; } /* when the DIV-class is closed all the floats are cleared */
.clearFloats {clear:both;}
.boxL {	float:left; padding:8px 10px 0 0;	height:auto;	width:auto;}
.boxR { float:right; padding:0px 50px 0 0; height:auto; width:auto; }
.boxC { margin: 20px 0 0 100px ;}
.scroller {width:550px; height:200px; overflow:scroll; font-family:Arial, Helvetica, sans-serif;
	border-width:thin;	border-style:solid;color: #000066;}
.dropBox {background-color: #eee; margin-top: 100px;}

.bgimg1 { background-image: url(../images/step1sm.png); background-repeat: no-repeat; background-position: center center; }
.bgimg2 { background-image: url(../images/step2sm.png); background-repeat: no-repeat; background-position: center center; }
.bgimg3 { background-image: url(../images/step3sm.png); background-repeat: no-repeat; background-position: center center; }
.bgimg4 { background-image: url(../images/step4sm.png); background-repeat: no-repeat; background-position: center center; }

/* ======== ELEMENTS with Attributes and Classes ====*/

h1, h2, h3 {font-family: "Gill Sans", Helvetica, sans-serif; font-weight: lighter;}
h4, h5, h6 {font-family: Helvetica, Arial, sans-serif; line-height:1.1; padding-bottom: 7px}
h1 { font-size: 2rem; line-height:1;}
h2 {font-size: 1.5rem;  line-height:1; }
h3 {font-size: 1.3rem;  line-height:1;	}
p, ol, ul, td, pre {	font-size: .875rem;	line-height:1.5; font-weight:200;}
samp {			font-size: 1.3rem;		}	
hr.fine { border-top-width: thin; border-top-style: solid; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-color: #9C0; margin-bottom: 5px; width: 100%; }
input, textarea, select {color:#036}
code {font: normal .75rem "Courier New", Courier, monospace;	white-space: nowrap;	padding: 0 2px;}
pre code {
	display: block;	clear: both;
	background: url(../images/code-bg.gif);
	width: 470px;	line-height: 1.4;
	margin: 5px 0 15px; padding: 10px;
	color: #333;	border: solid 1px #ccc;
	overflow: auto;	white-space: pre;}


/* ---- LISTS ---- */
ol li.flush {margin-left:35px;}
li.bullet  {list-style: square outside; margin-left: 20px;} /*not working properly ****** */
li.bullet2  {list-style: circle; margin-left: 20px;} /*not working properly ****** */
ul.services {list-style:none; font-size: .875rem; line-height:150%; font-style:italic; letter-spacing:.05rem;}
ul.services li {display:inline; padding:0 3px 0 0;}
ul.services li:before {content:"\2022";}
ul.services li.nopipe:before {content: none;}

/* ---- TABLES ---- */
table.cellBottom td {	border-bottom-width: 1px;	border-bottom-style: solid;	line-height:2;}
tr.header td {font-weight:bold;}
tr.headerSmall td {font-weight:bold; font-size:.6rem;}
td.cellBottom2 {	border-bottom-width: 1px;	border-bottom-style: solid;}
td.tight  {	line-height: 80%;}

	
/* ======== ALL other CLASSES ======= */

.navBar  /*horizontal - refer imported CSS */{ padding: 55px 30px 0 300px; }
.navBar p { color: #CF0; text-align:right; }
.bannerTitle { margin: 0 0 0 200px; padding-top: 28px; height:auto; font-family:Helvetica, sans-serif; text-align:center; color:#777; font-style: italic; font-weight: lighter; }
.leadTight { line-height:.9; }
.leadLoose { line-height: 1.3; }
.leadLooser { line-height: 1.7; }
.leadVLoose { line-height: 2; }
.legalese > p {font-size: 90%;} 

/* --- indents----  */
.spacer {width:10px;}
.indentSmall {text-indent:15px;}
.indentMed  {margin-left:30px}
.indentBig {margin-left:50px}	

/* border, objects, other effects */
.borderDot {border:1px dotted #999999;}
.borderLDot {border-left-color:#999999;	border-left-style:dotted; border-left-width:1px;}
#ffffff;}
.brBorder {	border-width: 1px;	border-color: #666666;	border-bottom-style: solid;	border-right-style: solid; padding-top: 5px}
.bBorder {	border-width: 1px;	border-color: #666666;	border-bottom-style: solid; padding-bottom: 10px; padding-top: 5px}


/* --------------- ANCHORS ----------- */
A:link {	color: #336611;	text-decoration: underline;}
A:visited {	color: #336611;	text-decoration: underline;}
A:hover {	color: #990000;	text-decoration: none;}
A:active { color: #FF0000;  }

A.linkOther { font-size: 0.75rem; padding: 2px 4px; background-color: #036; }
A.linkOther:link { color: #FFF;  text-decoration: none; }
A.linkOther:visited { color: #FFF; text-decoration: none;}
A.linkOther:hover {	color: #000; background-color: #fff;}
A.linkOther:active{ color: #FF0000; background-color: #036; }

A.linksoft {	color: #FFFFFF;	text-decoration: none; }
A.linksoft:link {	color: #FFFFFF;	text-decoration: none; }
A.linksoft:visited {text-decoration: none;}
A.linksoft:hover {	color: #f00;	text-decoration: none; }
A.linksoft:active {	color: #f00;	text-decoration: none; }