/*
** Name: style.css
** Author: Matt Gifford (AKA ColdFuMonkeh) - http://www.ugccreative.com
** Date: 26th September 2009
** Purpose: main style sheet for Fuzzy Orange Ltd
*/

html, body { margin:0 auto; height:100%; }

/* Used for the sliding image bar */
body { margin:0 auto; padding:0; text-align: center; }

a { color: #dd4312; text-decoration: none }
a:hover{ color: #3a3a3a; }

#wrapper { position:relative; overflow:hidden; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -36px; 
				/* the bottom margin is the negative value of the footer's height */ text-align: left; font-family: "Trebuchet MS"; font-size: 14px;}
#container { margin: 0 auto; width: 1000px; height: 100%; }

/* header styles */

div#header { height: 67px; }
div#logo { position: relative; top: 0px; left: 52px; width: 249px; height: 67px; background: url(/assets/images/fuzzyOrange_logo.gif) no-repeat; }
div#logo h1 { display: none; }

/* navigation */

div#topMenu { position: relative; height: 21px; top: -50px; right: 33px; width: 300px; float: right; width: 644px; }
#topNavList { background: url(/assets/images/navigation/topMenu.gif) no-repeat; width: 612px; height: 21px; margin: 0; padding: 0; }
#topNavList span { display: none; }
#topNavList li, #topNavList a { height: 21px; display: block; }
#topNavList li { float: left; list-style: none; display: inline; }

#homeLink { width: 66px; }
#aboutLink { width: 78px; }
#servicesLink { width: 100px; }
#workLink { width: 110px; }
#partnersLink { width: 100px; }
#contactLink { width: 82px; }

#homeLink a:hover {background:url(/assets/images/navigation/topMenu.gif) 0px -21px no-repeat; }
#aboutLink a:hover, .activeAboutLink {background:url(/assets/images/navigation/topMenu.gif) -66px -21px no-repeat; }
#servicesLink a:hover, .activeServicesLink {background:url(/assets/images/navigation/topMenu.gif) -144px -21px no-repeat; }
#workLink a:hover, .activeWorkLink {background:url(/assets/images/navigation/topMenu.gif) -244px -21px no-repeat; }
#partnersLink a:hover, .activePartnersLink {background:url(/assets/images/navigation/topMenu.gif) -354px -21px no-repeat; }
#contactLink a:hover, .activecontactLink {background:url(/assets/images/navigation/topMenu.gif) -454px -21px no-repeat; }

/* sub navigation */
div#servicesSubMenu { position: relative; top: -25px; left: 400px;  height: 19px; width: 300px; }
#subNavList { background: url(/assets/images/navigation/servicesSubMenu.gif) no-repeat; width: 580px; height: 19px; margin: 0; padding: 0; }
#subNavList span { display: none; }
#subNavList li, #subNavList a { height: 19px; display: block; }
#subNavList li { float: left; list-style: none; display: inline; }

#consultancyLink { width: 110px; }
#supportLink { width: 86px; }
#adobeLink { width: 133px; }
#trainingLink { width: 88px; top: -19px; position: relative; left: 329px; }
#developmentLink { width: 115px; top: -19px; position: relative; left: 329px; }

#consultancyLink a:hover, .activeConsultancyLink {background:url(/assets/images/navigation/servicesSubMenu.gif) 0px -19px no-repeat; }
#supportLink a:hover, .activeSupportLink {background:url(/assets/images/navigation/servicesSubMenu.gif) -110px -19px no-repeat; }
#adobeLink a:hover, .activeAdobeLink {background:url(/assets/images/navigation/servicesSubMenu.gif) -196px -19px no-repeat; }
#trainingLink a:hover, .activeTrainingLink {background:url(/assets/images/navigation/servicesSubMenu.gif) -329px -19px no-repeat; }
#developmentLink a:hover, .activeDevelopmentLink {background:url(/assets/images/navigation/servicesSubMenu.gif) -417px -19px no-repeat; }

/* about / meet the team sub navigation */
div#aboutSubMenu { position: relative; top: -25px; left: 400px;  height: 19px; width: 300px; }
#subAboutNavList { background: url(/assets/images/navigation/aboutSubMenu.gif) no-repeat; width: 118px; height: 19px; margin: 0; padding: 0; }
#subAboutNavList span { display: none; }
#subAboutNavList li, #subAboutNavList a { height: 19px; display: block; }
#subAboutNavList li { float: left; list-style: none; display: inline; }

#meetLink { width: 118px; }
#meetLink a:hover, .activeMeetLink {background:url(/assets/images/navigation/aboutSubMenu.gif) 0px -19px no-repeat; }

/* about / meet sub headers */
div#nick { background: url(/assets/images/pages/meet/nick.gif) no-repeat; height: 25px; width: 75px; }
div#matt { background: url(/assets/images/pages/meet/matt.gif) no-repeat; height: 25px; width: 75px; }
div#leanne { background: url(/assets/images/pages/meet/leanne.gif) no-repeat; height: 25px; width: 110px; }
div#andy { background: url(/assets/images/pages/meet/andy.gif) no-repeat; height: 30px; width: 80px; }

/* ourwork sub navigation */
div#workSubMenu { position: relative; top: -25px; left: 400px;  height: 19px; width: 503px; }
#subWorkNavList { background: url(/assets/images/navigation/ourworkSubMenu.gif) no-repeat; width: 703px; height: 19px; margin: 0; padding: 0; }
#subWorkNavList span { display: none; }
#subWorkNavList li, #subWorkNavList a { height: 19px; display: block; }
#subWorkNavList li { float: left; list-style: none; display: inline; }

#workDevLink { width: 60px; }
#workDevLink a:hover, .activeWorkDevLink {background:url(/assets/images/navigation/ourworkSubMenu.gif) 0px -18px no-repeat; }
#workSpeakingLink { width: 195px; }
#workSpeakingLink a:hover, .activeWorkSpeakingLink {background:url(/assets/images/navigation/ourworkSubMenu.gif) -60px -18px no-repeat; }
#workWritingLink { width: 160px; top: -19px; position: relative; left: 265px;}
#workWritingLink a:hover, .activeWorkWritingLink {background:url(/assets/images/navigation/ourworkSubMenu.gif) -265px -18px no-repeat;}

#workProjectsLink { width: 80px; top: -19px; position: relative; left: 250px;}
#workProjectsLink a:hover, .activeWorkProjectsLink {background:url(/assets/images/navigation/ourworkSubMenu.gif) -410px -18px no-repeat;}

/* slider styles */
div#mainContent { width: 890px; height: 100%; left: 50px; top: 35px; position: relative; }
div#sliderShadow { width: 1004px; height: 26px; top: 35px; border: margin-bottom: -50px; position: relative; z-index: 10; background: url(/assets/images/section/sliderShadow.gif) no-repeat; }
div#bottomTiles { position: inherit; width: 909px; height: 158px; margin-top: 54px; margin-left: 44px; clear:both; 
font-family: "Trebuchet MS"; font-size: 14px; color: #393939; }
.dropShadow { background: url(/assets/images/bottomBar/largeDropShadow.gif) no-repeat bottom left; width: 889px; height: 34px; 
				position: relative; top: -340px; left: 90px; z-index: 1; }

/* footer styles */
div#superBlogger { height: 239px; width: 134px; position: relative; top: -218px; background: url(/assets/images/superBlogger.png) no-repeat; }
div#footer { width: 915px; height: 36px; position: inherit; margin-top: 42px; margin-left: 44px; text-align: right; 
				background: url(/assets/images/footer.gif) no-repeat;}
div#footer span { color: #848282; font-size: 11px; width: 360px; position: relative; top: 12px; right: 10px; }
#footer a { color: #27D2CB; text-decoration: none; }
#footer a:hover { color: #27D2CB; text-decoration: underline; }

/* main content rounded corner layout */
#mainRound { width:909px; margin:0px auto; background:#fff url(/assets/images/corners/leftside.gif) repeat-y left top; 
					left: 0px; top: 35px; position: relative; z-index:1; }
.topBox { width:100%; height:20px; background:url(/assets/images/corners/top.gif) no-repeat left top; }
.topBox span { display:block; position:relative; height:20px; background:url(/assets/images/corners/top-right.gif) no-repeat right top; }
.center-content { position:relative; background:url(/assets/images/corners/rightside.gif) repeat-y right top; 
					padding:1px 20px 1px 25px; margin:-1px 0 -50px 0; height: 345px; }
.bottomBox { height:39px; background:url(/assets/images/corners/bottom.gif) no-repeat left bottom; }
.bottomBox span { display:block; position:relative; height:60px; background:url(/assets/images/corners/bottom-right.gif) no-repeat right top; }


.subTop { width:100%; height:20px; background:url(/assets/images/corners/top.gif) no-repeat left top; }
.subTop span { display:block; position:relative; height:20px; background:url(/assets/images/corners/top-right.gif) no-repeat right top; }
.sub-content { position:relative; background:url(/assets/images/corners/rightside.gif) repeat-y right top; 
					padding:1px 20px 1px 25px; margin:-1px 0 -50px 0; height: 158px; }
.subBottom { height:39px; background:url(/assets/images/corners/bottom.gif) no-repeat left bottom; }
.subBottom span { display:block; position:relative; height:60px; background:url(/assets/images/corners/bottom-right.gif) no-repeat right top; }

div#sleekslide p { font-family: "Trebuchet MS"; }

#sub1 { width:247px; margin:0px auto; background:#fff url(/assets/images/corners/leftside.gif) repeat-y left top; left: 330px; top: -5px; 
			position: relative; z-index:1; }
#sub2 { width:247px; margin:0px auto; background:#fff url(/assets/images/corners/leftside.gif) repeat-y left top; left: 80px; top: -172px; 
			position: relative; z-index:1; }
#sub3 { width:247px; margin:0px auto; background:#fff url(/assets/images/corners/leftside.gif) repeat-y left top; left: -170px; top: -340px; 
			position: relative; z-index:1; }	
.subShadow { background: url(/assets/images/bottomBar/dropShadow.png) no-repeat bottom left; width: 399px; height: 32px; position: relative; }

/* general styles */
img { border: none; }
.h2Hide { visibility: hidden; }
.subText { font-size: 10px; }
.adobeImg { margin-top: 10px; }
.formField { border: 1px solid #3a3a3a; }
.requiredStar { color: #900; }

/* list style used on projects page*/
#projectsList { width:100%; }
#projectsList ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#999999;  }
#projectsList ol li { }
#projectsList ol li p { padding:8px; margin-top: -10px; margin-bottom: 35px; font-style:normal; font-family:Arial; font-size:14px; color:#000000; border-left: 1px solid #cccccc; }
#projectsList ol li p em { display:block; }

/* page styles */
div#pageContent { position: relative; top: 10px; left: 160px; width: 675px; }
div#servicesTitle { background: url(/assets/images/pages/services/title.gif) no-repeat; width: 150px; height: 27px; left: 160px; position: relative; }
div#consultancyTitle { background: url(/assets/images/pages/consultancy/title.gif) no-repeat; width: 232px; height: 35px; left: 160px; position: relative; }
div#supportTitle { background: url(/assets/images/pages/support/title.gif) no-repeat; width: 146px; height: 33px; left: 160px; position: relative; }
div#trainingTitle { background: url(/assets/images/pages/training/title.gif) no-repeat; width: 157px; height: 35px; left: 160px; position: relative; }
div#resellerTitle { background: url(/assets/images/pages/reseller/title.gif) no-repeat; width: 275px; height: 27px; left: 160px; position: relative; }
div#svntracTitle { background: url(/assets/images/pages/svntrac/title.gif) no-repeat; width: 188px; height: 35px; left: 160px; position: relative; }
div#ourworkTitle { background: url(/assets/images/pages/ourwork/title.gif) no-repeat; width: 180px; height: 27px; left: 160px; position: relative; }
div#downloadsTitle { background: url(/assets/images/pages/downloads/title.gif) no-repeat; width: 232px; height: 35px; left: 160px; position: relative; }
div#partnersTitle { background: url(/assets/images/pages/partners/title.gif) no-repeat; width: 156px; height: 25px; left: 160px; position: relative; }
div#aboutTitle { background: url(/assets/images/pages/about/title.gif) no-repeat; width: 377px; height: 35px; left: 160px; position: relative; }
div#meetTitle { background: url(/assets/images/pages/meet/title.gif) no-repeat; width: 282px; height: 35px; left: 160px; position: relative; }
div#contactTitle { background: url(/assets/images/pages/contact/title.gif) no-repeat; width: 214px; height: 35px; left: 160px; position: relative; }
div#developmentTitle { background: url(/assets/images/pages/development/title.gif) no-repeat; width: 246px; height: 33px; left: 160px; position: relative; }
div#termsTitle { background: url(/assets/images/pages/terms/title.gif) no-repeat; width: 375px; height: 33px; left: 160px; position: relative; }
div#ourworkDevelopmentTitle { background: url(/assets/images/pages/ourwork/developmentTitle.gif) no-repeat; width: 250px; height: 39px; left: 160px; position: relative; }
div#ourworkSpeakingTitle { background: url(/assets/images/pages/ourwork/speakingTitle.gif) no-repeat; width: 436px; height: 39px; left: 160px; position: relative; }
div#ourworkClientsTitle {background: url(/assets/images/pages/ourwork/clientTitle.gif) no-repeat; width:250px; height:39px; left:160px; position:relative;}
div#ourworkWritingTitle {background: url(/assets/images/pages/ourwork/writingTitle.gif) no-repeat; width:320px; height:39px; left: 160px; position: relative;}
div#ourworkProjectsTitle {background: url(/assets/images/pages/ourwork/projectsTitle.gif) no-repeat; width:162px; height:39px; left: 160px; position: relative;}
/* form styles */
form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:14px Arial; margin: 0; padding: 0; min-width: 500px; max-width: 600px; width: 560px; }
form fieldset {
  /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  border-color: #000;  border-width: 0px; border-style: solid; padding: 10px; /* padding in fieldset support spotty in IE */
  margin: 0; }
form label { display: block;  /* block float the labels to left column, set a width */
	float: left; width: 150px; padding: 0; margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; }
form input, form textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}
.captcha { margin-left: 160px; }
form input#reset { margin-left:0px; /* set margin-left back to zero on reset button (set above) */ }
textarea { overflow: auto; }
form small { display: block; margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px; font-size: 88%; }
form .required{color: #990000;} /* uses class instead of div, more efficient */
form br { clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */ }

#latestPosts { list-style: none; margin-left: -20px; }
#latestPosts li {  margin-left: -20px; }

#ie6Warning { background: #e3e3e3; border: 1px solid #bbbbbb; padding: 10px 10px 1px; margin-bottom: 10px; }
#ie6Warning h2 { background: url(/assets/images/ie6-warning.gif) 0 50% no-repeat; padding-left: 40px; }

/* 'partner' and 'our work' page slider */
#slider ul, #slider li { margin:0; padding:0; list-style:none; }
#slider, #slider li { width:696px; height:241px; overflow:hidden; }
span#prevBtn { position: relative; left: 20px; }
span#nextBtn { position: relative; left: 400px; }

#partnerContent { float: right; width: 100%; }
#partnerContent p { margin-left: 17px; }
.partnerImage { text-align: right; }

#workContent { float: right; width: 100%; }
#workContent p { margin-left: 17px; }
.workImage { text-align: right; }


/* reseller page sub-sub nav */
div#resellerTab {
	margin-top: 15px;
}

div#resellerTab ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: inline;
}

div#resellerTab ul li {
	display: inline;
	margin-left: 20px;
	margin-right: 20px;
}
/* end of reseller page sub-sub nav */

/* box grid used for the clients page */
.boxgrid{ 
	width: 125px; 
	height: 125px; 
	margin:10px; 
	float:left; 
	background:#161613; 
	border: solid 2px #8399AF; 
	overflow: hidden; 
	position: relative; 
}
.boxgrid img{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}
.boxgrid p{ 
	padding: 0 10px; 
	color:#afafaf; 
	font-weight:bold; 
	font:10pt "Lucida Grande", Arial, sans-serif; 
}

.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 125px; 
	width: 100%; 
	opacity: .5;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.captionfull .boxcaption { top: 10; left: 0; }
.caption .boxcaption { top: 10; left: 0; }

/* end of box grid */