/* CSS Document - Author: Shaibal Mandal */

/* Main Styles that apply to body */

/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */

body {
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	margin: 0px;
	padding-left: 50%;
	background: #999999 url(images/bg.jpg) center repeat-y;
	position: absolute;
}

/* This is the page container built and centered using -ve margins */
#container {
	width: 700px;
	margin-left: -350px;
}
.litterPics{

	width: 60%;

    height:100%;

	text-align:left;

	background-image:url(images/colorThree.jpg);

    float:left;

}



.dad{

	width: 50%;

    height: 70%;

	text-align:left;

	line-height: normal;

	background-image:url(images/dogBackground.jpg);

    float:left;

        

}



.dad #title{

	text-align: center;

	font-weight: bold;

	font-size: larger;

}



.dad #details{
	margin-top: 1px;
}

.dad img{

	margin-top: 1px;
	padding: 2px;
	border: none;
	float: left;
}

.dadDetails{
	width:  40%;
	height: 100%;
	background-image:url(images/colorThree.jpg);
}



.litterDad{
	width:  42%;
	height: 70%;
	background-image:url(images/colorThree.jpg);
}



.dad p{
	text-align:left;
	margin-top: 2px;
	font-weight: bold;
	}



.litterMom{

	width: 50%;

    height:70%;

	text-align:center;

	background-image:url(images/colorThree.jpg);

    float:left;

}



.litterMom p{

	text-align:left;

}



.litterDetails{

	width:100%;

	height:30%;

	text-align: left;

	background-image:url(images/colorFour.jpg);

        float:right;

}

/* The topmost faded bar */
#topbar {
    width:auto;
    background-image:url(images/topBG.jpg);
    height: 20px;

    text-align:right;
	
}

.topBarIcon{
	cursor:pointer;
}

/* This holds the two heading blocks, the title and the login form */
#headerwrapper {
    width: auto;
	height: 65px;
	background-image:url(images/header_bg.jpg)
}

/* class that styles the holder div of the forms */
.userform {
    width: auto;
    color: #DD7CB4;
    padding: 5px 0px 5px 3px;
    background: #fbfbfb;
    border:1px solid #efefef;
    border-top: none;
    text-align: justify;
    margin-bottom: 1px;
}

/* This will style the login and search */
.userform input {
    border: 1px solid #DDD;
    font-family: verdana;
    font-size: 10px;
    color: #BBB;
    font-weight: bold;
}

h1 {
    font: 48px verdana;
	color: #EEE;
	margin: 5px;
}

h6 {
    font: 10px verdana;
    font-weight: bold;
	color: #DDD;
	margin: 0px;
	padding: 0px;
	margin-left: 8px;
}
#dropDown
{
	width: 700px;
	background:url(images/headerBG.jpg) repeat-x;
	font: 10px verdana;
	text-align:center;
    font-weight: bold;
	color:#FFFFFF;
	width:Auto;
	margin-bottom:2px;
	margin-top:2px;
	padding-left:2px;
}
#pictures
{
	background:url(images/headerBG.jpg) repeat-x;
	font: 10px verdana;
	text-align:center;
    font-weight: bold;
	color:#FFFFFF;
	width:auto;
	height:auto;
}

/* This holds the tabs */
#tabholder
{
    width: auto;
}

/* Container for the article box, and the pic box */
.articleboxouter {
    width: auto;
	height:100%;
    padding: 0px 6px 0px 5px;
    clear: both;
} 

.articleboxAlbums {
    width: auto;	
    line-height: 20px;
    padding: 15px 6px 0px 6px;
    text-align: justify;
	height:550px;
}

.articleboxLitters {
    width: auto;
   /* padding: 0px 6px 0px 5px;*/
    clear: both;
} 

/* Content holder for the articles */
.articleboxinner {
    width: auto;	
    line-height: 20px;
    padding: 15px 6px 0px 6px;
    text-align: justify;
	height:100%;
}

.articleboxinner a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color:#000000;
}

.articleboxinner a:visited{
text-decoration: none;
	padding: 0;
	margin: 0;
	color:#000000;
}

.articleboxinner a:hover{
text-decoration:underline;
	padding: 0;
	margin: 0;
	color:#000000;
}

.articleboxAlbum {
    width: auto;	
    line-height: 20px;
    color:#333333;
    padding: 15px 6px 0px 6px;
    background: #fbfbfb;
    border:1px solid #efefef;
    text-align: justify;
}

.articleboxDog {
    width: auto;
    line-height: 20px;
    color:#333333;
    padding: 15px 6px 0px 6px;
    background: #fbfbfb;
    border:1px solid #efefef;
    text-align: justify;
    height: auto;
}

.articleboxDog a{
	color:#000000;
}

.articleboxDog a:visited{
text-decoration: none;
	padding: 0;
	margin: 0;
	color:#000000;
}

.articleboxDog a:hover{
text-decoration:underline;
	padding: 0;
	margin: 0;
	color:#000000;
}

/* And their ugly hover states too */
 .articleboxDog a:hover {
	text-decoration: underline;
}

.articleItem
{
    font-size: 10px;
    font-weight: bold;
    border-bottom: 1px solid #CCC;
}
.articleValue
{
    font-size: 10px;
	color:#000033
}

.articleItemRight
{
    font-size: 10px;
    font-weight: bold;
	float:right;
    border-bottom: 1px solid #CCC;
}

/* The title style for the main article */
.articleheader
{
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #CCC;
}

/* This will style the read more thing at the bottom */
.readmore {
    text-align: right;
    display: block;
    width: auto;
}

/* This controls the main pic in the main article box */
.mainpiccontrol
{
    border: 1px #DBB7DB solid;
    float: left;
    margin-right: 10px;
}

/* Container for the pic thumbnails */
.picboxouter {
    width: auto;
    /*padding: 0px 6px 0px 5px;*/
    clear: both;
}

/* Content holder for the pic box */
.picbox {
    width: auto;
    line-height: 22px;
    color: #DD7CB4;
    /*padding: 5px 6px 6px 6px;*/
    /*border:1px solid #efefef;*/
    border-top: none;
    text-align: center;
}

.picbox2 {
    width: auto;
    line-height: 222px;
    color: #DD7CB4;
    padding: 5px 6px 6px 6px;
    border:1px solid #efefef;
    border-top: none;
    text-align: center;
}
/* This controls the thumbnails in the picbox div */
.pickboxcontrol
{
    border: 1px #DDD solid;
    vertical-align: middle;

}

/* Sometimes, I don't want borders around my hyperlink images */
.noborder {
    border: none;
}

/* For taming those leeeeeeetle arrows */
img {
    vertical-align: text-bottom;
}

/* Style-up those ugly default hyperlinks */
a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color:#FFFFFF;
}

a:visited{
text-decoration: none;
	padding: 0;
	margin: 0;
	color:#FFFFFF;
}

a:hover{
text-decoration:underline;
	padding: 0;
	margin: 0;
	color:#FFFFFF;
}

/* And their ugly hover states too */
a:hover {
	text-decoration: underline;
}

.ambercroft_question{	/* Styling question */
	
	width: 100%;
    border-bottom: 1px solid #DDD;
    border-top: none;
    color:#FFFFFF;
    height: 24px;
 	font-size:0.9em;
	background:url(images/headerBG.jpg) repeat-x;

	overflow:hidden;
	cursor:pointer;
}

.ambercroft_answer{	/* Parent box of slide down content */
	visibility:hidden;
	height:0px;
	/*margin-left:-234px;*/
	/*margin-left:-468px;*/
	overflow:hidden;
	position:relative;

}
.ambercroft_answer_content{	/* Content that is slided down */
	padding:1px;
	text-align:left;
	font-size:0.9em;	
}



/* Why should the humble footer be left out? */
#footer {
	background-color: #CCC;
	color:#000000;
	text-align: center;
	vertical-align: middle;
	height: 20px;
	padding-top: 5px;
	clear: both;
}

#footer a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color:#000000;
}

#footer a:visited{
text-decoration: none;
	padding: 0;
	margin: 0;
	color:#000000;
}

#footer a:hover{
text-decoration:underline;
	padding: 0;
	margin: 0;
	color:#000000;
}

/* And their ugly hover states too */
#footer a:hover {
	text-decoration: underline;
}


/* This will contain the three columns */
#newsContainer2
{
    width:700px;
    background-color: #E0E0E0;
	display:inline-block;
	background:url(images/headerBG.jpg) repeat-x;
}

/* First column of the three columns */
.c1
{
	width: 33.3%;
	text-align:center;
    border-top: none;
    line-height: 22px;
	float: left;
}

/* Second column of the three columns */
.c2
{
    width: 33.3%;
    float: left;
    line-height: 22px;
}

/* Third column of the three columns */
.c3
{
	width:33.3%;
       border-top: none;
       line-height: 22px;
	float: left;
}

/* This controls the titles for each column */
.noteheader
{
    width:auto;
    border-bottom: 1px solid #DDD;
    border-top: none;
    color:#FFFFFF;
    height: 24px;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
	background:url(images/headerBG.jpg) repeat-x;
}

/* And this gives the column text some breathing space */
.spacy
{
    padding: 5px;
	color:#FFFFFF;
	height:190px;
	border:none;	
	background-image:url(images/colorOne.jpg);
	/*background-repeat:repeat-y;*/
}


.spacy2
{

    padding: 5px;
	color:#FFFFFF;
	height:190px;
	background-image:url(images/colorTwo.jpg);
	position:relative;
	/*background-repeat:repeat-y;*/
}

.spacy3
{
    padding: 5px;
	color:#FFFFFF;
	height:190px;
	background-image:url(images/colorThree.jpg);
	/*background-repeat:repeat-y;*/
}

/* CSS Tabs */
#tabs8 {
    float:left;
    width:100%;
   	background-image:url(images/linksBG.jpg);
	background-repeat:repeat-x;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #CCC;
}

#tabs8 ul {
    margin:0;
    padding:10px 10px 0 5px;
    list-style:none;
}

#tabs8 li {
    display:inline;
    margin:0;
    padding:0;
}

#tabs8 a {
    float:left;
    background:url("images/tableft8.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}

#tabs8 a span {
    float:left;
    display:block;
    background:url("images/tabright8.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#eee;
    font-weight: bold;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs8 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs8 a:hover span {
    color:#591333;
}

#tabs8 a:hover {
    background-position:0% -42px;
}

#tabs8 a:hover span {
    background-position:100% -42px;
    color: #888;
}

#tabs8 #current a {
    background-position:0% -42px;
}
#tabs8 #current a span {
    background-position:100% -42px;
    color: #888;
}
/* End of CSS Tabs */


#tabsLitter {
    width:100%;
   	background:url(images/headerBG.jpg) repeat-x;
    font-size:93%;
    line-height:normal;
}

#tabsLitter ul {
    margin:0;
	padding:2px 2px 0px 2px;
    list-style:none;
}

#tabsLitter li {
	width:300px;
    display:inline;
    margin:0;
    padding:0;
}

#tabsLitter a {
    float:left;
	width:100%;
	background:url("images/tableft8.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}

#tabsLitter a span {
    float:left;
	width:100%;
    display:block;
    background:url("images/tabLitter.jpg") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#eee;
    font-weight: bold;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsLitter a span {float:none;}
    /* End IE5-Mac hack */
    #tabsLitter a:hover span {
    color:#591333;
}

#tabsLitter a:hover {
    background-position:0% -42px;
}

#tabsLitter a:hover span {
    background-position:100% -42px;
    color: #888;
}

#tabsLitter #current a {
    background-position:0% -42px;
}
#tabsLitter #current a span {
    background-position:100% -42px;
    color: #888;
}
/* End of CSS Tabs */


/*Thumbnail Viewer*/
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}

/* DHTML SLIDE SHOW */
#dhtmlgoodies_slideshow{
		width:725px;	/* Total width of slideshow */
		height:auto;
		padding-bottom:10px;
	}
	
	#previewPane{
		/*border:1px solid #000;*/
		margin-right:10px;	
		text-align:center;
		vertical-align:middle;
		padding-top:10px;
		padding-bottom:10px;
		
		
		/* CSS HACK */
		height: 452px;	/* IE 5.x */
		height/* */:/**/420px;	/* Other browsers */
		height: /**/420px;
		
		width:530px;		
		float:left;
				
	}
	#waitMessage{
		display:none;
		position:absolute;
		left:400px;
		top:150px;
		background-color:#FFF;
		border:3px double #000;
		padding:4px;
		color:#555;
		font-size:0.9em;
		font-family:arial;	
	}	
	#galleryContainer{	/* Big Div surrounding up image, list of images and down image */
		float:left;	/* Floating */
		
		/* CSS HACK */
		height: 454px;	/* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
		height/* */:/**/438px;	/* Other browsers */
		height: /**/438px;
		
		/* CSS HACK */
		width: 124px;	/* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
		width/* */:/**/120px;	/* Other browsers */
		width: /**/120px;
				
		border:1px solid #000;	/* Black border */		
		padding:1px;	/* A little space between the black border and the content inside */
		
	}
	#galleryContainer #arrow_down{	/* Arrow down image */
		height:35px;
	}
	#galleryContainer #arrow_up{
		height:35px;	/* Arrow up image */
	}
	
	#theImages{	/* DIV where the images are located */
		position:relative;
		overflow:hidden;
		height:375px;	/* Height of boxes for the images */
		
	}
	#theImages div{	
		position:relative;	/* Don't change this */
		height:1500px;	/* Higher than total height of thumbnails */
		padding-bottom:10px;
	}
	#theImages img{
		border:0px;	/* No border */
		filter:alpha(opacity=50);	/* Transparency - IE */
		opacity:0.5; /* Transparency - Firefox */
		padding-top:1px;	/* Space between images */
	}
	#previewPane #largeImageCaption{	/* CSS styling of image caption below large image */
		font-style:italic;
		text-align:center;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
		font-size:0.9em;
	}
	#theImages .imageCaption{
		display:none;
	}
	
	
	
	
	
	form {
	padding: 10px;
}
/* Form Sections ======================================================================== */
/* Fieldset  */

fieldset {
	margin: 20px 0;
	padding: 15px 10px;
	border: 3px double #ccc;
	background-color: #FFF;
	overflow: auto;
}
legend {
	padding: 2px 5px;
	color: #9DCB99;
	font-weight: bold;
}
/* Nested Fieldset  */
fieldset fieldset  {
	background-color:#FFF;
	border: 1px solid #ccc;
}
fieldset fieldset legend {
	font-size: 90%;
}
/* Inline Section */
.inlineSection {
	overflow: auto;
	width: 100%;	
}
/* Grid Section */
form table {
	border-collapse: collapse;
}
form td {
	padding: 0 4px;
	border-left: 1px solid #9DCB99;
	border-right: 1px solid #9DCB99;	
}
form th {
	padding: 0 4px;
}
form .alternate-1 {
	background-color:#DDF0DD;
}
form .alternate-1 td {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;	
}
form .alternate-0 {
}

/* Combo Label + Input Field =========================================================== */
form .oneField {
	line-height: 140%;
}
form .inlineSection .oneField {
	padding: 0;
	margin-right: 4px;
	white-space: nowrap;	
}
/* Ties together a label and its checkbox or radio */
form .oneChoice {
	white-space: nowrap; 	
}

/* Field Labels ======================================================================== */

/* Base */
label, form .label {	
	color: #333;
	margin: 0;
}
/* Text inputs / Select label */
label.preField {
	display: -moz-inline-box;
	display: inline-block;	
	margin: 0.6em 4px 0 0;
	padding: 0 2px;
	min-width: 9em;
	border-bottom: 1px dotted #aaa;
}
/* Radio / Checkbox group label */
form .label  {
	display: block; 
	margin: 0.6em 4px 0.5em 0;
	padding: 0 2px;
	border-bottom: 1px dotted #aaa;
}
/* Individual Checkbox / Radio label */
label.postField  {
	margin: 0 8px 0 2px;
	font-size: 90%;
}
/* Inputs ======================================================================== */

textarea {
	padding: 0;
	vertical-align: top;
	margin: 2px 2px 1px 0;
}
input {
	margin: 0 2px 0 0;
}
input[type=text], input[type=password] {
}
select {
	margin: 2px 2px 1px 0;
	padding: 0;
}
.inlineSection .oneField select {
	margin: 0 2px 1px 0 !important;
}
.gridSection select  {
	margin: 0 !important;
}

/* Buttons ======================================================================= */

form .actions {
	text-align: center;
	margin: 20px 0 10px 0;	
}
/* Submit button */
form .primaryAction {
	padding: 4px 15px;
	font-weight: bold;
}
/* Cancel button */
form .secondaryAction {
	padding: 4px 15px;
	color: grey;
}
form .secondaryAction:hover {
	color: black;
}


/* Form Builder Related Rules ===================================================== */

/* Form or Fieldset instruction paragraph. */
form .instructions {
	margin: 1em 0;
	font-style: italic;
}
/* Asterisk on required fields */
form .reqMark {
	color: #F00;
	padding: 0 4px;
}

/* wForms Related Rules ========================================================== */

/* Field w/ a validation error */
form .errFld {
	padding: 1px;
	border: 1px solid #F00;
}
/* Styling for message associated with a validation error. */
form .errMsg {	
	color: #CC3333 !important;
	display: block;
}
/* Field-Hint with focus */
form .field-hint {
	float: right;
	clear: right;
	color: #000;
	background-color: #FFFFFF;
	border: 1px solid #bbb;
	margin: 2px 0 7px 0;
	padding: 2px;
	font-size: 85%;
	min-height: 2em;	

}
/* Field-Hint without focus */
form .field-hint-inactive {
	float: right;
	clear: right;
	color: #666;
	border: 1px solid #E4E3D3;
	background-color: #FFFFFF;
	margin: 2px 0 7px 0;
	padding: 2px;
	font-size: 85%;
	min-height: 2em;	

}
/* Repeat Behavior divs (when not set on a fieldset) */
div.repeat {
	margin: 3px 0;
	padding-right: 6px;
	border: 1px dotted #ccc;
	background-color: #FFFFFF;
}
div.removeable {
	margin: 3px 0;
	padding-right: 6px;	
	border: 1px dotted #ccc;
	background-color: #F3F3F3;
	
}
/* Links generated by the Repeat Behavior */
form .duplicateLink {
	line-height: 260%;
	font-weight: bold;
}
form .removeLink {
	line-height: 260%;
}
form td .duplicateLink, form td .removeLink  {
	margin: 0;
	line-height: 100%;
}
/* Switch Behavior Classes */
.onstate-a,  .onstate-b,  .onstate-c,  .onstate-d,
.onstate-e,  .onstate-f,  .onstate-g,  .onstate-h, 
.onstate-i,  .onstate-j,  .onstate-k,  .onstate-l, 
.onstate-m,  .onstate-n,  .onstate-o,  .onstate-p, 
.onstate-q,  .onstate-r,  .onstate-s,  .onstate-t,
.onstate-u,  .onstate-v,  .onstate-w,  .onstate-x,  
.onstate-y,  .onstate-z,  .onstate-aa, .onstate-ab,
.onstate-ac, .onstate-ad, .onstate-ae, .onstate-af,
.onstate-ag, .onstate-ah, .onstate-ai, .onstate-aj,
.onstate-ak, .onstate-al, .onstate-am, .onstate-an,
.onstate-ao, .onstate-ap, .onstate-aq, .onstate-ar,
.onstate-as, .onstate-at, .onstate-au, .onstate-av,
.onstate-aw, .onstate-ax, .onstate-ay, .onstate-az {
	display: block;
}
/* offstate classes for the Switch Behavior are in wforms-jsonly.css */


 
/* IE6 BUG FIXES ==================================================================== */
form {
	height:expression('1%'); /* IE Pick-a-boo bug fix */
}
form fieldset {
	position:expression('relative'); /* Fixes IE problem with fieldset+legend boundaries */
	margin-top:expression('1em');
	padding-top:expression('1.5em');
	overflow: expression('visible');
}
form fieldset legend {
	position: expression('absolute'); 
	top: expression('-.5em'); /* Fixes IE problem with fieldset+legend boundaries */
	left:expression('.5em');
}
form .inlineSection .oneField {
	display: expression('inline-block');		
}
label.preField, form .inlineSection .oneField .inlineLabel {
	width: expression('9em');
}