/*	html body @ 100% for % of centerdiv
	------------------------------------------------------*/
html, body {
    height: 100%;
}

/*	Body
	------------------------------------------------------*/
body
{
	background-image: url("images/bg2.png");
	background-repeat: repeat;
	text-align: center;
}

/*	Logo
	------------------------------------------------------*/
#logo
{
    width: 25%;
}

/*	Center Div
	------------------------------------------------------*/
#centerdiv
{
	background-color: #FFF;
	width: 80%;
	height: 95%;
    min-height: 95%;
	margin: auto;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border:2px solid #7420FF;
}

/*	Home Page image Buttons
	------------------------------------------------------*/
.mainButton
{
    width: 20%;
    margin: 10px;
}

/*	Home Page image Buttons clicked
	------------------------------------------------------*/
.mainButton:active {
  border-style: inset;
}

/*	Home Pgae font size
	------------------------------------------------------*/
.mainFont
{
    font-size: 18px;
}

/*	Login Space
	------------------------------------------------------*/
#loginspace
{
	height: 20%;
}

/*	Main Space
	------------------------------------------------------*/
#mainspace
{
	height: 5%;
}

/*	Main Links Colour
	------------------------------------------------------*/
.mainlinks
{
    color: #FFF;
}

/*	Index Page Divs
	------------------------------------------------------*/
#logindiv, #aboutdiv, #registerdiv, #registereddiv
{
	width: 90%;
	background-color: #FF46BB;
	margin: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	min-height: 20%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color: #FFF;
	padding-bottom: 10px;
}

/*	Profile Div
	------------------------------------------------------*/
#usersdiv
{
    position: relative;
	width: 60%;
	min-height: 80%;
	background-color: #FF46BB;
	margin: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color: #FFF;
	padding: 10px;
}

/*	Tasks Div
	------------------------------------------------------*/
#tasksdiv
{
    position: relative;
	width: 90%;
	background-color: #FF46BB;
	margin: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	min-height: 60%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color: #FFF;
	padding: 10px;
}

/*	Bottom
	------------------------------------------------------*/
#bottom
{
    position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: auto;
}

/*	About Div
	------------------------------------------------------*/
#aboutdiv
{
    text-align: left;
    padding: 20px;
}

/*	About Links
	------------------------------------------------------*/
#aboutlinks
{
    text-align: center;
}

/*	Hide Register and About Divs
	------------------------------------------------------*/
#registerdiv, #aboutdiv
{
    display: none;
}

/*	Index text
	------------------------------------------------------*/
.showreg, .showabout, .showlogin, .showusers
{
    color: #FFF;
    padding-left: 20px;
    padding-right: 20px;
}

/*	Form Size
	------------------------------------------------------*/
form 
{
	width: 90%;
	margin: 0 auto;
	
}

/*	Label and Input
	------------------------------------------------------*/
label, input 
{
	display: inline-block;
}

/*	Label
	------------------------------------------------------*/
label 
{
	width: 30%;
	text-align: right;
	font-weight: bold;
	color: #FFF;
}

/*	Label Plus Input
	------------------------------------------------------*/
label + input 
{
	width: 50%;
	margin: 0 10% 0 4%;
}

/*	Label plus Select
	------------------------------------------------------*/
label + select
{
    width: 50%;
	margin: 0 10% 0 4%;
}

/*	Select  plus select
	------------------------------------------------------*/
select + select
{
    float: right;
}

/*	Input plus input
	------------------------------------------------------*/
input + input 
{
	float: right;
}

/*	Login/Register Inputs
	------------------------------------------------------*/
.logininput, .registerinput
{
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border:1px solid #7420FF;
}

/*	Go/Next Buttons
	------------------------------------------------------*/
.go
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:2px solid #7420FF;
	background-color: #FFF;
	cursor: pointer;
	color: #7420FF;
	font-weight: bold;
}

/*	Love Meter
	------------------------------------------------------*/
#lovemeter
{
	position:absolute;
	right: 20%;
	top: 35%;
}

/*	Blue Colour on Love Meter
	------------------------------------------------------*/
#loveblue
{
	position:absolute;
	right: 20%;
	top: 35%;
}

/*	Red Colour on Love Meter
	------------------------------------------------------*/
#lovered
{
	position:absolute;
	right: 20%;
	top: 35%;
	width: 108px;
	height: 0;
}

/*	Barbie Image
	------------------------------------------------------*/
#barbiedoll
{
	position:absolute;
	left: 15%;
	top: 35%;
	height: 350px;
}


/*	speech bubble
	------------------------------------------------------*/
.speech-bubble 
{
	position: relative;
	background: #FF46BB;
	border-radius: .4em;
	width: 40%;
    min-height: 35%;
	margin: auto;
	text-align: left;
	font-weight: bold;
	color: #FFF;
	padding: 30px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/*	speech bubble triangle
	------------------------------------------------------*/
.speech-bubble:after 
{
	content: '';
	position: absolute;
	left: 0;
	top: 60%;
	width: 0;
	height: 0;
	border: 43px solid transparent;
	border-right-color: #FF46BB;
	border-left: 0;
	border-top: 0;
	margin-top: -125px;
	margin-left: -43px;
}

/*	speech bubble 2
	------------------------------------------------------*/
.speech-bubble2 
{
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
	position: relative;
	background: #FF46BB;
	border-radius: .4em;
	width: 40%;
    min-height: 35%;
	margin: auto;
	text-align: left;
	font-weight: bold;
	color: #FFF;
	padding: 30px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/*	speech bubble 2 triangle
	------------------------------------------------------*/
.speech-bubble2:after 
{
	content: '';
	position: absolute;
	left: 0;
	top: 60%;
	width: 0;
	height: 0;
	border: 43px solid transparent;
	border-right-color: #FF46BB;
	border-left: 0;
	border-top: 0;
	margin-top: -125px;
	margin-left: -43px;
}

/*	speech bubble 3
	------------------------------------------------------*/
.speech-bubble3 
{
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
	position: relative;
	background: #FF46BB;
	border-radius: .4em;
	width: 40%;
    min-height: 35%;
	margin: auto;
	text-align: left;
	font-weight: bold;
	color: #FFF;
	padding: 30px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/*	speech bubble 3 triangle
	------------------------------------------------------*/
.speech-bubble3:after 
{
	content: '';
	position: absolute;
	left: 0;
	top: 60%;
	width: 0;
	height: 0;
	border: 43px solid transparent;
	border-right-color: #FF46BB;
	border-left: 0;
	border-top: 0;
	margin-top: -125px;
	margin-left: -43px;
}

/*	left div - not used any more?
	------------------------------------------------------*/
.left
{
    text-align: left;
    padding-left: 10px;
}

/*	Complete Button
	------------------------------------------------------*/
#complete, #completeno
{
    position: absolute;
    right:    10px;
    bottom:   10px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #FFF;
	color: #FF46BB;
	cursor: pointer;
	font-weight: bold;
}

/*	Complete Button (Wait)
	------------------------------------------------------*/
#completeno
{
    cursor: progress;
}

/*	Foot
	------------------------------------------------------*/
.foot
{
	position: relative;
	bottom:0;
	width: 80%;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 10px;
	margin: auto;
}

/*	space
	------------------------------------------------------*/
#space
{
	height: 10%;
}

/*	menu class
	------------------------------------------------------*/
.menu
{
	text-align: left;
	padding-left: 50px;
}


/*	Style the Drop Down Button
	------------------------------------------------------*/
.dropbtn 
{
	background-color: #FF46BB;
	color: white;
	padding: 5px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-weight: bold;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/*	The container <div> - needed to position the dropdown content
	------------------------------------------------------*/
.dropdown 
{
	position: relative;
	display: inline-block;
}


/*	Dropdown Content (Hidden by Default)
	------------------------------------------------------*/
.dropdown-content 
{
	display: none;
	position: absolute;
	background-color: #FF46BB;
	min-width: 160px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	z-index: 1;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #7420FF;
}

/*	Links inside the dropdown
	------------------------------------------------------*/
.dropdown-content a 
{
	color: #FFF;
	font-weight: bold;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/*	Change color of dropdown links on hover
	------------------------------------------------------*/
.dropdown-content a:hover 
{
	background-color: #7420FF;
}

/*	Show the dropdown menu on hover
	------------------------------------------------------*/
.dropdown:hover .dropdown-content 
{
	display: block;
}

/*	Change the background color of the dropdown button when the dropdown content is shown
	------------------------------------------------------*/
.dropdown:hover .dropbtn 
{
	background-color: #7420FF;
}
			

/*	Holder for speech bubble 2
	------------------------------------------------------*/
#holder
{
    margin: auto;
    width: 40%;
    padding: 10px;
}

/*	Left Div - not used?
	------------------------------------------------------*/
#leftdiv
{
    width: 80%;
    float: left;
    padding-right: 10px;
}

/*	Right Div - not used?
	------------------------------------------------------*/
#rightdiv
{
    width: 10%;
    text-align: left;
    float: left;
}

/*	Task text Area
	------------------------------------------------------*/
#tasktextarea, #taskleveltextarea
{
    height: 60px; 
    width: 100%;
}

/*	Avatar Pic
	------------------------------------------------------*/
#avatar
{
    height: 150px;   
}

/*	Bold Text
	------------------------------------------------------*/
.bold
{
    font-weight: bold;
}

/*	Confessions
	------------------------------------------------------*/
#confessions
{
    height: 80px; 
    width: 280px;
}

/*	Small avatar Pic
	------------------------------------------------------*/
.smallavatar
{
    height: 20px;   
}

/*	Chart Stats
	------------------------------------------------------*/
#chart
{
    max-width: 50%;
    background-color: #FFF;
    padding: 20px;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: auto;
}

/*	User Chart Stats
	------------------------------------------------------*/
#usersdivchart
{
    position: relative;
	width: 60%;
	max-height: 75%;
	background-color: #FF46BB;
	margin: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	min-height: 60%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color: #FFF;
	padding: 10px;
}

/*	Would you like a Cookie?
	------------------------------------------------------*/
#cookie
{
    position:absolute;
	top:2px;
	right: 0;
    left: 0;
    margin: auto;
	width:70%;
	height:99%; 
	background: #FFF;
	background-size: 100%;
	color: #FF46BB;
	font-size: 20px;
	font-weight: bold;
	text-align: center; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:2px solid #7420FF;
	display: none;
}

/*	Barbie Cookie
	------------------------------------------------------*/
#barbiecookie
{
    height: 450px;
}

/*	Accept Cookie
	------------------------------------------------------*/
#accept
{
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #FFF;
	color: #FF46BB;
	cursor: pointer;
	font-weight: bold;
}


/*	Tablets and Phones
	------------------------------------------------------*/
@media (min-width: 320px) and (max-width: 1024px)
{
    /*	Adjust Center Div
	------------------------------------------------------*/
    #centerdiv
    {
        width: 90%;
        min-height: 90%;
    }
    
    /*	Adjust Barbie Image
	------------------------------------------------------*/
    #barbiedoll
    {
    	position:absolute;
    	left: 7%;
    	top: 20%;
    	height: 350px;
    }
    
    /*	Adjust Love Meter
	------------------------------------------------------*/
    #lovemeter
    {
    	position:absolute;
    	right: 12%;
    	top: 20%;
    }
    
    /*	Adjust Love meter blue
	------------------------------------------------------*/
    #loveblue
    {
    	position:absolute;
    	right: 12%;
    	top: 20%;
    }
    
    /*	Adjust Love meter red
	------------------------------------------------------*/
    #lovered
    {
    	position:absolute;
    	right: 12%;
    	top: 20%;
    	width: 108px;
    	height: 0;
    }
    
    /*	Adjust speech Bubble
	------------------------------------------------------*/
    .speech-bubble
    {
        min-height: 35%;
    }
    
    /*	Adjust Foot
	------------------------------------------------------*/
    .foot
    {
    	position: relative;
    	bottom:0;
    	width: 80%;
    	margin: auto;
    	padding-top: 20px;
    	font-weight: bold;
    	height: 40px; 
    }
    
}

/*	Phones
	------------------------------------------------------*/
@media (min-width: 320px) and (max-width: 640px)
{
    /*	Adjust link sizes
	------------------------------------------------------*/
    #aboutlinks
    {
        font-size: 12px;
    }
}