/*
 * @Author: Robby
 *
*/
body{
	background-color: rgb(250,250,250);
	margin: 0 auto;
	font-family: "Trebuchet MS";
}
@font-face{
	font-family: "Lobster";
	src: url('../fonts/Lobster-Regular.ttf');
}
h1, h2, h3, h4, h5, h6, p{
	padding: 0;
	margin: 0;
	font-weight: normal;
}
.col{
	vertical-align: top;
	display: inline-block;
}
/*
 *
 *
*/
nav{
	background-color: rgb(245,245,245);
	padding: 2% 0;
	color: #0F52BA;
}
	nav .content{
		width: 80%;
		margin: 0 auto;
	}
	nav .col-left{
		width: 50%;
	}
		nav h1{
			font-size: 150%;
		}
		nav h2{
			font-size: 100%;
		}
	nav .col-right{
		width: 49%;
		text-align: right;
	}
		nav a{
			color: #0F52BA;
			text-decoration: none;
			display: inline-block;
			margin: 2% 2% 0 2%;
		}
/*
 *
 *
*/
header{
	box-shadow: inset 0 0 3px rgb(0,0,0), inset 0 0 3px rgb(0,0,0), inset 0 0 3px rgb(0,0,0);
	background-color: #0F52BA;
	padding: 2% 0;
	width: 100%;
	color: rgb(255,255,255);
}
	header .content{
		width: 80%;
		margin: 0 auto;
	}
		header .col-left{
			width: 39%;
		}
			header p{
				padding: 2% 15% 2% 0;
				font-size: 100%;
				font-style: italic;
				text-align: justify;
			}
			header .testimonial{
				padding: 5% 15% 0 0;
				margin: 0;
				font-size: 100%;
				font-style: italic;
				text-align: justify;
			}
			header .most_recent_details{
			    font-size: 85%;
			}
				header .reviewer{
					padding: 2% 0 0 50%;
					font-weight: bold;
				}
				header .vehicle{
					font-size: 85%;
					padding: 1% 0 0 50%;
					font-style: italic;
				}
		header .col-right{
			width: 60%;
		}
			header h1{
				padding: 0 0 0 3%;
				font-family: "Lobster";
				font-size: 150%;
			}
			header .imgs{
				margin: 1% 0 1% 3%;
			}
				header .imgs img{
					border-radius: 5px;
					background-color: rgb(245,245,245);
					padding: 5%;
					width: 128px;
					height: 128px;
				}
/*
 *
 *
*/
article{
	width: 75%;
	margin: 2% auto;
}
	/*
	 * index.html, index.php
	 *
	*/
	article .row{
		border-radius: 5px;
		border: 1px solid rgb(200,200,200);
		padding: 2%;
		margin: 2% auto;
	}
		article .row:nth-child(even){
			border-radius: 5px;
			background-color: rgb(245,245,245);
		}
	article .col-left{
		width: 49%;
	}
	article .col-right{
		width: 50%;
	}
	article h1{
		font-family: "Lobster";
		color: #0F52BA;
		font-size: 200%;
	}
	article h2{
		font-size: 100%;
	}
	article a{
		color: #0F52BA;
		font-size: 100%;
		text-decoration: none;
		text-align: right;
	}
		article a.col{
			color: #0F52BA;
			margin: 2% 2% 0 0;
		}
		article a:hover{
			text-decoration: underline;
		}
	article .pkg_col{
		width: 32%;
		margin: 2% 0;
		text-align: center;
	}
		article h3{
			color: #0F52BA;
			font-size: 150%;
		}
		article h4{
			padding: 2% 0;
			font-size: 125%;
			font-style: italic;
		}
		article p{
		    line-height: 1.5;
		}
			article .imgs{
				margin: 1% 3% 1% 0;
			}
				article .imgs img{
					border-radius: 5px;
					background-color: rgb(245,245,245);
					padding: 5%;
					width: 128px;
					height: 128px;
				}
		article .book{
			border-radius: 5px;
			background-color: #0F52BA;
			padding: 5%;
			width: 50%;
			color: rgb(255,255,255);
			margin: 10% auto 0 auto;
		}
			article .book a{
				color: rgb(255,255,255);
				text-decoration: none;
			}
	article .testimonial_left{
		width: 79%;
	}
	article .testimonial_right{
		border-radius: 5px;
		border: 1px solid rgb(200,200,200);
		background: rgb(245,245,245);
		padding: 2%;
		width: 16%;
		text-align: center;
	}
	article h4.testimonial{
		padding: 1% 0 2% 0;
		font-size: 100%;
	}            section{
                padding: 0 2%;
                float: right;
                width: 81%;
                height: 100%;
                overflow: auto;
                margin: 0 auto;
            }
            /* form styling */
               article form{
                    box-shadow: 0 0 3px rgb(150,150,150), 0 0 3px rgb(150,150,150), 0 0 3px rgb(150,150,150);
                    background-color: rgb(255,255,255);
                    padding: 2% 5%;
                    width: 90%;
                    margin: 2% auto;
                }
                article form h1{
                    padding: 0% 0 1% 0;
                    font-size: 200%;
                }
                article form .col{
                    width: 20%;
                    margin: 1%;
                    font-size: 85%;
                    vertical-align: top;
                    display: inline-block;
                }
                article form .col-title{
                    font-size: 100%;
                }
                article form h2{
                    padding: 0 0 1% 0;
                    color: rgb(15,82,186);
                    font-size: 100%;
                }
                article form input[type="text"],
                article form input[type="date"],
                article form input[type="tel"],
                article form input[type="time"],
                article form textarea,
                article form select,
                article form option{
                    border: 1px solid rgb(200,200,200);
                    background-color: rgb(255,255,255);
                    padding: 3%;
                    Width: 100%;
                    margin: 0 0 10% 0;
                    resize: none;
                }
                article form input[type="submit"]{
                    border: none;
                    border-radius: 5px;
                    background-color: rgba(15,82,186,.2);
                    padding: 2%;
                    width: 25%;
                    margin: 3% 0 0 0;
                    color: rgb(255,255,255);
                }
                    article form input[type="submit"]:hover{
                    background-color: rgba(15,82,186,.5);
                    cursor: pointer;
                    }
/*
 * FOOTER
 *
*/
footer{
    box-shadow: 0 0 5px rgb(0,0,0);
    background-color: #0F52BA;
    padding: 2% 0;
    margin: 5% 0 0 0;
}
    footer .content{
        width: 80%;
        margin: 0 auto;
    }
        footer .col_3{
            width: 33%;
        }
            .center{
                text-align: center;
            }
            footer h1{
                color: rgb(255,255,255);
                font-size: 100%;
                line-height: 1.5;
            }
            footer h2{
                font-family: "Lobster";
                color: rgb(255,255,255);
                font-size: 150%;
            }
            footer a{
                color: rgb(255,255,255);
                text-decoration: none;
                line-height: 1.5;
            }
            footer img{
                width: 64px;
                height: 64px;
            }