/*  
	site:		rlf.co.uk
	author:		johan de silva
	company:	designed by Phoenix plc
	index:	 	* site template
				* forms
				* suckerfish menu
				* bug fixes
				* accessibility	- do not remove			
*/	

/* Site Template */
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;background-color:#fff;line-height:1.7em;margin:0; padding:0}
img{border:0}
a{color:#666; text-decoration:underline}
a:visited{color:#666}
a:hover,
a:focus{color:#003399; text-decoration:none}
a.no-underline{text-decoration:none}

#wrap{width:860px;margin:0 auto;}
#footer{clear:both; width:100%; float:left; margin:30px 0; border-top:1px #ccc dotted; height:50px; text-align:right}
#footer .left-credit{width:400px; height:20px; float:left; text-align:left;}

#header {margin:0;padding:20px 0 0 0; width:100%; height:100px; background:#fff url('../images/navigation_line.gif') repeat-x bottom left; z-index:2;position:relative; clear:both; float:left}
#logo {float:right; width:185px;}
#breadcrumb {margin:0; padding:10px 0 0 0; width:100%; height:20px; clear:both; float:left; }
#breadcrumb span{color:#009897;}
#content {margin:0; padding:0; width:860px;  z-index:1; position:relative; clear:both; float:left; min-height:350px; height:auto !important; height:250px;}
#content .col-home-left{width:350px;float:left; margin-top:-20px}
#content .col-home-right{width:490px;float:right; margin-top:10px;}
#content .col-one-third{width:400px;float:left;}
#content .col-two-third{width:415px;float:right;position:relative; z-index:1;}
#content .col-half{width:400px;float:left}
#content .col-single-large-photo{margin-left:40px; width:420px;float:left}
#content .col-news-one{width:350px;float:left}
#content .col-news-two{width:450px;float:left}
#content .gutter{margin-left:50px}
#content .small-gutter{margin-left:20px}
#content .col-home-left h1{font-size:22px}
#content h1{font-family:Helvetica, Arial, sans-serif;font-size:30px;color:#ccc;text-transform:lowercase;font-weight:bold;padding:0; margin:15px 0 0 0;line-height:1.0em}
#content h2, #content h3, #content h4, #content h5{font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#003399;text-transform:uppercase;font-weight:normal;margin:2px 0 10px 0;padding-top:15px; border-top:#006699 dotted 1px; width:100%; float:left;clear:both; line-height:1.0em}

#content .col-single-large-photo h2{ border-top:none;padding-top:15px}

#content .box-green-head{background:#0c3984; padding:4px 10px; margin-top:10px; float:left; font-weight:bold; color:#fff; width:100%;}
#content .box{background:#e6e7e7; padding:5px 10px; float:left; width:100%}
#content .box h2{border-top:0; margin-top:0}

a.icon{padding-right:15px; background:url('../images/arrow_blue.gif') no-repeat right 3px}
a.right{clear:both;float:right;display:block}
a.download {position:absolute; top:70px; right:10px;} 

#home-news h2{float:left; clear:both}
#home-news a.icon{float:right; display:block; margin-top:-28px; background-position:right 6px}
#home-news p{float:left; width:100%}
	
#content .square-button span{float:left; padding-right:5px; font-weight:bold}
#content .square-button a{display:block; color:#fff; width:50px; padding:2px 15px 2px 2px; float:left; margin-right:5px; text-decoration:none; background:#618864 url('../images/arrow_tiny.gif') no-repeat right 7px; text-align:right }
#content .square-button a.second{background-color:#009897; width:55px}
#content .square-button a.third{background-color:#0c3984; width:55px}

/* region = fck editor */
.region ul {margin:0; padding:0; list-style-type:none; clear:both; float:left; width:100%; display:block}
.region li {padding:2px 15px; margin:0; clear:both; background:url('../images/arrow_blue.gif') no-repeat left 9px; border-bottom:#006699 dotted 1px}
.region li.last {border-bottom:#fff dotted 0px}
.region li a{color:#666; padding-bottom:10px; margin:0; padding:0; display:block; text-decoration:none}
.region li a:visited{color:#666}
.region li a:hover,
.region li a:focus{text-decoration:underline}
.green li {background:url('../images/arrow_green.gif') no-repeat left 9px; border-bottom:#618864 dotted 1px}
.cyan li {background:url('../images/arrow_cyan.gif') no-repeat left 9px; border-bottom:#009897 dotted 1px}

#myController ul li span.jFlowControl {display:block;}


ul.plain {margin:0 0 10px 5px; padding:0; list-style-type:none}

dl.table-display{width:418px;margin:0;padding:0;height:90px; float:right }
.table-display dt{clear:both;float:left;margin:0 5px 0 0;padding:0px 0;border-bottom:0px dotted #ccc; text-align:left; display:block; width:60px}
.table-display dd{float:left;width:300px;margin:0 0 0 0;padding:0px 0;border-bottom:0px dotted #ccc}

dl.contact{width:22.0em;padding:0;float:right;}
.contact dt{width:8em;float:left;margin:0;padding:0;font-weight:bold;}
dt{clear:both;}
.contact dd{float:left;width:12em;margin:0;padding:0em;}

#listServices h2,
#listProjects h2,
#listClients h2{margin-top:10px}

.relative {position:relative; clear:both; width:418px; float:right}
.frame-container{position:relative; clear:both; width:418px; float:right; width:418px; height:302px; }
.big-frame{position:absolute;z-index:2; left:0px; top:10px; background:url('../images/big-frame.gif') no-repeat; width:418px; height:302px}
.big-frame-photo{position:absolute;z-index:1;top:15px;left:5px;width:401px; height:284px; margin:0; padding:0}

#photo-frames-mc{position:relative;background:url('../images/photo-frames-mc.jpg') no-repeat top left;width:417px;height:335px;}
#photo-frames-mc .photo-a{position:absolute;z-index:1;top:20px;left:16px;  width:194px;height:182px}
#photo-frames-mc .photo-b{position:absolute;z-index:1;top:9px;left:222px; width:179px;height:125px}
#photo-frames-mc .photo-c{position:absolute;z-index:1;top:214px;left:58px; width:152px;height:106px}
#photo-frames-mc .photo-d{position:absolute;z-index:1;top:144px;left:222px;width:152px;height:106px}

#press-photos {float:right;width:460px;height:132px;position:relative; margin:0px 0 20px 25px; padding:0}
#press-photos img {width:140px}
.press-frames {position:absolute;background:url('../images/press-frames.png') no-repeat top left;width:460px;height:132px;right:0px;top:0px;overflow:hidden;z-index:2}
.press-photo-a{position:absolute;z-index:1;top:10px;left:12px}
.press-photo-b{position:absolute;z-index:1;top:10px;left:159px}
.press-photo-c{position:absolute;z-index:1;top:14px;left:310px}
.press-photo-d{position:absolute;z-index:1;top:10px;left:460px}

#awards-photos {float:right;width:611px;height:132px;position:relative; margin:0 0 20px 0; padding:0}
#awards-photos img {width:140px}
.awards-frames {position:absolute;background:url('../images/press-frames.png') no-repeat top left;width:611px;height:132px;right:0px;top:0px;overflow:hidden;z-index:2}
.awards-photo-a{position:absolute;z-index:1;top:10px;left:12px}
.awards-photo-b{position:absolute;z-index:1;top:19px;left:159px}
.awards-photo-c{position:absolute;z-index:1;top:14px;left:308px}
.awards-photo-d{position:absolute;z-index:1;top:18px;left:457px}

/* Featured Content Glider - could be cleaner CSS! */
#projectsslides, #clientProjectSlides {float:right; margin:0; clear:both}
.photo-controls{position:relative; clear:both; width:408px; padding:0 5px; float:right; clear:both;}
.jFlowControl a{border:0;padding:0;margin:0;}
.jFlowControl a strong {padding:0;margin:0;color:#999;}
span.jFlowSelected {font-weight:bold;color:#999;display:block;margin-top:-3px;}

#clientProjectController span,
#myController span{margin-right:10px;cursor:pointer;}

#clientProjectController span.jFlowSelected,
#myController span.jFlowSelected {font-weight:bold}

#clientProjectController ul,
#myController ul {list-style-type:none; margin:0; padding:0}

#clientProjectController ul li,
#myController ul li{margin:0;padding:2px 15px; background:url('../images/arrow_blue.gif') no-repeat left 7px}

#clientProjectController ul.green li,
#myController ul.green li {background:url('../images/arrow_green.gif') no-repeat left 7px; border-bottom:#618864 dotted 1px}

#clientProjectController ul.cyan li,
#myController ul.cyan li {background:url('../images/arrow_cyan.gif') no-repeat left 7px; border-bottom:#009897 dotted 1px}

#clientProjectSlides .jFlowPrev,
#projectsslides .jFlowPrev{cursor:pointer; float:left; padding-left:15px; background:url('../images/arrow_blue_left.gif') no-repeat left 5px;}

#clientProjectSlides .jFlowNext,
#projectsslides .jFlowNext{cursor:pointer; margin-right:0px; float:right; padding-right:15px; background:url('../images/arrow_blue.gif') no-repeat right 5px}


#peopleController .bullet{float:left; margin:0;padding:2px 15px; background:url('../images/arrow_cyan.gif') no-repeat left 7px}
#peopleController span{margin-right:10px;cursor:pointer}
#peopleController span.jFlowSelected {font-weight:bold; padding:0; margin:0}
#peopleSlides {float:left; clear:both}
#peopleSlides h2{border-top:none}


/* people scroller */
#people-scroller{width:860px; height:215px; padding:0; float:left; overflow-x:auto; overflow-y:hidden}
#people-scroller .photo{float:left; width:130px; height:140px;}
#people-scroller .frame{float:left; width:135px; height:150px; margin-top:-140px; z-index:99; border:0;}
#people-scroller .person .jFlowControl{margin:0; padding:0; font-size:10px}
#peopleController table tr {vertical-align:top}
#peopleController td{width:200px}


/* forms */
.errorMessage{padding:0 0 20px 5px;border:#ff0000 1px solid;color:#000;background-color:#fcd8de}
.errorMessage ul{margin:0 0 0 20px;padding:0}
.errorMessage li{margin:0;padding:0}
.form-one feildset{padding:2px}
.form-one legend{border:0px;font-size:small;font-weight:bold;color:#acd52f;padding:0}
.form-one select{border:1px solid #5c778c;background:#fff url('/images/form-textfield-bg.gif') no-repeat top left}
.form-one input{border:1px solid #5c778c;background:#fff url('/images/form-textfield-bg.gif') no-repeat top left}
.form-one textarea{border:1px solid #5c778c;background:#fff url('/images/form-textfield-bg.gif') no-repeat top left;width:350px}
.form-one .checkbox{border:0}
.form-one .required{color:#990000}
.form-one label{color:#999;display:block;clear:both;width:90px;float:left;text-align:right;margin:0 5px 10px 0;font-weight:normal}
.form-one input:focus	{background:#e9e9e9}
.form-one textarea:focus{background:#e9e9e9}
.form-one select:focus	{background:#e9e9e9}
.form-one div{clear:both}
.submit {clear:both; margin-top:10px}


/* Sucker Fish Menu */
	#HomeFlash{z-index:2;position:relative;}
	.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;font-size:11px; font-weight:bold;}
	#menu {margin-top:29px; position:absolute; top:50px; left:0; line-height:1.0; margin-left:-10px}
	#menu a.selected{color:#009897}
	ul.sf-menu li a:focus,
	ul.sf-menu li a:hover{color:#009897;text-decoration:none}
	.sf-menu ul {position:absolute;top:-999em;width:180px; z-index:9999;/* left offset of submenus need to match (see below) */}
	.sf-menu ul li {width:100%;}
	.sf-menu li:hover {visibility:inherit;/* fixes IE7 'sticky bug' */}
	.sf-menu li {float:left;position:relative}
	.sf-menu a {display:block;position:relative}
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {right:0;top:2.5em; z-index:9999}
	ul.sf-menu li:hover li ul,
	ul.sf-menu li.sfHover li ul {top:-999em}
	ul.sf-menu li li:hover ul,
	ul.sf-menu li li.sfHover ul {left:10em;top:0}
	ul.sf-menu li li:hover li ul,
	ul.sf-menu li li.sfHover li ul {top:-999em}
	ul.sf-menu li li li:hover ul,
	ul.sf-menu li li li.sfHover ul {left:10em; top:0}
	.sf-menu {float:left;height:50px;width:810px;margin-top:20px}
	.sf-menu a {padding:8px 10px 4px 10px;  text-decoration:none}
	.sf-menu a, .sf-menu a:visited  {color:#666}
	.sf-menu li {background:#fff}
	.sf-menu li li {background:transparent url('../images/menu_blue.png') repeat}
	.sf-menu li ul {background:url('../images/drop_arrow.png') repeat-x 0 0;padding:7px 0 0 0; margin-right:-68px}
	.sf-menu li ul li ul {background:none;padding-top:0}
	.sf-menu li li a{color:#fff;font-weight:bold;padding:6px 8px 8px 8px; text-decoration:none}
	.sf-menu li li a:visited{color:#fff}
	.sf-menu li li a:focus,
	.sf-menu li li a:hover{color:#fff; text-decoration:underline}
	.sf-menu .current a{color:#35a1a0; font-weight:bold}
	.sf-menu li li li {background:#758bae}
	.sf-menu li:hover, .sf-menu li.sfHover,
	.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {outline:0; text-decoration:none}
	/*** arrows **/
	.sf-menu a.sf-with-ul {padding-right:2.25em;min-width:1px;/* trigger IE7 hasLayout so spans position accurately */}
	.sf-sub-indicator {position:absolute;display:block;right:.75em;	width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url('../images/arrows-rtf.png') no-repeat -10px -100px;/* 8-bit indexed alpha png. IE6 gets solid image only */}
	a > .sf-sub-indicator {/* give all except IE6 the correct values */
		top:.8em;background-position:0 -100px;/* use translucent arrow for modern browsers*/}
	/* apply hovers to modern browsers */
	a:focus > .sf-sub-indicator,
	a:hover > .sf-sub-indicator,
	a:active > .sf-sub-indicator,
	li:hover > a > .sf-sub-indicator,
	li.sfHover > a > .sf-sub-indicator {background-position:-10px -100px; /* arrow hovers for modern browsers*/}
	/* point right for anchors in subs */
	.sf-menu ul .sf-sub-indicator {background-position:-10px 0}
	.sf-menu ul a > .sf-sub-indicator {background-position:0 0}
	/* apply hovers to modern browsers */
	.sf-menu ul a:focus > .sf-sub-indicator,
	.sf-menu ul a:hover > .sf-sub-indicator,
	.sf-menu ul a:active > .sf-sub-indicator,
	.sf-menu ul li:hover > a > .sf-sub-indicator,
	.sf-menu ul li.sfHover > a > .sf-sub-indicator {background-position:-10px 0; /* arrow hovers for modern browsers*/}

/* bug fixing */
.clear{clear:both;height:1px;width:100%} /* do NOT float */
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{display:inline-block}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}/* End hide from IE-mac */

/* accessibility */
a.skip{position:absolute; left:-1000em; width:200px; z-index:999; display:block}
a.skip:active,
a.skip:focus{left:0; top:0; color:#fff; background-color:#003399; padding:10px; font-weight:bold; text-decoration:none}