/*
------------------------------------------------------------------------
Fb systems
------------------------------------------------------------------------

Author:     Chuck Spidell, chuck@illusiodesign.com
Updated:    May 28, 2009
Copyright:  (c)2009 ILLUSIO design

All rights reserved.
*/


/*
------------------------------------------------------------------------
B R O W S E R  Reset
------------------------------------------------------------------------
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; background: #ffffff; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/*
------------------------------------------------------------------------
G L O B A L
------------------------------------------------------------------------
*/

html, body { height: 100%; }
html { font-size: 76%; }
body {
	font-family: Verdana,"Trebuchet MS", Arial, sans-serif;
	font-size: .9em;
	background: #122029;
	color: #758fa3;
	}

p {
	line-height: 1.4em;
	}

h1,h2,h3,h4 {
 font-size: 1.4em;
 padding-bottom: 15px;
 }


.clear {
	clear: both;
	}

.lft {
	float: left;
	}

.rght {
	float: right;
	}

.pos_rel {
	position: relative;
	}

.pos_abs {
	position: absolute;
	}

.hidden {
	display: none;
	}

a, a:visited {
	color: #758fa3;
	text-decoration: none;
	}

.full_height {
	height: 100%;
	}


/*
------------------------------------------------------------------------
G E N E R A L pages - About / Resources / Contact
------------------------------------------------------------------------
*/


/* Header images */
.head_gen_about {
 width: 980px;
 height: 230px;
 background: url(../_img/bg_header_gen_about.png) left top no-repeat;
 }

.head_gen_contact {
 width: 980px;
 height: 230px;
 background: url(../_img/bg_header_gen_contact.png) left top no-repeat;
 }

.head_gen_resources {
 width: 980px;
 height: 230px;
 background: url(../_img/bg_header_gen_resources.png) left top no-repeat;
 }


/* Columns */
.col {
 position: absolute;
 top: 30px;
 }

.left {
 left: 20px;
 width: 290px;
 }

.mid {
 left: 365px;
 width: 290px;
 }

.right {
 right: 0px;
 width: 290px;
 }

.col ul {
 margin: 0px 0px 5px 15px;
 list-style: circle;
 }

.col li {
 line-height: 1.4em;
 padding: 0px 0px 7px 5px;
 }

.col p {
 padding-bottom: 20px;
 }

.col a, .col a:visited {
 text-decoration: underline;
 }

.col a:hover, .col a:hover {
 text-decoration: none;
 }



/*
------------------------------------------------------------------------
C O N T A I N E R S
------------------------------------------------------------------------
*/

.container_main {
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	background: url(../_img/bg_grad_top.jpg) left top repeat-x;
	}

.container {
	margin: 0px auto;
	padding: 0px;
	width: 980px;
	text-align: left;
	}


/*
------------------------------------------------------------------------
H E A D E R
------------------------------------------------------------------------
*/

#header {
	position: relative;
	margin: 0px auto;
	width: 980px;
	height: 110px;
	}

/* Fb Systems logo */
.logo a, .logo a:visited {
	position: absolute;
	top: 30px;
	left: 10px;
	width: 335px;
	height: 84px;
	background: url(../_img/logo_fbsystems.png) left top no-repeat;
	}

/* Floodbloc logo */
.logo_floodbloc a, .logo_floodbloc a:visited {
	position: absolute;
	top: 30px;
	left: 0px;
	width: 316px;
	height: 82px;
	background: url(../_img/logo_floodbloc.png) left top no-repeat;
	}

/* Rpd logo */
.logo_rpd a, .logo_rpd a:visited {
	position: absolute;
	top: 30px;
	left: 0px;
	width: 316px;
	height: 82px;
	background: url(../_img/logo_rpdhead.png) left top no-repeat;
	}

.menu {
	position: absolute;
	top: 55px;
	right: 0px;
	margin: -2px 0px 0px 0px;
	list-style-type: none;
	}

.menu li {
	margin: 0px 0px 0px 0px;
	float: left;
	}

.menu li a, .menu li a:visited {

	padding: 5px 20px;
	color: #596570;
	font-weight: bold;
	font-size: .9em;
	text-decoration: none;
	display: block;
	}

.menu li a:hover, .menu li.current a, .menu li.current a:visited {
	color: #6890c9;
	}

.menu li.current a, .menu li.current a:visited {
	background: url(../_img/menu_bg_current.png) left top repeat-x;
	height: 29px;
	}


/*
------------------------------------------------------------------------
I N D E X - Flash Video
------------------------------------------------------------------------
*/

/* Get Flash button */
#flash_vid img {
	 position: relative;
	 top: 125px;
	 left: 166px;
	 width: 391px;
	 height: 136px;
	 }


#container_flash {
	margin: 0px auto;
	width: 980px;
	height: 448px;
	background: url(../_img/bg_video_main.png) left top no-repeat;
	display: block;
	/* border: 1px solid #999; */
	clear: both;
	}

#container_flash p {
	padding: 150px 0px 0px 0px;
	width: 196px;
	color: #1a3242;
	line-height: 1.6em;
	float: right;
	}

#flash_vid {
	position: relative;
	top: 40px;
	left: 30px;
	width: 720px;
	height: 400px;
	float: left;
	}

object {
	display: block;
	}


/*
------------------------------------------------------------------------
I N D E X - Small videos
------------------------------------------------------------------------
*/

.vid_screen_bg {
	margin: 30px 0px 40px 20px;
	width: 570px;
	text-decoration: none;
	float: left;
	}

.floodbloc {
	height: 198px;
	background: url(../_img/bg_video_floodbloc.png) left top no-repeat;
	}

.rpd {
	height: 229px;
	background: url(../_img/bg_video_rpd.png) left top no-repeat;
	}


.vid_screen_bg p {
	margin: 32px 0px 0px 0px;
	width: 376px;
	float: right;
	}

.vid_screens {
	margin: 6px 0px 0px 6px;
	width: 570px;
	height: 129px;
}

.vid_screens img {
	padding: 0px 6px 0px 0px;
}

#rpd_crop {
 margin: 30px 0px 0px 20px;
 width: 570px;
 background: url(../_img/bg_video_rpd_short.png) left top no-repeat;
 float: left;
 }

#rpd_crop p {
 width: 376px;
 float: right;
 }

/*
------------------------------------------------------------------------
I N D E X - Buttons Floodbloc / Rpd
------------------------------------------------------------------------
*/

#btn_floodbloc {
	position: absolute;
	top: 30px;
	right: 195px;
	width: 134px;
	float: right;
	}

#btn_floodbloc p, #btn_rpd p {
	position: relative;
	top: 26px;
	width: 150px;
	}

.btn_pdf {
	position: relative;
	top: 30px;
	right: 50px;
	width: 270px;
	float: right;
	}

.btn_pdf p{
	position: relative;
	top: 26px;
	width: 150px;
	}


#btn_rpd {
	position: absolute;
	top: 30px;
	width: 134px;
	right: 10px;
	float: right;
	}


/*
------------------------------------------------------------------------
A B O U T page - headers
------------------------------------------------------------------------
*/

.container_about_head_fb {
	position: relative;
	margin: 0px auto;
	width: 980px;
	height: 312px;
	background: url(../_img/bg_header_about_fb.png) left top no-repeat;
	}

.container_about_head_fb p {
	position: absolute;
	top: 190px;
	left: 366px;
	width: 360px;
	color: #1a3242;
	line-height: 1.6em;
	}

.container_about_head_rpd {
	position: relative;
	margin: 0px auto;
	width: 980px;
	height: 312px;
	background: url(../_img/bg_header_about_rpd.png) left top no-repeat;
	}

.container_about_head_rpd p {
	position: absolute;
	top: 160px;
	left: 366px;
	width: 360px;
	color: #1a3242;
	line-height: 1.6em;
	}

/*
------------------------------------------------------------------------
A B O U T page - left coumn
------------------------------------------------------------------------
*/

#about_tbl_head_fb {
	position: absolute;
	top: 0px;
	left: 20px;
	width: 570px;
	height: 48px;
	background: url(../_img/bg_about_table_fb.png) left top no-repeat;
	}

#about_tbl_head_rpd {
	position: absolute;
	top: 0px;
	left: 20px;
	width: 570px;
	height: 48px;
	background: url(../_img/bg_about_table_rpd.png) left top no-repeat;
	}


#about_lcol_wrap {
	position: absolute;
	top: 50px;
	left: 20px;
	width: 580px;
	background: url(../_img/bg_about_table_fb.png) left top no-repeat;
	}

.about_table {
	position: relative;
	width: 572px;
	background: #1c2b35;
	margin-top: 20px;
	}

.about_table td {
	width: 286px;
	border-right: 3px solid #122029;
	border-bottom: 3px solid #122029;
	}

.about_table td.total {
	padding: 5px 10px;
	background: #213441;
	}

.about_table ul {
	margin: 0px 25px 5px 25px;
	list-style: circle;
	}

.about_table li {
	line-height: 1.4em;
	padding-bottom: 7px;
	}

.list_head {
	list-style: none;
	font-size: 1em;
	font-weight: bold;
	padding-top: 15px;
	}

.bold {
	font-weight: bold;
	}


/*
------------------------------------------------------------------------
A B O U T page - right column
------------------------------------------------------------------------
*/

#about_rcol_wrap {
	position: absolute;
	top: 30px;
	right: 0px;
	width: 330px;
	}

/* Product info */
#about_fbinfo {
	position: relative;
	padding-bottom: 15px;
	}

#about_fbinfo p {
	padding-bottom: 15px;
	}

#about_fbinfo ul {
	margin: 0px 25px 5px 25px;
	list-style: circle;
	}

#about_fbinfo li {
	line-height: 1.4em;
	padding-bottom: 7px;
	}


/* Real Story sidebar */

#about_real_story {
	position: relative;
	width: 330px;
	height: 297px;
	background: url(../_img/bg_about_real_story.png) left top no-repeat;
	}

#about_real_story p {
	position: relative;
	top: 110px;
	left: 30px;
	width: 270px;
	}


/* About FB sidebar - About page */

#about_fb {
	position: relative;
	width: 330px;
	height: 183px;
	background: url(../_img/bg_sidebar_about.png) left top no-repeat;
	}

#about_fb p {
	position: relative;
	top: 70px;
	left: 30px;
	width: 270px;
	}


/* About FB sidebar - Home page */

#about_fb_home {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 330px;
	height: 183px;
	background: url(../_img/bg_sidebar_about.png) left top no-repeat;
	}

#about_fb_home p {
	position: relative;
	top: 70px;
	left: 30px;
	width: 270px;
	}


/*
------------------------------------------------------------------------
C O N T A C T - email form
------------------------------------------------------------------------
*/
 

#contact_form {
 position: absolute;
 top: 200px;
 left: 365px;
 width: 582px;
 }
 
#contact_form input, #contact_form textarea {
 width: 250px;
 padding: 4px 4px 6px 4px;
 margin: 10px 0 15px 0;
 font-family: Verdana,"Trebuchet MS", Arial, sans-serif;
 color: #122029;
 font-size: 1em;
 background: url(../_img/bg_grad_top.jpg) left -270px repeat-x;
 border: none;
 display: block;
 }
 
#contact_form textarea {
 width: 280px;
 height: 96px;
 }
 
#contact_form input.btn_submit {
 width: 70px;
 height: 30px;
 font-family: Verdana,"Trebuchet MS", Arial, sans-serif;
 color: #122029;
 font-size: 1em;
 font-weight: bold;
 background: url(../_img/bg_grad_top.jpg) left -300px repeat-x;
 cursor: pointer;
 }
 

/* For error messages */
#error_msg {
 position: absolute;
 top: 225px;
 left: 25px;
 width: 230px;
 color: #4c80bf;
 font-weight: bold;
 line-height: 1.5em;
 border: 1px solid #4c80bf;
 padding: 20px;
 }

/*
------------------------------------------------------------------------
F O O T E R
------------------------------------------------------------------------
*/

#logo_fbsystems a, #logo_fbsystems a:visited {
	display: block;
	width: 187px;
	height: 60px;
	margin: 60px 0px 20px 20px;
	background: url(../_img/footer_logo_fb.gif) left top no-repeat;
	}

#footer {
	margin: 0px auto;
	width: 980px;
	height: 70px;
	background: url(../_img/bg_footer.png) left top no-repeat;
	}

#footer p a, #footer p a:visited {
	color: #758fa3;
	text-decoration: none;
	}

/*
#footer p a:hover {
	color: #fff;
	}

*/

p.copyright {
	padding: 30px 0px 0px 45px;
	float: left;
	}

p.credit {
	padding: 30px 25px 0px 0px;
	float: right;
	}