@charset "UTF-8";
/* CSS Document */

#body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: url(images/bg.jpg) top center repeat-y #fff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #717073;
	border: 0;
	font-family: century gothic, lucida grande, lucida sans, verdana;
}

#rotator {
	background: url(images/mainbackimage-01.gif) no-repeat center top;
	position: relative;
	top: 0px;
	z-index: 500;
}

#body_in {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: url(images/bg_in.jpg) top center repeat-y #fff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #717073;
	border: 0;
	font-family: century gothic, lucida grande, lucida sans, verdana;
}

#body_iframe {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #717073;
	border: 0;
	font-family: century gothic, lucida grande, lucida sans, verdana;
}

#container {
	width: 968px;  /* using 20px less than a full 800/1024px width allows for browser chrome and avoids a horizontal scroll bar */
	height: 700px; /* the auto margins (in conjunction with a width) center the page */
	border: 0px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	overflow: hidden;
}

#mainContent {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	overflow: hidden;
}

#main {
	width: 968px;
	height: auto;
	border: 0;
	margin: 0;
	padding: 0;
}

#leftcontent {
	width: 484px;
	height: 700px;
	position: relative;
	top: 0px;
	text-align: right;
}

#leftcontent_in {
	width: 284px;
	height: 700px;
	position: relative;
	top: 0px;
	text-align: right;
}

#navi {
	width: 150px;
	height: 120px;
	text-align: right;
	position: relative;
	top: 30px;
	left: 300px;
	font-weight: bold;
	font-size: 20px;
	color: #3c3c3c;
}

#navi_in {
	width: 150px;
	height: 120px;
	text-align: right;
	position: relative;
	top: 30px;
	left: 100px;
	font-weight: bold;
	font-size: 20px;
	color: #999;
}

#navi a {
	text-decoration: none;
	color: #3c3c3c;
}

#navi_in a {
	text-decoration: none;
	color: #999;
}

#navi a:hover {
	text-decoration: none;
	color: #ff0090;
	text-transform: uppercase;
}

#navi_in a:hover {
	text-decoration: none;
	color: #ff0090;
	text-transform: uppercase;
}

#swapcolors {
height: 20px;
width: 130px;
margin-top: 0px;
text-align: center;
background: #fff;
position: relative;
top: 20px;
left: 325px;
color: #c3c3c3;
text-decoration: none;
z-index: 100;
}

#swapcolors a {
	text-decoration: none;
	color: #c3c3c3;
}

#swapcolors a:hover {
	text-decoration: none;
	color: #666;
}

#swapcolors_in {
height: 20px;
width: 130px;
margin-top: 0px;
text-align: center;
background: #3c3c3c;
position: relative;
top: 20px;
left: 125px;
color: #c3c3c3;
text-decoration: none;
z-index: 100;
}

#swapcolors_in a {
	text-decoration: none;
	color: #c3c3c3;
}

#swapcolors_in a:hover {
	text-decoration: none;
	color: #ff0090;
}

#swapper a { /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
border: 1px solid #999;
width: 20px;
height: 20px;
background: #666;
text-decoration: none;
position: relative;
}

#swapper a.selected { /*style for selected page's toggler link. ".selected" class auto generated! */
background: #fff;
color: #ff0090;
border: 1px solid #fff;
}

#swapper a:hover {
background: #666;
color: #ff0090;
border: 1px solid #999;
}

#logo {
	width: 333px;
	height: 225px;
	position: relative;
	top: 100px;
	left: 75px;
	background: url(images/1fi_logo_r.png);
}

#logo_in {
	width: 166px;
	height: 112px;
	position: relative;
	top: 150px;
	left: 70px;
	background: url(images/1fi_logo_white_r.png);
}

#contactwrap {
	width: 200px;
	height: 65px;
	position: relative;
	top: 220px;
	left: 248px;
}

#contactwrap_in {
	width: 200px;
	height: 65px;
	position: relative;
	top: 330px;
	left: 50px;
}

#contacttitle {
	width: 200px;
	height: 35px;
	text-align: right;
	position: relative;
	font-weight: bold;
	font-size: 30px;
	color: #999;
}

#contacttitle_in {
	width: 200px;
	height: 35px;
	text-align: right;
	position: relative;
	font-weight: bold;
	font-size: 30px;
	color: #fff;
}

#contact {
	width: 200px;
	height: 30px;
	text-align: right;
	position: relative;
	top: 10px;
	font-weight: bold;
	font-size: 20px;
	color: #3c3c3c;
}

#contact a {
	text-decoration: none;
	color: #3c3c3c;
}

#contact a:hover {
	text-decoration: none;
	color: #ff0090;
	text-transform: uppercase;
}

#contact_in {
	width: 200px;
	height: 30px;
	text-align: right;
	position: relative;
	top: 10px;
	font-weight: bold;
	font-size: 20px;
	color: #999;
}

#contact_in a {
	text-decoration: none;
	color: #999;
}

#contact_in a:hover {
	text-decoration: none;
	color: #ff0090;
	text-transform: uppercase;
}


#copyright {
	position: relative;
	top: 257px;
	right: -420px;
	font-size: 12px;
	color: #999;
}

#copyright_in {
	position: relative;
	top: 370px;
	right: -620px;
	font-size: 12px;
	color: #999;
}

#rightcontent {
	width: 484px;
	height: 100%;
	position: relative;
	top: -700px;
	left: 500px;
	color: #fff;
}

#rightcontent_in {
	width: 684px;
	height: 700px;
	position: relative;
	top: -700px;
	left: 300px;
}

#welcome {
	width: 200px;
	height: 50px;
	position: relative;
	top: 30px;
	left: 20px;
	font-size: 44px;
}

#welcomeblurb {
	width: 400px;
	height: 300px;
	position: relative;
	top: 20px;
	left: 20px;
	font-size: 14px;
}

#welcomeblurb_in {
	width: 400px;
	height: 150px;
	position: relative;
	top: -30px;
	left: 220px;
	font-size: 12px;
	border-left: 1px dotted #999;
	padding-left: 10px;
}

#port_navi {
	width: 600px;
	height: 30px;
	background-color: #fff;
	color: #333;
	position: relative;
	left: 5px;
	margin-bottom: 5px;
}

#port_navi_item {
	display: -moz-inline-box;
	display: inline-block;
	border: 0px;
	width: 105px;
	height: 18px;
	padding: 4px;
	color: #000;
	background: #fff;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
}

#port_navi_item:hover {
	display: -moz-inline-box;
	display: inline-block;
	border: 0px;
	width: 105px;
	height: 18px;
	padding: 4px;
	color: #999;
	background: #FFFFFF;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

#port_navi_item_active {
	display: -moz-inline-box;
	display: inline-block;
	border: 0px;
	width: 105px;
	height: 18px;
	padding: 4px;
	background: #fff;
	color: #999;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

#port_content {
	background: #fff;
	width: 600px;
	height: 430px;
}

#motion_index {
	height: 364px;
	width: 500px;
	overflow: hidden;
	position: relative;
	top: -50px;
}

    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

/* MAIN SLIDER CODE FROM HERE DOWN */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:485px;
		height:364px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
/* END SLIDER */


/* PORTFOLIO GLIDER CODE FROM HERE DOWN */

.glidecontentwrapper_in {
position: relative; /* Do not change this value */
left: 30px;
width: 600px;
height: 400px; /* Set height to be able to contain height of largest content shown*/
border: 0px;
padding: 0px;
margin: 0px;
overflow: hidden;
text-align: center;
}
/*
	Total wrapper width: 350px+5px+5px=360px
	Or width of wrapper div itself plus any left and right CSS border and padding
	Adjust related containers below according to comments
*/


.glidecontent_in { /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: #fff;
padding: 0px;
visibility: hidden;
width: 600px;
text-align: center;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
	Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler_in { /*style for DIV used to contain toggler links. */
width: 20px;
margin-top: 0px;
text-align: center; /*How to align pagination links: "left", "center", or "right" */
background: #fff; /*always declare an explicit background color for fade effect to properly render in IE*/
position: relative;
top: -400px;
left: 5px;
}
/*
 Total contenttoggler width: 350px+5px+5px=360px
	Or total width of wrapper div (counting wrapper border/padding)
*/

.glidecontenttoggler_in a { /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
border: 1px solid #ccc;
width: 20px;
height: 20px;
color: #000;
background: #ccc;
text-decoration: none;
margin-bottom: 5px;
}

.glidecontenttoggler_in a.selected { /*style for selected page's toggler link. ".selected" class auto generated! */
background: #3c3c3c;
color: #fff;
border: 1px solid #000;
}

.glidecontenttoggler_in a:hover {
background: #fff;
color: #999;
border: 1px solid #999;
}

.glidecontenttoggler_in a.toc { /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler_in a.prev, .glidecontenttoggler a.next { /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.glidecontenttoggler_in a.prev:hover, .glidecontenttoggler a.next:hover {
background: #999;
color: #999;
}