* {margin:0;padding:0;} 

html, body {
	/*background: url("images/stripe_bg.jpg");
	background-image: url(http://site.waddleswaddle.com/newsite/_inc/imgs/wns-baby-belly-inkstroke-small.png);
	background-position: 100% 17%;
	background-repeat: no-repeat;
	background-attachment: fixed;*/
	color: #9E5A95;	
	font-family: "MS Trebuchet", Arial, sans-serif;
	margin: auto;
	width: 100%;
	height: 100%;
	overflow: none;
}

#site-container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}


#logo-buffer {
	margin-top: 6px;
	}

#logo {
	z-index: 9999;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0px;
	background-image: url(http://site.waddleswaddle.com/newsite/_inc/imgs/wns-web-logo-transparent-concept.png);
}

#page-container {
	margin: auto;
	margin-top: 70px;
	width: 100%;
	height: auto;
	overflow: none;
	padding-bottom: 150px;
}

#page-content {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 600px;
/*	border-right: 1px solid #dedede; */
	padding: 3px;
}

#store-content {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 900px;
/*	border-right: 1px solid #dedede; */
	padding: 3px;
}

#newstore-content {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 1050px;
	height: 100%;
/*	border-right: 1px solid #dedede; */
	padding: 3px;
}

#comment-content {
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 3px;
	margin-bottom: 3px;
	width: 730px;
/*	border-right: 1px solid #dedede; */
	padding: 3px;
}


#long-content {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 3px;
	padding-bottom: 3px;
	width: 550px;
	height: 445px;
	overflow: auto; /*visible/scroll*/
	background-color: #FFFFFF;
}

#comment-content-inner {
	margin-left: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding: 3px;
	width: 715px;
	overflow: hidden; /*visible/scroll*/
	background-color: #FFFFFF;
}

#page-supplement {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	width: auto;
	height: auto;
/*	border-bottom: 1px solid #dedede;  */
	border-left: 1px solid #FFF;
	padding: 3px;
	position: absolute;
	left: 615px;
	top:125px;
	float: right;
}

#page {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 3px;
	width: auto;
	height: auto;
	overflow: auto;
	/*border: 1px dashed #000;*/	
}

#pane-wrapper {
	font-family: "MS Trebuchet", sans-serif;
	font-size: 90%;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 3px;
	padding: 0px;
	width: 99%;
	height: auto;
	overflow: auto;
	/*border: 1px dashed #000;*/	
}

#intro-pane {
	margin: 0 auto;
    height: 420px;
    width: 100%;
	overflow:auto;
	
}

#info-box {
	border: 1px solid #c9d687; 
	padding: 5px;
	margin-right: 10px;
	margin-left: 10px;
	color: #9E5A95;
	
}

#header-bar {
	padding: 6px 0px 0px 0px;
	background-color: #c9d687;
	color: white;
	height: 25px;
	width: 100%;
	margin-top: 0px;
}

/*#footer-bar {
	padding: 6px 0px 0px 0px;
	background-color: #555;
	color: white;
	height: 150px;
	width: 100%;
	margin-bottom: 0px;
	position: relative;
	bottom: 0px;
}
*/

#footer-bar {
	position: relative;
	bottom: auto;
	margin-top: -160.5px; /* negative value of footer height */
	height: 160px;
	clear: both;
	background-color: #c9d687;
	overflow: auto;
	
} 

#footer-right-content {
	font-family: Verdana, Arial, sans-serif;
	color: white;
	width: 250px;
	/*height: auto;*/
	float: right;
	margin: 3px;
	padding: 3px;
	position: static; /*static/relative/absolute/fixed*/
	bottom: auto;
}

#footer-left-content {
	font-family: Verdana, Arial, sans-serif;
	color: white;
	width: 350px;
	/*height: auto;*/
	float: left;
	margin: 3px;
	padding: 3px;
	position: static; /*static/relative/absolute/fixed*/
	bottom: auto;
}

#footer-middle-content {
	font-family: Verdana, Arial, sans-serif;
	color: white;
	height: auto;
	width: 150px;
    margin-left: auto;
	margin-right: auto;
	text-align: center; 
	bottom: auto;
	padding-top: 5px;
}

/* CLEAR FIX - found on cssstickyfooter.com */
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


#menu {
	 /*right:0;*/
	 width:100%;
}
#menu ul {
	position:absolute;
	top:0;
	right:0;
	/*width:100%;*/
	height:25px;
	padding:0;
	margin: 0px 0 0px 0px; 
	list-style-type:none;
}
#menu a {
	float:right;
	width:6em;
	height:18px;
	text-decoration:none;
	text-align: center;
	color:white;
	background-color:#c9d687;
	padding:0.4em 0.6em;
	/*border:1px solid white;*/
}
#menu a:hover { 
	background-color:#9E5A95;
}
#menu li {
	display:inline;
}

h1 {
	color: #9E5A95;
	font-family: helvetica;
	font-size: 2.0em;
	/*line-height: 3.5em;*/
	margin: 0px;
	margin-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
}

h2 {
	color: #9E5A95;
	font-family: helvetica;
	font-size: 1.5em;
	padding-top: 3px;
	padding-bottom: 5px;
	margin: 0px;
	margin-left: 1px;
}

h3 {
	color: #9E5A95;
	font-size: 1.12em;
	font-weight: bold;
	margin: 0px;
	margin-left: 1px;
	padding-top: 5px;
}

h4 {
	color: #9E5A95;
	font-size: 1.00em;
	font-weight: bold;
	margin: 0px;
	margin-left: 0px;
	padding: 0px;
}

p {
	color: #9E5A95;
	font-family: "MS Trebuchet", Arial, sans-serif;
	font-weight: normal;
	line-height: 1.45em;
	margin: 3px;
	/*margin-left: 5px;*/
	padding: 5px;
}

.smaller {
	font: 75% "Trebuchet MS", Verdana, sans-serif;
}

.medium {
	font: 85% "Trebuchet MS", Verdana, sans-serif;
}

a {
	color: #c9d687;
	text-decoration: none; 
	padding 1px;
}

a:hover {
	color: #9E5A95;
	text-decoration: none;
	padding 1px;
}

#buffer {
	padding: 5px;
}

.section-description {
	font-size: 80%;
	font-style: italic;
	font-weight: bold;
	position: relative
}

.section-title {
	background: white url(/_inc/imgs/yellow_stripe.gif) repeat;
	border: 2px solid white;
	padding: 0.25em 0.25em 0.25em 0.25em;
	text-transform: uppercase;
	font-size: 90%;
	letter-spacing: 0.1em;
	display: block;
	position: relative
}

.button-style-1 {
	border: 2px solid #0ca5dd; padding: 2px;
	background-color: #cecece;
	width: 120px;
	display: block;
	text-align: center;
}

#site-name {
	text-transform: uppercase;
	font-size: 90%;
	letter-spacing: 0.1em;
	color: #0ca5dd;
	margin: 2px;
	margin-left: 2px;
	padding: 2px;

}

.divider {
	border-top: 1px solid #9E5A95;
	padding: 5px;
	margin-top: 5px;
	margin-right: 3px;
}

/*~~~~~~ E X T R A S ~~~~~*/





/* begin css tabs - i like this approach instead of javascript tabs.  simple, looks decent.*/
ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: 12px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #9E5A95; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}
ul#tabnav li { /* do not change */
display: inline;
}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #9E5A95; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}
ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #9E5A95; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #fff; /* set unselected tab background color as desired */
color: #9E5A95; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}
ul#tabnav a:hover { /* settings for hover effect */
background: #9E5A95; /* set desired hover color */
color: #fff;
}
/* end css tabs */





/* some decent fields and fieldset CSS i tend to use 
input[type="text"], textarea {font-family: Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;}
input[type="text"], textarea {border: 1px solid #cccccc; color: #333333; margin: 0; padding: 4px 3px 3px 3px; line-height: 1.0em;}
input[type="password"] {border: 1px solid #cccccc; color: #333333; margin: 0; padding: 2px 3px; line-height: 1.0em;}
textarea {line-height: 1.125em; padding-bottom: 2px;}
*/

form {font-size: 1.0em;}
fieldset {font-size: 1.0em; padding: 0 0 0 0; margin: 0 0 0 0; width: 500px;}
fieldset h2 {color: #444; letter-spacing: -.02em; font-size: 2.0em;}
fieldset p {color: #444; letter-spacing: -.02em;}
fieldset.buttons {margin: 12px 0 0 0; padding: 12px 4px; border-top: 1px solid #e0e0e0; text-align: right;}
fieldset.buttons input[type=submit], fieldset.buttons input[type=button], fieldset.buttons input[type=reset] {font-size: 1.5em; font-weight: bold; padding: 6px 10px; margin: 0 0 0 4px;}
fieldset fieldset {position: relative; margin: 0 0 0 120px; padding: 0; border: none;}
fieldset fieldset label {position: absolute; top: 0; left: -120px; width: 110px; text-align: right; font-size: 1.3em; line-height: 1.0em; font-weight: bold; padding: 7px 0 0 0; color: #444;}
fieldset fieldset p {font-size: 1.3em; line-height: 1.125em; padding: 0 0 5px 0; color: #444;}
fieldset fieldset p.note {font-size: 1.1em; color: #666;}
fieldset fieldset p input[type=text], fieldset fieldset p textarea {width: 200px; padding: 4px 4px 3px 4px; font-size: 1.0em; line-height: 1.0em;}
fieldset fieldset p input[type=password] {width: 200px; padding: 0 4px 2px 4px; font-size: 1.0em; line-height: 1.0em;}
fieldset fieldset p textarea {line-height: 0.5em; padding: 4px; vertical-align: top;}
fieldset fieldset.inverse {}
fieldset fieldset.inverse label {position: relative; top: 0; left: 0; width: auto; font-weight: normal;}
fieldset fieldset.inverse input[type=checkbox] {position: absolute; top: 0; left: -28px; padding: 0; margin: 0;}
fieldset fieldset.flat {padding: 0;}
fieldset fieldset.flat label {position: relative; top: 0; left: 0; width: auto;}




/* Panes CSS.  AKA Slides, Rollbar etc.  I use this often */
div.dynarch-rollbar { background-color: #FFF; border: 3px solid #c9d687; width: 97%; padding-left: 1px; padding-right: 1px; margin-left: 1px; margin-right: 1px;}
/* div.dynarch-rollbar table.dynarch-inner-table { border-collapse: collapse; } */
div.dynarch-rollbar table.dynarch-inner-table td.dynarch-inner-td { vertical-align: top; }
div.dynarch-rollbar-container { position: relative; }
div.dynarch-rollbar-container div.dynarch-roll-center {
  position: relative;
  overflow: hidden;
  background-color: #FFF;
}
div.dynarch-rollbar-container a.dynarch-roll-nav {
  font-size: 1px; line-height: 1px; text-decoration: none;
  cursor: default;
  width: 11px;
  top: 0;
  position: absolute;
  z-index: 11;
  -moz-border-radius: 0;
}
div.dynarch-rollbar-container a.dynarch-roll-left {
  background: #FFF url("img/larrow.gif") no-repeat 1px 50%;
  left: 0;
}
div.dynarch-rollbar-container a.dynarch-roll-right {
  background: #FFF url("img/rarrow.gif") no-repeat 1px 50%;
  right: 0px;
}
div.dynarch-rollbar-container a.dynarch-nav-disabled {
  background-color: #FFF;
}
div.dynarch-rollbar-container a.dynarch-left-disabled { background-image: url("img/larrow-disabled.gif"); }
div.dynarch-rollbar-container a.dynarch-right-disabled { background-image: url("img/rarrow-disabled.gif"); }




/* CSS for links with hover effects to be used in footer or elsewhere */
#links ul {
        list-style-type: none;
        width: 268px;
		padding-top: 3px;
		padding-bottom: 3px;
		padding-right: 3px;
		padding-left: 3px;
		display: block;
		float: left;
} 
#links li {
        border: 3px solid #444;
		height: 55px;
        margin: 2px 0;
}
#links li a { 
        color: #0281ca;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}
#links li a:hover {
        background: #666;
}
#links a em { 
        color: #FFFFFF;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%; 
}
#links a span {
        color: #FEFEFE;
        font: normal 60% Verdana, Helvetica, sans-serif;
		font-style: italic;
        line-height: 150%;
}
#link-info {
		font-size: 1px; line-height: 1px; text-decoration: none;
}


.roundly{display:block}
.roundly *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#c9d687}
.roundly1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #e7edcb;
  border-right:1px solid #e7edcb;
  background:#d6e0a5}
.roundly2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f9faf3;
  border-right:1px solid #f9faf3;
  background:#d3dd9d}
.roundly3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #d3dd9d;
  border-right:1px solid #d3dd9d;}
.roundly4{
  border-left:1px solid #e7edcb;
  border-right:1px solid #e7edcb}
.roundly5{
  border-left:1px solid #d6e0a5;
  border-right:1px solid #d6e0a5}
.roundlyfg{
  background:#c9d687}