/*
* {margin:0; padding:0;}
*/

body{ 
background-image: url('graphy.png');
font-family: 'Lato', arial, serif;
}

#intro {
	background-image: url('introbackground.png');
	background-position-x:center;
	background-repeat: no-repeat;
}

#intro_a {
	background-image: url('graphy.png');
	background-position-x:center;
	background-repeat: no-repeat;
}

hr {
  background:#FFFFFF; 
  border:0; 
  height:1px;
  }
  
hr.light {
  background:#3d3d3d; 
  border:0; 
  height:1px;
  }

#intro_sheet {
	display: none;
	background: rgba(255, 255, 255, 0.95);
	z-index: 300;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);
	margin-left: -360px;
	margin-top: -340px;
	position:fixed;
	top:50%;
	left: 50%;
	width: 660px;
	padding: 30px;
	}

#startform {
	display: none;
	background-color:#FF0000;
	background-color:#608BA6;
	background-color:#338DC9;
	color: #FFFFFF;
	position:fixed;
	top:50%;
	left: 50%;
	margin-left: -240px;
	margin-top: -147px;
	z-index: 130;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);
	width: 460px;
	padding: 10px;
}

#proceedform {
	display: none;
	background-color:#FF0000;
	background-color:#608BA6;
	background-color:#338DC9;
	color: #FFFFFF;
	font-size: 24px;
	position:fixed;
	top:50%;
	left: 50%; 
	margin-left: -240px;
	margin-top: -147px;
	z-index: 130;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);
	width: 460px;
	padding: 10px;
}

#newpersonform, #newparentform, #newspouseform, #editform, #sharecard,#continuecard, #titlechangecard {
	background-color:#c5d0d4;
}

#canvasarea {
	display: none;
	background-color:#c5d0d4;
	width: 2000px;
	height: auto;
}

#convertedimage {
	display: none;
	background-color:#c5d0d4;
}


form {
  /*
color: #3D3D3D;
*/
  }

#dvLoading
{
   background:#FFF url(loading.gif) no-repeat center center;
   height: 150px;
   width: 150px;
   position: fixed;
   z-index: 800;
   left: 50%;
   top: 50%;
   margin: -75px 0 0 -75px;
}


#editform, #newspouseform, #newpersonform, #newparentform, #actionform, #hovercard, #instructioncard, #idcard, #sharecard, #socialcard, #continuecard, #titlechangecard {
	display: none;
	position:fixed;
	color: #3D3D3D;
	top: 10px;
	left: 330px;
	z-index: 130;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);
	width: 460px;
	padding: 10px;
}

#tutorialcard1, #tutorialcard2 {

	display: none;
	position:fixed;
	color: #3D3D3D;
	top: 50%;
	left: 185px;
	z-index: 900;
	background-color: rgba(61,61,61,0.8);
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);
	padding: 0px;
	cursor: pointer;
}

#tutorialcard1 {
	background-image: url('tutorialcard1.png');
	width: 750px;
	height: 230px;
	margin-top: -115px;
}
#tutorialcard2 {
	background-image: url('tutorialcard2.png');
	width: 750px;
	height: 380px;
	margin-top: -190px;
}


#socialcard {
	left: 10px;
}

#continuecard {
	font-size: 24px;
	text-align: center;
}

#continueQuestion {
	font-size: 18px;
	text-align: center;
}

#socialcard {
	display: none;
	background-color: #FFFFFF;
	width: 400px;
}


#loadform {
	/*
display: none;
	position:relative;
	top:50%;
	left: 50%;
	margin-left: -315px;
	margin-top: -94px;
*/
	z-index: 140;
	background-color:#608BA6;
	background-color:#338DC9;
	width: 630px;
	padding: 15px;
	color: #FFFFFF;
	font-size: 36px;
}

#loadtreetoggle, #newtreetoggle, #treeIDinput, #getstarted, #yourtreeID {
	font-size: 28px;
}


#newtreetoggle, #loadtreetoggle {
	width: 240px;
}



.instructionexample {
	float:right;
}

#treeIDinput {
	width: 250px;
}

#actionform {
	display: none;
	position:fixed;
	top:20px;
	left: 330px;
	z-index: 110;
	background-color:#c5d0d4;
	width: 75px;
	padding: 10px;
	text-align: center;
	color: #3D3D3D;
}


#hovercard {
	display: none;
	position:fixed;
	top:20px;
	left: 20px;
	z-index: 120;
	background-color:#c5d0d4;
	width: 290px;
	padding: 10px;
	text-align: center;
	color: #3D3D3D;
}

#hovermask {
	display: none;
	position:fixed;
	top:20px;
	left: 20px;
	z-index: 120;
	background: rgba(255, 255, 255, 0.95);
	width: 290px;
	padding: 10px;
	text-align: center;
	color: #3D3D3D;
}

#marriagehovermask {
	display: none;
	position:fixed;
	top:20px;
	left: 20px;
	z-index: 105;
	background: rgba(255, 255, 255, 0.95);
	width: 400px;
	padding: 10px;
	text-align: center;
	color: #3D3D3D;
}

#instructioncard {
	display: none;
	left: 330px;
	margin-left: 0px;
	z-index: 150;
	background-color:#FFB03B;
	width: 450px;
	padding: 15px;
	text-align: left;
	color: #3D3D3D;
	font-size: 20px;
}

#idcard {
	display: none;
	left: 400px;
	font-size: 18px;
	margin-left: 0px;
	z-index: 150;
	color: #FFFFFF;
	background-color:#5C8198;
	width: 300px;
	padding: 15px;
	text-align: left;
}

#actionperson, #hoverperson, #hovercouple {
	font-size: x-large;
	font-weight: 700;
}

#paper1 {
	display: block;
}

button {
	float:right;
	border:1px solid white;
	background: rgba(255, 255, 255, 0.4);
	border-radius:4px;
}

button:hover {
	background: rgba(255, 255, 255, 0.7);
}

button:active {
	background: rgba(102, 102, 102, 0.2);
}

#toolsbutton {
	
	position:absolute;
	z-index: 120;
	width: 100px;
	height: 100px;
	top:20px;
	left: 1000px;	
	background-image: url(menu.png); 
	background-position: top; 
}

#toolsbutton:hover {
	background-position: bottom;	
}

#colorbutton, #recruitbutton, #sharebutton, #orderbutton, #savebutton, #pinterestbutton, #facebookbutton, #twitterbutton, #linkbutton {
	float: left;
	width: 100px;
	height: 100px; 
	background-position: top; 
}

#shareshelf {
	position:fixed;
	top:16px;
	left: 16px;
	width: 420px;
	height: 40px; 
	opacity: 0.4;
	background-position: top;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8); 
}

#shareshelf:hover {
	opacity: 1.0;
}

.closebutton {
	display:none;
	position: fixed;
	top:15px;
	left: 405px;
	width:20px;
	z-index: 200;
	opacity: 0.3;
}

#colorbutton:hover, #recruitbutton:hover, #sharebutton:hover, #orderbutton:hover, #savebutton:hover, #pinterestbutton:hover, #facebookbutton:hover, #twitterbutton:hover, #linkbutton:hover, #shareshelf:hover {
	background-position: bottom;	
}

#colorbutton { background-image: url(colormenu.png); }
#recruitbutton { background-image: url(recruitbtn.png); }
#sharebutton { background-image: url(sharebtn.png); }
#orderbutton { background-image: url(orderbtn.png); }
#savebutton { background-image: url(savebtn.png); }
#pinterestbutton { background-image: url(pinterestbtn.png); }
#facebookbutton { background-image: url(facebookbtn.png); }
#twitterbutton { background-image: url(twitterbtn.png); }
#linkbutton { background-image: url(linkbtn.png); }
#shareshelf { background-image: url(shareshelf.png); }

#menucard {
	display: none;
	position:absolute;
	text-align:center;
	z-index: 120;
	width: 520px;
	height: 100px;
	top:20px;
	left: 485px;
	background: #FFFFFF;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);  
}

#menucard:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:40px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent #FFFFFF; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

#colorcard {
	display: none;
	position:absolute;
	text-align:center;
	z-index: 120;
	width: 250px;
	height: 80px;
	padding: 10px;
	top:20px;
	left: 735px;
	background: #ffffff;
	box-shadow:         7px 7px 30px rgba(50, 50, 50, 0.8);  
}

#colorcard:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:40px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent #ffffff; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}


fieldset { 
	border:1px solid #FFFFFF;
	padding: 5px;
}

legend {
	color: #3D3D3D;
	font-family: 'Lato', arial, serif;
	font-weight: 700;
	font-size: 20px;
	/*
border:1px solid #FFFFFF;
*/
}

label {
	display: inline-block;
	width: 100px;
	/*
margin-right: 60px;
*/
	text-align: left;
}

.cardtitle {
	color: #00395E;
	font-family: 'Permanent Marker', arial, serif;
	font-weight: 700;
	font-size: 45px;
}
 
 
input, select, textarea, button { 
	font-family: 'Lato', arial, serif;
}

#colorselect { 
	width: 80%;
	border:1px solid #3D3D3D;
	background-color: #FFFFFF;
	font-size: 15px;
}

.centerblock { 
	display:inline-block;

}

.continuebtn { 
	width: 180px;
	font-size: 16px;
	margin: 0 5px 0 5px;
}

.actionbutton {
	width: 100%;
}

.largetxt, .editsubmit, .editcancel2, #deletetoggle {
	font-size: 16px;
}

.daybox { 
	width: 40px;
	text-align: center;
}

.yearbox { 
	width: 60px;
	text-align: center;
}

.bigname {
	font-size: 20px;
	width: 373px;
}

#titleinput1, #titleinput2 {
	text-align: center;
}