﻿/**********************************************************************

main.css
defines styles for rjdiepenbrock.com

**********************************************************************/


/**************************************
Main Site styles
**************************************/
body {
	background: #eee;
	color: #000;
	font: normal 11px arial,verdana,sans-serif;
	margin: 0 auto;
	padding: 5px 0;
}

/* generic styles */
.arrow1 { 
	background: url("/images/misc/arrow1.gif") no-repeat;
	margin: 0;
	padding: 0 0 0 15px;
}
.arrow2 { 
	background: url("/images/misc/arrow2.gif") no-repeat;
	margin: 0;
	padding: 0 0 0 15px;
}

.bg-black { background: #000; }
.bg-white { background: #fff; }

.clear { clear: both; }
.float-left { float: left; }
.float-right { float: right; }



/**************************************
Main Header styles
**************************************/
#header {															/* header contatiner */
	color: #fff;
	font: normal 11px arial,verdana,sans-serif;
	margin: 0;
	padding: 0;
}
#header .bg-header {
	background: url("/images/misc/bg_header.gif") transparent no-repeat;
	width: 448px;
	margin: 0;
	padding: 0;
}

/* weather module */
#weather {
	clear: both;
	float: right;
	width: 375px;
	margin: 0 auto;
	padding: 15px 0 0 15px
}
#weather img {
	float: left;
	width: 18px;
	vertical-align: middle;
	margin: 2px 5px 0 0;
	padding: 0;
}

/* weather cities */
#weather .city {
	float: left;
	width: auto;
	color: #fff;
	font: normal 11px arial,verdana,sans-serif;
	text-align: left;
	margin: 0;
	padding: 0;
}


/**************************************
Main Body styles
**************************************/
#site-bg {															/* site bg begins in main body table */
	background: url("/images/misc/bg_site.gif") transparent;
	width: 750px;
	margin: 0;
	padding: 0;
}


/* template w/ rightrail */
#content {
	width: 475px;
	border-left: 2px solid #233B54;
	border-right: 2px solid #233B54;
	color: #000;
	font: normal 11px/16px arial,verdana,sans-serif;
	margin: 0;
	padding: 10px 5px;
}
#content a {
	color: #420b52;
	font-weight: bold;
	text-decoration: none;
}
#content a:hover {
	color: #420b52;
	text-decoration: underline;
}
#content img {
	border: 1px solid #420b52;
	margin: 0;
	padding: 0;
}
#content .blog h2 {
	background: url("/images/misc/arrow4.gif") no-repeat center left;
	color: #000;
	font: bold 22px/15px arial,verdana,sans-serif;
	margin: 10px 0 0 10px;
	padding: 0 0 0 15px;
}
#content .blog ul {
	margin: 0;
	padding: 15px 20px;
}
#content .blog li {
	background: url("/images/misc/arrow3.gif") no-repeat;
	list-style: none;
	margin: 0 0 0 18px;
	padding: 0 0 3px 15px;
}
#content .wedding {
	margin: 0;
	padding: 10px 0;
}
#content .wedding h2 {
	background: url("/images/misc/arrow4.gif") no-repeat center left;
	color: #000;
	font: bold 16px/16px arial,verdana,sans-serif;
	margin: 0 0 0 10px;
	padding: 0 0 0 15px;
}


/* rightrail styles */
#rightrail {
	width: 150px;
	color: #000;
	font: normal 11px/16px arial,verdana,sans-serif;
	margin: 0;
	padding: 7px 10px 10px 7px;
}
#rightrail a {
	color: #420b52;
	font-weight: bold;
	text-decoration: none;
}
#rightrail a:hover {
	color: #420b52;
	text-decoration: underline;
}
#rightrail .divider {
	border-top: 1px solid #420b52;
	border-bottom: 1px solid #420b52;
	margin: 5px 0;
	padding: 5px 0;
}
#rightrail .arrow1-pad {
	margin-left: 12px;
	padding-left: 10px;
}


/* template w/o rightrail */
#inside {
	width: 625px;
	border-left: 2px solid #233B54;
	color: #000;
	font: normal 11px/16px arial,verdana,sans-serif;
	margin: 0;
	padding: 10px 5px;
}
#inside a {
	color: #420b52;
	text-decoration: none;
}
#inside a:hover {
	color: #420b52;
	text-decoration: underline;
}
#inside h2 {
	color: #420b52;
	font: bold 14px arial,verdana,sans-serif;
	text-align: left;
	margin: 0;
	padding: 0 0 5px 0;
}
#inside .portfolio {
	color: #000;
	width: 500px;
	font: normal 12px arial,verdana,sans-serif;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
#inside .portfolio img.website {
	display: block;
	width: auto;
	height: auto;
	border: 1px solid #420b52;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
#inside .portfolio-box {
	float: left;
	width: 240px;
	font-weight: normal;
	text-align: center;
	margin: 0 auto;
	padding: 10px 10px 10px 0;
}
#inside .portfolio-box div {
	font: normal 12px arial;
	text-align: center;
	margin: 0;
	padding: 5px 0 0;
}
#inside .portfolio-box h2 {
	width: 240px;
	text-align: center;
}


/**************************************
Main Nav styles
**************************************/
#nav {																	/* nav container */
	width: 125px;
	color: #000;
	font: bold 12px/16px arial,verdana,sans-serif;
	margin: 0;
	padding: 15px 3px 10px 18px;
}
#nav a {
	color: #000;
	text-decoration: none;
}
#nav a:hover {
	color: #420b52;
	text-decoration: underline;
}
#nav .sub-nav {
	margin: 0 0 0 15px;
}
#nav .google-form {
	margin: 0;
	padding: 25px 4px 6px 4px;
}
#nav .google-input {
	border: 1px solid #420b52;
	margin: 0 0 3px 0;
	padding: 0;
}


/* footer nav */
#footer {																/* footer container */
	color: #fff;
	font: bold 10px arial,verdana,sans-serif;
	margin: 0;
	padding: 0;
}
#footer .footer-table {													/* footer nav table */
	background: url("/images/misc/bg_footer.gif") transparent no-repeat;
	width: 750px;
	height: 30px;
	margin: 0;
	padding: 0;
}
#footer .footer-table a {
	color: #fff;
	text-decoration: none;
}
#footer .footer-table a:hover {
	color: #fff;
	text-decoration: underline;
}
#footer .footer-left {													/* footer nav left */
	float: left;
	width: 280px;
	text-align: left;
	margin: 0;
	padding: 7px 0 0 12px;
}
#footer .footer-center {												/* footer nav center */
	float: left;
	width: 235px;
	text-align: center;
	margin: 0;
	padding: 7px 0 0 0;
}
#footer .footer-right {													/* footer nav right */
	float: left;
	width: 200px;
	text-align: right;
	margin: 0;
	padding: 7px 12px 0 0;
}

