/* ~-~-~~-~-~ CSS Document -~-~-~-~-~ *\
|                                      |
|    Created for                       |
|   WebsitesinaFlash.com               |
|   by Ashton Sanders                  |
|                                      |
\* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */


/* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~ GENERAL FORMATTING -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */



/* ~-~-~~-~-~~-~-~~-~-~ MULTI USE FORMATING ~-~-~~-~-~-~-~-~-~-~ */


.fourth {width:21%; padding:0 2%}
.third {width:29%; padding:0 2%}

.third.left {text-align:center;}

.left { float:left}
img.left { margin-right:10px;}
.right { float:right}
img.right { margin-left:10px;}
.aleft { text-align:left}
.aright { text-align:right !important}

img.center { margin:0 auto; }
.center {text-align:center}
.clear {clear:both;}
.eclear {clear:both; font-size:1px;}



/* ~-~-~~-~-~~-~-~~-~-~ TEXT ~-~-~~-~-~-~-~-~-~-~ */

h1 { color: #FFF;}
h1, h2 { margin:0 0 10px; font-weight:100;}

h3 { color:#1D3D4E; font-weight:100;}


p, ul, ol, blockquote { font-size:14px; }

 
 blockquote {margin:4px 12px; padding: 8px 25px 8px 50px; border: solid #034E65; border-width: 1px 0; background: url('../images/icons/quote.jpg') no-repeat top left}


.white h2, .white p, .white blockquote, .white ul , .white ol { color:#1D3D4E !important; font-weight:100; }

.white h2, #rnav h3 { border-bottom: 1px solid #1D3D4E; margin: 0 0 10px; font-weight:100;} 


a { color:#04637F; text-decoration:none }
a:hover { color:#04637F; text-decoration:underline }
a:hover img {text-decoration:none !important;}


.input { width: 350px;}


/* ~-~-~~-~-~-~-~-~-~-~-~-~-~-~-~ PAGE LAYOUT -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

html, body {margin:0;padding:0; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}

	
.container { width:1000px; margin:0 auto; text-align:left; position:relative; clear:both}

/* ~-~-~~-~-~~-~-~~-~-~ HEADER ~-~-~~-~-~-~-~-~-~-~ */

#header {
	background: url('../images/layout/hdr-rp.jpg') #FFF bottom left repeat-x;
	height: 115px;
	width:100%;
}
#header .container { height:115px;}
#header #logo { position: absolute; bottom:12px; border:none}


/* ~-~-~~-~-~ NAVIGATION BAR ~-~-~-~-~ */

ul#navbar {
	position: absolute; 
	right:0; 
	bottom:0; 
	margin:0; 
	padding:0 2px 0 0; 
	background: url('../images/layout/nav-divider.jpg') bottom right no-repeat;
}

ul#navbar li { 
	display:block; 
	float:right; 
	padding-left:2px;
	background: url('../images/layout/nav-divider.jpg') bottom left no-repeat;
}

ul#navbar li a { 
	display:block; 
	padding:23px 23px;
	text-decoration:none;
	font-size: 20px;
	color: #024558;
	background: url('../images/layout/nav-hover.jpg') repeat-x;
	background-position: 0 -80px;
}

ul#navbar li a:hover, ul#navbar li a.selected{ background-position: bottom left;}



/* ~-~-~~-~-~~-~-~~-~-~ BLUE ~-~-~~-~-~-~-~-~-~-~ */

#blue { background: url('../images/layout/blue-top.jpg') #04637F top left repeat-x;}
#blue2 { background: url('../images/layout/blue-btm.jpg') bottom left repeat-x;}

#blue h1 { padding: 20px 0; margin:0; font-size:32px; background:  top right no-repeat;}

#blue *, #blue2 * { color:#FFFFFF ;}


/* ~-~-~~-~-~~-~-~~-~-~ GOLD ~-~-~~-~-~-~-~-~-~-~ */
/* ~-~~~-~-~ Old color: A7A37E~-~-~~-~-~-~-~-~-~-~ */

.brownsmall {padding: 10px; background:url('../images/layout/gold-s.jpg') bottom repeat-x #E4CC6A;}
.brown, .brownsmall { border-top: 1px solid #F1E9B8; padding-bottom:15px;}
/* background:url('../images/layout/shdw-btm.jpg') bottom repeat-x #B99E3B; 
8C772D */
.brown p {color:#A38A34; }
.brownsmall .container p {color:#8C772D; margin:0 30px 2px 0px; font-size:16px;}


/* ~-~-~~-~-~~-~-~~-~-~ WHITE ~-~-~~-~-~-~-~-~-~-~ */

.white { padding:15px 0 30px;}
.white .third { background: url('../images/layout/vline.gif') 0 10px no-repeat;}
.white .third:first-child { background: none; margin-left:10px;}
.white .third p { font-size:14px}
.white .third p, .white .third h3{ margin: 0 30px 10px; text-align:left}

.white p{ margin: 0 10px 10px; text-align:left}


#websitedisplay div.left { width:220px;	margin: 0 14px;}

.about .text { width:350px; }

/*#pagecontent img, #rightnav img { border: 5px solid #A7A37E}*/

/* ~-~-~~-~-~~ Right NAV SIDEBAR ~-~-~-~-~ */
	
#rnav {
	background: url('../images/layout/rnav-rp.jpg') 0 67px repeat-y #034659; width: 300px; max-width:300px;
	float:right; position:relative; top: -21px;
} 
#rnav_top {background: url('../images/layout/rnav-top.jpg') left top no-repeat; width: 300px; max-width:300px;}
#rnav_btm {background: url('../images/layout/rnav-btm.jpg') left bottom no-repeat; width: 230px; max-width:300px; padding: 1px 35px 70px;}


#rnav h3, #rnav h4, #rnav p, #rnav li, #rnav a {color:#FFFFFF !important}
#rnav p { margin-left:3px ;}
#rnav a { text-decoration:underline;}
#rnav a img {border: 2px solid #FFF;}
#rnav h3 { border: 0; padding: 10px 0 ; margin:20px 0 0; }
#rnav h4 { padding:0; margin:0 0 10px;}
#rnav ul {margin: 0; padding:0}
#rnav li {
	list-style: none; 
	background: url('../images/layout/rnav-li.jpg') 0 8px no-repeat ;
	padding-left:15px; 
	margin: 0 0 10px; 
	font-size:15px; 
}
#rnav li li{
	font-size:12px; 
	margin: 7px 0 0; 
	background-position:0 5px;
}

/* ~-~-~~-~-~~ WHITE PAGE STYLING ~-~-~-~-~ */

#pagecontent {	width:670px; float:left; }


.blueborder { border: 5px solid #034E65;}

blockquote p.right { margin-top: -15px;}

 

div#website_gallery h3 { display:block; color:#FFFFFF; background: url('../images/layout/blue-top.jpg') #04637F top left repeat-x !important; padding: 5px; width: 100%; height:25px; font-size: 18px }
div#website_gallery img { float:right; margin:0 0 0 25px; border: 5px solid #034E65; margin-top:-40px; }
 
/* Website Services Page */

.single_website_s { float:left; width:488px; margin:0; }
.single_website_s p.right {clear:right; padding-top:8px;}


/* ~-~-~~-~-~~-~-~~-~-~ FOOTER ~-~-~~-~-~-~-~-~-~-~ */

#footer { background: url('../images/layout/footer-rp.jpg') #034D62 top left repeat-x; padding-top:30px;}

#footer * {color:#FFFFFF; text-align:left;}
#footer .left { margin-left:30px;}
#footer #twitter_div {width:240px; line-height:15px;}
#footer h3 { font-size:14px; margin-bottom:10px; font-weight:900}
#footer ul { margin:0; padding-left:10px; list-style:none}
#footer li, #footer p, #footer span { font-size:12px; margin:0;}

#footer #copyright { float: right; font-size:12px; width: 350px}



