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

/*
Theme Name: The Useful Loft Company News
Theme URI: http://www.useful-loft.co.uk
Description: The design for the news page of the Useful Loft Company.
Version: 1.0
Author: Creare Web Design
Author URI: http://www.crearedesign.co.uk
Tags: useful, loft, company, creare
*/

/* Reset */
*							{ margin: 0; padding: 0;}
body						{ font: 68% "arial",tahoma,sans-serif; color: #5e5e5e; background: #ededed url('images/subpagebg.jpg') repeat-x center top; }
.homepagebody				{ font: 68% "arial",tahoma,sans-serif; color: #5e5e5e; background: #ededed url('images/bodybg.jpg') repeat-x center top; }
img							{ border: 0; }
a:link						{ text-decoration: none; outline: none; }
a:active					{ text-decoration: none; outline: none; }
a:visited					{ text-decoration: none; outline: none; }

/* Typography */
.orangeintrotext			{ font-size: 1.2em; color: #ff9e37; display: inline; }
.clearwrap .newstitles		{ font-size: 1.26em; font-weight: bold; color: #363636; display: inline; margin: 0 8px 0 0; }
#introtext h1				{ font-size: 1.26em; font-weight: bold; color: #fff; display: inline; margin: 0 8px 0 0; }
.introparagraph				{ display: inline; }
#maincontentleft p			{ margin: 5px 0 10px 0; line-height: 145%; }
#maincontentleft ul			{ margin: 0 0 10px 0; list-style-position: inside; }
.ad-thumb-list li			{ list-style-type: none !important; }
#maincontentleft li			{ list-style-type: circle; padding: 5px; }
.normaltitleh1				{ font: 1em "arial",tahoma,sans-serif; font-style: italic; color: #696969; margin: 0; }
.textheader					{ font-size: 1.6em; font-weight: bold; color: #3e3e3e; margin: 0; padding: 0 0 5px 0; background: url('images/titleline.jpg') no-repeat center bottom; }
.textheaderorange			{ color: #ff9e37; }
.footertitles				{ font-size: 1.273em; font-weight: bold; text-shadow: 1px 1px #000; margin: 0 0 4px 0; color: #f0f0f0; }
#footer a:link				{ color: #787878; }
#footer a:visited			{ color: #787878; }
#footer a:hover				{ color: #ffc143; }
.businessaddress			{ font-weight: bold; margin: 0 0 3px 0; font-size: 1.182em; }
.bottompara					{ margin: 0 0 12px 0; }
.casestudyname				{ font-weight: bold; color: #ff9e37; float: right; }
#maincontentleft .casestudytitle { font-weight: bold; font-size: 1.4em; margin-bottom: 15px; line-height: 100%;}
.normaltitleh2				{ font-size: 1.6em; }
.normaltitleh3				{ font-size: 1.3em; }
.normaltitleh4				{ font-size: 1.3em; }
.italictitle				{ display: inline; font-style: italic; color: #696969; }
#maincontentleft a:link		{ font-weight: bold; color: #bb6d10; }
#maincontentleft a:visited	{ font-weight: bold; color: #bb6d10; }
#maincontentleft a:hover	{ font-weight: bold; color: #808080; }
#maincontentleft .p1		{ padding: 0; margin: 0; }

/* Structure */
#wrap						{ width: 960px; margin: 0px auto; }
.clearwrap					{ clear: both; overflow: hidden; height: auto; }

/* Header */
#header						{ width: 960px; height: 117px; float: left; clear: both; overflow: hidden; }
.logo						{ margin: 6px 0 0 10px; }
#telephonewrap				{ float: right; margin: 45px 30px 0 0; }
.contactus					{ float: left; font-size: 1.545em; color: #fff; text-transform: uppercase; text-shadow: 0em 0em 0.3em #000; font-weight: bold; margin: 13px 10px 0 0; }
.telephone					{ float: left; font-size: 3.4em; color: #f68e30; text-transform: uppercase; text-shadow: 0em 0em 0.3em #000; font-weight: bold; }

/* Top Navigation */
#topnavigation				{ float: left; width: 960px; height: 39px; padding: 22px 0 0 0; background: #ff9f37 url('images/topnav.jpg') no-repeat left top; }
#topnavigation ul			{ list-style: none; padding: 0; margin: 0; text-align: center; }
#topnavigation li			{ display: inline; padding: 8px 23px 8px 23px; background: url('images/navsep.jpg') no-repeat right center; }
#topnavigation .finalbutton	{ display: inline; padding: 8px 24px 8px 24px; background: none; }
#topnavigation a:link		{ color: #fff; font-size: 1.091em; text-shadow: 1px 1px #141414; }
#topnavigation a:visited	{ color: #fff; font-size: 1.091em; text-shadow: 1px 1px #141414; }
#topnavigation a:hover		{ color: #f9a457; font-size: 1.091em; text-shadow: 1px 1px #141414; }

/* Intro Area */
#introbase					{ float: left; width: 960px; height: 300px; background: url('images/introbanner.png') no-repeat left bottom; margin: 6px 0 0 0; }
#introinside				{ float: left; width: 960px; height: 257px; background: url('images/introgradient.png') no-repeat center top; }
#introtext					{ float: left; width: 960px; height: 30px; line-height: 30px; text-align: center; font-size: 1.2em; color: #ff9e37; display: inline; }
#jqueryslide				{ float: left; margin: 21px 0 0 40px; display: inline; width: 636px; height: 230px; overflow: hidden; padding: 0; }
#videopresenter				{ float: right; margin: 0; overflow: hidden; padding: 0; width: 250px; height: 230px; padding: 28px 0 0 0; }
/*--Image Slider--*/
.main_view 					{ float: left; position: relative; }
.window 					{ height:230px;	width: 636px; overflow: hidden;	position: relative; }
.image_reel					{ position: absolute; top: 0; left: 0; }
.image_reel img 			{ float: left; }

/* Questions Row */
#questionsrow				{ float: left; width: 960px; height: 105px; margin: 41px 0 0 0; }
a.rollover1					{ float: left; width: 274px; height: 112px; background: url('images/whatdowedo.png') no-repeat left top; text-indent: -9999px; margin: 0 23px 0 23px; display: inline-block; }
a.rollover1:hover			{ float: left; width: 274px; height: 112px; background: url('images/whatdowedo.png') no-repeat 0px -112px; text-indent: -9999px; display: inline-block; }
a.rollover2					{ float: left; width: 274px; height: 112px; background: url('images/whychooseus.png') no-repeat left top; text-indent: -9999px; margin: 0 23px 0 23px; display: inline-block; }
a.rollover2:hover			{ float: left; width: 274px; height: 112px; background: url('images/whychooseus.png') no-repeat 0px -112px; text-indent: -9999px; display: inline-block; }
a.rollover3					{ float: left; width: 274px; height: 112px; background: url('images/howmuchwillitcost.png') no-repeat left top; text-indent: -9999px; margin: 0 23px 0 23px; display: inline-block; }
a.rollover3:hover			{ float: left; width: 274px; height: 112px; background: url('images/howmuchwillitcost.png') no-repeat 0px -112px; text-indent: -9999px; display: inline-block; }


/* Main Content */
#maincontentleft			{ float: left; width: 580px; margin: 30px 0 0 0; }
#maincontentright			{ float: right; width: 300px; margin: 30px 0 0 0; }
.projectimages				{ border: 0; margin: 0 45px 0 0; }
#maincontentleft .finalprojectimage	{ margin: 0; }
.leftcolumncontact			{ float: left; width: 280px; overflow: hidden; }
.rightcolumncontact			{ float: left; width: 280px; overflow: hidden; margin: 0 0 0 18px; }

/* News Block */
.newsblock					{ margin: 0 0 25px 0; float: left; width: 580px; }
.newsblock a:link			{ color: #3d3d3d; font-weight: bold; }
.newsblock a:visited		{ color: #3d3d3d; font-weight: bold; }
.newsblock a:hover			{ color: #7f7f7f; font-weight: bold; }
.fadeddate					{ font-style: italic; color: #ff9e37; text-shadow: 1px 1px #fff; }
.postpagelinks a:link		{ background-color: #575757; padding: 6px; overflow: visible; color: #fff; }
.postpagelinks a:visited		{ background-color: #575757; padding: 6px; overflow: visible; color: #fff; }
.postpagelinks a:hover		{ background-color: #282828; padding: 6px; overflow: visible; color: #fff; }
.pageparagraph p			{ margin: 0 0 10px 0; }

/* Sidebar Modules */
#acceptcards				{ width: 263px; height: 60px; background: url('images/creditcardsbg.jpg') no-repeat left top; color: #fff; padding: 3px 0 0 10px; margin: 10px 0 0 0; }
.newstitle					{ width: 186px; height: 53px; background: url('images/newstitle.jpg') no-repeat left top; padding: 10px 40px 0 40px; color: #fff; font-size: 1.4em; font-weight: bold; text-align: center; line-height: 110%; }
.orangetitles				{ color: #ff9e37; }
.newscontent				{ width: 208px; padding: 15px 30px 12px 17px; background-color: #bfbfbf; margin: 0 0 0 6px; color: #353535; clear: both; height: auto; overflow: hidden; }
.categorylist a:link		{ background-color: #575757; padding: 6px; display: block; width: 100%; color: #fff; margin: 0 0 5px 0; }
.categorylist a:visited		{ background-color: #575757; padding: 6px; display: block; width: 100%; color: #fff; margin: 0 0 5px 0; }
.categorylist a:hover		{ background-color: #282828; padding: 6px; display: block; width: 100%; color: #fff; margin: 0 0 5px 0; }
.newscontent ul				{ list-style-type: none; }
.newscontent li				{ list-style-type: none; }
.newsarticlewrap			{ background: url('images/newssep.jpg') no-repeat center top; width: 222px; padding: 20px 0 20px 0; clear: both; height: auto; overflow: hidden; }
.newstext					{ float: left; width: 179px; }
.newstext a:link			{ font-weight: bold; color: #353535; }
.newstext a:visited			{ font-weight: bold; color: #353535; }
.newstext a:hover			{ font-weight: bold; color: #fff; }
#newslettertitle			{ width: 268px; height: 26px; background: url('images/newslettertitle.jpg') no-repeat left top; padding: 15px 0 0 0; color: #fff; font-size: 1.4em; font-weight: bold; text-align: center; clear:both; }
#newslettersignup			{ width: 253px; background: #353535 url('images/newsletterbg.jpg') repeat; padding: 10px 0 10px 15px; color: #f2f2f2; }
#newslettersignup input		{ width: 225px; border: 1px #000 solid; }
#newslettersignup select	{ width: 235px; }
#newsletterbottom			{ width: 268px; height: 12px; background: url('images/newsletterbottom.jpg') no-repeat; }
.date						{ width: 38px; height: 38px; background: #707070 url('images/datebg.jpg') repeat-x; float: right; font-size: 1.909em; color: #fff; text-align: center; margin: 0 0 0 5px; }
.datesmalltext				{ font-size: 0.42em; color: #fff; width: 38px; text-align: center; margin: 0 0 2px 0; }

/* Contact Page */
.formstyle 					{ background-color: #fff; width:200px; padding:4px; margin-bottom:5px; border: 1px solid #b6b6b6; font: 1em "Arial", Verdana, sans-serif; }
.fieldstyle 				{ width:180px; margin:10px 0 ; padding:5px 0;}
.textformstyle				{ margin: 0 0 10px 0; font-family: arial; font-size: 1em; padding: 5px; }
label						{ display: block; }
.formfield 					{ background-color: #fff; width:200px; padding:4px; margin-bottom:5px; border: 1px solid #b6b6b6; font: 1em "Arial", Verdana, sans-serif; }
#maincontentleft .p2		{ margin: 0; padding: 0; }
.contacttitle				{ padding: 5px; background-color: #e6e6e6; border: 1px #c5c5c5 solid; margin: 12px 0 7px 0; font-weight: bold; font-size: 1.2em; text-shadow: 1px 1px #fff; }

/* Case Studies */
.quotes						{ background: url('images/speechmarks.png') no-repeat left top; width: 495px; height: 50px; font-style: italic; padding: 20px 30px 0 40px; }

/* Technical Page */
.contentimage				{ float: right; margin: 4px 0 16px 0; }

/* Footer */
#footerwrap					{ width: 100%; height: 240px; clear: both; background: #363636 url('images/footerbg.jpg') repeat-x left top; margin: 30px 0 0 0; }
#footer						{ width: 960px; height: 200px; clear: both; margin: 0 auto; color: #787878; padding: 40px 0 0 0; }
.footercolumn				{ width: 230px; float: left; height: 200px; overflow: hidden; margin: 0 0 0 8px; }
#footer ul					{ list-style-type: none; padding: 0; margin: 0; line-height: 140%; }
.footerlogos				{ float: left; margin: 60px 0 0 0; }
.copyrightlogowrap img		{ border: 1px #474747 solid; margin: 0 2px 0 0; }
.copyrighttextwrap			{ float: left; height: auto; width: 230px; overflow: hidden; clear: both; }
.copyrightlogowrap			{ float: left; height: auto; overflow: hidden; margin: 40px 0 0 0; }
#seperator					{ text-align: center; padding: 4px 0 4px 0; border-top: 1px #c9c9c9 solid; border-bottom: 1px #c9c9c9 solid; margin: 4px 0 0 0;  }
#seperator a:link			{ text-decoration: underline; color: #9a9a9a; }
#seperator a:visited		{ text-decoration: underline; color: #9a9a9a; }
#seperator a:hover			{ text-decoration: none; color: #9a9a9a; }

/* Buttons */
a.findoutmore				{ float: right; width: 109px; height: 27px; background: url('images/findoutmore.png') no-repeat left top; text-indent: -9999px; display: block; margin: 0 0 8px 0; }
a.findoutmore:hover			{ background: url('images/findoutmore.png') no-repeat 0 -27px; text-indent: -9999px; }
a.viewmorenews				{ float: right; width: 89px; height: 13px; background: url('images/viewmorenews.jpg') no-repeat left top; text-indent: -9999px; display: inline-block; margin: 0 0 10px 0; }
a.viewmorenews:hover		{ background: url('images/viewmorenews.jpg') no-repeat 0 -13px; text-indent: -9999px; }
.emailsubmit				{ background: url('images/submit.png') no-repeat 0px 0px; width: 100px; height: 30px; text-decoration: none; display: block; font-size: 1em; color: #fff; font-weight: bold; text-transform: uppercase; line-height: 30px; text-align: center; text-shadow: 1px 1px #000; border: 0; margin-top: 10px; }
#newslettersignup .callbacksubmit	{ background: url('images/callsubmit.png') no-repeat 0px 0px; width: 235px; height: 30px; text-decoration: none; display: block; font-size: 1em; color: #464646; font-weight: bold; text-transform: uppercase; line-height: 30px; text-align: center; text-shadow: 1px 1px #f0f0f0; border: 0; margin-top: 10px; }
.reloadimage				{ background: url('images/reloadimage.png') no-repeat 0px 0px; width: 87px; height: 26px; text-decoration: none; display: block; text-indent: -9999px; margin: 6px 0 6px 0; }
.reloadimage:hover			{ background-position: 0px -26px; text-decoration: none; } 

/* Image Fade Hover */
div.fadehover 				{ position: relative; float: left; }
img.a 						{ position: absolute; left: 0; top: 0; z-index: 10; float: left; clear: both; }
img.b 						{ position: absolute; left: 0; top: 0; float: left; clear: both; }
.clearimage					{ width: 214px; height: 49px;  margin: 0 0 8px 0; clear: both; }
.clearimage2				{ width: 214px; height: 49px;  margin: 0 0 16px 0; clear: both; }

/* jQuery Photo Gallery */
.ad-gallery { width: 550px; }
.ad-gallery .ad-nav .ad-thumbs .ad-thumb-list ul li {list-style-type: none; }
.ad-gallery, .ad-gallery * { margin: 0; padding: 0; }
.ad-gallery .ad-image-wrapper { width: 100%; height: 400px; margin-bottom: 10px; position: relative; overflow: hidden; }
.ad-gallery .ad-image-wrapper .ad-loader { position: absolute; z-index: 10; top: 48%; left: 48%; border: 1px solid #CCC; }
.ad-gallery .ad-image-wrapper .ad-next { position: absolute; right: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 100; }
.ad-gallery .ad-image-wrapper .ad-prev { position: absolute; left: 0; top: 0; width: 25%; height: 100%; cursor: pointer; display: block; z-index: 100; }
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */ background: url(images/non-existing.jpg) }
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(images/ad_prev.png); width: 30px; height: 30px; display: none; position: absolute; top: 47%; left: 0; z-index: 101; }
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image { background: url(images/ad_next.png); width: 30px; height: 30px; right: 0; left: auto; }
.ad-gallery .ad-image-wrapper .ad-image { position: absolute; overflow: hidden; top: 0; left: 0; z-index: 9; }
.ad-gallery .ad-image-wrapper .ad-image a img { border: 0; }
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description { position: absolute; bottom: 0px; left: 0px; padding: 7px; text-align: left; width: 100%; z-index: 2; background: url(images/opa75.png); color: #000; }
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { display: block; }
.ad-gallery .ad-controls { height: 20px; }
.ad-gallery .ad-info { float: left; }
.ad-gallery .ad-slideshow-controls { float: right; }
.ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { padding-left: 5px; cursor: pointer; }
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { padding-left: 5px; font-size: 0.9em; }
.ad-gallery .ad-slideshow-running .ad-slideshow-start { cursor: default; font-style: italic; }
.ad-gallery .ad-nav { width: 100%; position: relative; }
.ad-gallery .ad-forward, .ad-gallery .ad-back { position: absolute; top: 0; height: 100%; z-index: 10; }
/* IE 6 doesn't like height: 100% */
* html .ad-gallery .ad-forward, .ad-gallery .ad-back { height: 100px; }
.ad-gallery .ad-back { cursor: pointer; width: 13px; display: block; background: url(images/ad_scroll_back.png) 0px 22px no-repeat; }
.ad-gallery .ad-forward { cursor: pointer; display: block; right: -1px; width: 13px; background: url(images/ad_scroll_forward.png) 0px 22px no-repeat; }
.ad-gallery .ad-nav .ad-thumbs { overflow: hidden; width: 508px; }
.ad-gallery .ad-thumbs .ad-thumb-list { float: left; width: 9000px; list-style-type: none; }
.ad-gallery .ad-thumbs li { float: left; padding-right: 5px; }
.ad-gallery .ad-thumbs li a { display: block; }
.ad-gallery .ad-thumbs li a img { border: 3px solid #CCC; display: block; }
.ad-gallery .ad-thumbs li a.ad-active img { border: 3px solid #616161; }
/* Can't do display none, since Opera won't load the images then */
.ad-preloads { position: absolute; left: -9000px; top: -9000px; }