homeFit.css

body {
	background-color: white;
	margin: 0px;
	font-family: Georgia;
	height: 100%;
}

p {
	color: black;
	font-size: large;
	margin-bottom: 26px;
}

a {
	text-decoration: none;
}

table {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

#buttonRow, #buttonRow td {
	border-top: 0px;
}

#buttonRow button {
	margin: 0px;
}

#optionsRow, #optionsRow td {
	border-bottom: 0px;
}

.formInput {
	display: inline-block;
	margin-bottom: 10px;
	text-align: left;
	margin-bottom: 10px;
}

.homeTile {
	height: 150px;
	width: 20%;
	padding: 1px;
	background-color: skyblue;
	border-radius: 5px;
	display: inline-block;
	float: left;
}

.houseIcon {
	float: left;
	height: 100%;
}

.inputHeader {
	font-size: 21px;
	margin-top: 0px;
    margin-bottom: 0px;
	font-family: 'Open Sans', serif;
}

.taskHeader {
	height: 75px;
	border: 1px solid grey;
}

.taskTitle {
	float: left;
}

.uInput {
	border-radius: 5px;
    background-color: lightgrey;
    height: 30px;
    font-size: 30px;
    opacity: 0.5;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
	margin-bottom: 50px;
}

#content {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

#header {
	/*background-image: url("images/Background/Test3.jpg");
	height: 120px;
	width: 100%;*/
	margin-left: 0px;
	margin-right: 0px;
}

#icon {
	width: 100%;
	display: block;
	margin: auto;
	border-radius: 50%;
}

#loginForm {
	padding: 10px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	/*border: 2px solid grey;*/
	border-radius: 25px;
	width: 500px;
	height: 350px;
}

#loginHeader {
	color: cornflowerblue;
}

#main {
	text-align: center;
}

#mainContent {
	float: right;
	width: 83%;
	height: 830px;
	padding: 1%;
}

#sidebar {
	padding: 1%;
	float: left;
	width: 13%;
	background-color: rgb(10, 63, 84);
	height: 750px;
}

#tagLine {
	color: rgb(70, 100, 118);
	font-style: italic;
}

#tileDiv {
	/*border: 2px solid grey;*/
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

#title {
	font-size: 70px;
	font-family: Tahoma, sans-serrif;
	color: cornflowerblue;
	margin-bottom: 40px;
    margin-top: 30px;
}

.orangeButton {
	border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    background-color: darkorange;
    font-size: 18px;
    color: ghostwhite;
    border-radius: 8px;
}

.service {
	font-weight: bold;
	font-size: 14pt;
}

#loginButton:hover {
	background-color: rgb(255, 150, 75);
}

#message {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-size: 21pt;
	background-color: white;
	font-family: 'Open Sans', serif;
	font-weight:bold;
}

#fix {
	background-color: darkorange;
	color: white;
	padding: 2px;
	border-radius: 10px;
}

#fix:hover {
	background-color: rgb(255, 150, 75);
}

#taskView {
	background-color: white;
}

.taskButtons {
	text-align: center;
	margin: 10px;
}

#DoorButton, #ElectricalButton, #ExteriorButton, #FloorButton, #InteriorButton, #KitchenButton, #PlumbingButton, #RoofButton {
	background-size: 200px 200px;
	height: 200px;
    width: 200px;
	border-style: none;
	cursor: pointer;
	margin: 20px;
	background-color: transparent;
}

#HVACButton {
	background-size: 212px 212px;
	height: 212px;
    width: 212px;
	border-style: none;
	cursor: pointer;
	margin: 15px;
	background-color: transparent;	
}

#DoorButton {
    background-image: url( 'images/Icons/Door.png' );
}

#ElectricalButton {
    background-image: url( 'images/Icons/Electrical.png' );
}

#ExteriorButton {
    background-image: url( 'images/Icons/Exterior.png' );
}

#FloorButton {
    background-image: url( 'images/Icons/Floor.png' );
}

#HVACButton {
    background-image: url( 'images/Icons/HVAC.png' );
}

#InteriorButton {
    background-image: url( 'images/Icons/Interior.png' );
}

#KitchenButton {
    background-image: url( 'images/Icons/Kitchen.png' );
}

#PlumbingButton {
    background-image: url( 'images/Icons/Plumbing.png' );
}

#RoofButton {
    background-image: url( 'images/Icons/Roof.png' );
}

/*hover effect*/
#DoorButton:hover {
    background-image: url( 'images/Icons/Door-hover.png' );
}

#ElectricalButton:hover {
    background-image: url( 'images/Icons/Electrical-hover.png' );
}

#ExteriorButton:hover {
    background-image: url( 'images/Icons/Exterior-hover.png' );
}

#FloorButton:hover {
    background-image: url( 'images/Icons/Floor-hover.png' );
}

#HVACButton:hover {
    background-image: url( 'images/Icons/HVAC-hover.png' );
}

#InteriorButton:hover {
    background-image: url( 'images/Icons/Interior-hover.png' );
}

#KitchenButton:hover {
    background-image: url( 'images/Icons/Kitchen-hover.png' );
}

#PlumbingButton:hover {
    background-image: url( 'images/Icons/Plumbing-hover.png' );
}

#RoofButton:hover {
    background-image: url( 'images/Icons/Roof-hover.png' );
}


#payments {
	width: 75%;
}

#payments td {
	width: 20%;
	padding-left: 5px;
    padding-right: 5px;
}

#payments p {
	margin-bottom: 5px;
}

.instruct {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	padding-left:5em;
}

.instructHeader {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}