/*
 =========================================================
 Main styles

 Revision:      98,453
 Created:       18/12/2009 by scott darby
 =========================================================
*/

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/*
 =Basics
 --------------------------------------------------------*/
body            {font-family:Arial, Helvetica, Sans-Serif; line-height:16px; background:#fff; color:#fff}
.wrapper        {width: 940px; font-size: 13px; display: block; position: relative; margin: 0 auto}
.wrapper        {display:block}
* html .wrapper {height:1%}
.wrapper:after  {clear:both; content:"."; display:block; height:0; visibility:hidden}


h1,h2,h3,h4,h5,h6 {font-weight:700; line-height:12px; color:#fff}
h1                {font-size:21px; margin-bottom:5px; font-weight:700}
h2                {font-size:19px; margin-bottom:5px; font-weight:400}
h3                {font-size:17px; margin-bottom:6px}
h4                {font-size:14px; margin-bottom:8px}
h5                {font-size:13px; margin-bottom:9px}
h6                {font-size:12px; margin-bottom:8px; color:gray}

a               {color:#fff;text-decoration:underline}
a:hover         {color:#f7941d;text-decoration:none}
a:active        {color:red}
a.current:hover {text-decoration:none}

p      {line-height:18px; font-size:13px; color:#404040; margin:0 0 18px}
em     {font-style: italic}
small  {font-size: 8px}
strong {font-weight: bold}

ul {padding-left: 16px; list-style-position:outside; list-style-type:disc; margin:0 0 18px}
ol {padding-left: 16px; list-style-type:decimal; margin:0 0 18px}
li {line-height: 18px}
dl {margin: 18px 0}

acronym:hover {cursor:help}

img {border:none}

fieldset {border:none;margin:0 0 20px}
select   {border:1px solid #979797;color:gray}

th {text-align:center}

/*
 =Utitlies
 --------------------------------------------------------*/
.left   {float:left; margin:0 10px 10px 0}
.right  {float:right; margin:0 0 10px 10px}
.center {text-align:center; margin:0 auto}

.img-replace {text-indent:-9999px; line-height:0; font-size:0; display:block}

/*clearfix*/
.clearfix        {display:block}
* html .clearfix {height:1%}
.clearfix:after  {clear:both; content:"."; display:block; height:0; visibility:hidden}


/*
 =Header
 --------------------------------------------------------*/
#logo  {background: url(../images/logo.png) no-repeat; width:361px; height: 199px; margin-top: 30px; margin-bottom: 30px}

/*
 =Nav
 --------------------------------------------------------*/
#nav                      {position:fixed; left:0; top:0; padding:0; margin:0; z-index: 9999}
#nav a                    {display:block; background: url(../images/nav.png) no-repeat -8px 0; font-size: 0; line-height: 0; width: 53px; height: 152px; text-indent: -9999px}
#nav a:hover              {background-position: -70px 0; width: 58px}
#nav #services-nav        {background-position: -8px -160px; height: 148px}
#nav #services-nav:hover  {background-position: -72px -160px}
#nav #contact-nav         {background-position: -8px -316px; height: 148px}
#nav #contact-nav:hover   {background-position: -72px -316px}
#nav #blog-nav            {background-position: -8px -472px; height: 148px}
#nav #blog-nav:hover      {background-position: -72px -472px}

/*
 =Home page
 --------------------------------------------------------*/
.section           {padding: 20px 20px 0 20px}
/*clearfix*/
.section           {display:block}
* html .section    {height:1%}
.section:after     {clear:both; content:"."; display:block; height:0; visibility:hidden}

#welcome               {background: #81a4cb}
#welcome p             {font-size: 16px; line-height: 47px; text-align: justify; color:#fff}
#welcome .intro        {margin-top: 30px}
#welcome #welcome-text {background: url(../images/welcome.gif) no-repeat; width: 227px; height: 47px; float: left; margin-top: -15px; margin-right: 10px}

#portfolio    {background: #cf9e65 url(../images/transparent-bg.png) repeat-x bottom; height: 472px}
#portfolio h2 {background: url(../images/portfolio.gif) no-repeat; width: 415px; height: 61px}

#website-list    {padding: 0; position: relative}
#website-list li {min-height: 190px; position: absolute; top:0; left:0; padding: 151px 0 0 645px}

#services                 {padding-bottom: 20px}
#services p               {line-height: 25px}
#services dt              {background:url(../images/services-dt.gif) no-repeat; width:926px; height:32px; color: #fff; font-size:16px; padding: 13px 0 0 15px; text-transform: lowercase}
#services dt.open         {background-position: 0 -45px;}
#services dt:hover        {cursor: pointer}
#services dd              {background:#d1c8eb url(../images/website-dd-btm.gif) no-repeat bottom center; padding: 40px 20px; width:901px; color:#2e2e2e; font-size: 13px}
#services h3              {margin-bottom: 20px; font-size:0; line-height:0; text-indent: -9999px; display: block}
/*#services h3              {font-size: 50px; color: #4d4c4e; margin-bottom: 20px; text-transform: lowercase; margin-left: -4px; padding-right:15px}*/

#services #website-design h3   {background: url(../images/services-web-design.gif) no-repeat; width: 348px; height: 54px}
#services #photography h3      {background: url(../images/services-photography.gif) no-repeat; width: 297px; height: 54px}
#services #web-applications h3 {background: url(../images/services-web-apps.gif) no-repeat; width: 394px; height: 54px}
#services #brand-identity h3   {background: url(../images/services-brand.gif) no-repeat; width: 323px; height: 54px}
#services #seo h3              {background: url(../images/services-seo.gif) no-repeat; width: 322px; height: 106px}
#services #cms h3              {background: url(../images/services-cms.gif) no-repeat; width: 310px; height: 144px}
#services #copywriting h3      {background: url(../images/services-copy.gif) no-repeat; width: 270px; height: 54px}
#services #hosting h3          {background: url(../images/services-hosting.gif) no-repeat; width: 165px; height: 54px}
#services #e-commerce h3       {background: url(../images/services-ecommerce.gif) no-repeat; width: 287px; height: 54px}
#services #multimedia h3       {background: url(../images/services-multimedia.gif) no-repeat; width: 254px; height: 54px}
#services #print h3            {background: url(../images/services-print.gif) no-repeat; width: 104px; height: 54px}

#website-design div {background: url(../images/website-design-icon.gif) no-repeat 72px 0; line-height: 25px; min-height: 208px; padding: 0 0 0 400px}
#web-applications div {background: url(../images/web-applications-icon.gif) no-repeat 70px 15px; line-height: 25px; min-height: 179px; padding: 0 0 0 400px}
#brand-identity div {background: url(../images/brand-identity-icon.gif) no-repeat 70px 0; line-height: 25px; min-height: 215px; padding: 0 0 0 400px}
#cms div {background: url(../images/cms-icon.gif) no-repeat 70px 15px; line-height: 25px; min-height: 232px; padding: 0 0 0 400px}
#seo div {background: url(../images/seo-icon.gif) no-repeat 70px 0; line-height: 25px; min-height: 232px; padding: 0 0 0 400px}
#copywriting div {background: url(../images/copy-icon.gif) no-repeat 70px 0; line-height: 25px; min-height: 175px; padding: 0 0 0 400px}
#hosting div {background: url(../images/hosting-icon.gif) no-repeat 70px 15px; line-height: 25px; min-height: 198px; padding: 0 0 0 400px}
#e-commerce div {background: url(../images/e-commerce-icon.gif) no-repeat 70px 0; line-height: 25px; min-height: 193px; padding: 0 0 0 400px}
#print div {background: url(../images/print-icon.jpg) no-repeat 94px 0; line-height: 25px; min-height: 185px; padding: 0 0 0 400px}
#multimedia div {background: url(../images/multimedia-icon.gif) no-repeat 70px 0; line-height: 25px; min-height: 192px; padding: 0 0 0 400px}

#services #photography  {padding: 40px 20px 20px}
#photography .container {background: url(../images/photography-icon.gif) no-repeat 72px 0; line-height: 25px; min-height: 220px; padding: 0 0 0 400px}
#photography-services   {background: #585463; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding:20px 20px 0}
#photography-services p {color: #fff}
#photo-slideshow        {float: left; width: 504px; height: 370px; padding: 0 20px 0 0; margin: 0; position: relative}
#photo-slideshow li     {position: absolute; left:0; top:0}
#photo-slideshow p      {font-size: 16px}
#photography h4         {font-weight: normal; font-size: 30px; text-transform: lowercase; margin-bottom: 20px}
#photo-services-list    {float: left}
#photo-services-list ul {color: #fff; padding:0; font-size: 13px}
#photo-services-list li {background: url(../images/bullet.gif) no-repeat 0 9px; line-height: 24px; padding-left:15px}

blockquote    {text-align: justify}
blockquote p  {margin-bottom: 5px; color:#fff; width:295px}
.cite         {font-style: italic}
.visit-site   {background: url(../images/visit-site.gif) no-repeat; width: 112px; height: 41px; float: right; clear: both; margin: 10px 0 0}

.site-details    {position: absolute; left: 0; bottom: -65px; text-transform: uppercase}
.site-details dt {float: left; color: #000; margin: 0 3px 0 0}
.site-details dd {float: left; margin: 0 10px 0 0}

#view-showcase            {background: url(../images/view-showcase.gif) no-repeat 0 0; width: 174px; height: 46px; float: right; margin-right: -4px; margin-top: 347px}
#view-showcase:hover      {background-position: -344px 0}
#view-showcase.open       {background-position: -172px 0}
#view-showcase.open:hover {background-position: -516px 0}

#patacake    {background: url(../images/patacake.jpg) no-repeat}
#lisadawn    {background: url(../images/lisadawn.jpg) no-repeat}
#langtonarms {background: url(../images/langtonarms.jpg) no-repeat}
#smileav     {background: url(../images/smileav.jpg) no-repeat}

#showcase       {background: #000 url(../images/showcase-bg.jpg) repeat-y center}
#showcase ul    {padding: 0}
#showcase li    {margin: 20px 0 40px; border: 1px solid #313131; padding: 10px; background: #000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px}
#showcase a img {border: 1px solid #eee}

#showcase h2,
#showcase h3,
#showcase h4 {text-transform: uppercase; font-weight: normal}

#showcase h3   {font-size: 20px; float: left; margin-right: 10px}
#showcase h3   {font-size: 13px; float: left}
#showcase h4   {font-size: 13px; float: right}
#showcase h4 a {text-decoration: none; color: #fff}

.back-to-top {float: right; text-decoration: none; color:#fff; background: url(../images/arrow.gif) no-repeat right; padding: 0 10px 0 0; display: block; padding: 0 17px 0 0}

#services    {background: #ab9bdc}
#services h2 {background: url(../images/services.gif) no-repeat; width: 360px; height: 47px}

#contact                    {background: #7db47e}
#contact h2                 {background: url(../images/contact.gif) no-repeat; width: 462px; height: 43px; margin-bottom: 20px}
#contact h3                 {font-weight: normal; color: #fff}
#enquiry-form               {margin-top: 10px}
#contact legend             {display: none}
#contact label              {color: #404040; font-size: 18px; width: 140px; float: left; display: block; clear: both; margin-top: -1px}
#contact input,
#contact textarea           {border: none}
#text-inputs                {float: left}
#contact .text-input        {background: url(../images/text-input-bg.gif) no-repeat; padding: 8px 0 5px 10px; width: 450px; height: 23px; margin: 0 0 23px; position: relative}
#contact .text-input input  {height: 20px; font-size: 17px; color: #404040; width: 306px}
#contact .active            {background-color: #F5F696}
#contact .text-input.active {background-position: 0 -36px}
#contact .textarea          {background: url(../images/textarea-bg.gif) no-repeat; float: right; padding: 10px 0 5px 10px; width: 450px; height: 197px; margin: 0 0 10px}
#contact .textarea label    {width: 89px}
#contact .textarea textarea {height: 192px; width: 349px; float: left; font-size: 17px; color: #404040}
#contact .textarea.active   {background-position: 0 -212px}
#contact .submit            {background: url(../images/send.gif) no-repeat; font-size: 0; line-height: 0; text-indent: -9999px; display: block; border:0; width: 104px; height: 44px; float: right; margin-right: -4px}
#contact .submit:active     {background-position: 0 1px}
#contact .submit:hover      {cursor: pointer}
#contact .error             {color: #980000}
#contact span.error         {background: #F5F696; border: #CECF67 1px solid; padding: 3px; position: absolute; right: 7px; top:6px; z-index: 999}
#contact p                  {color:#fff;}

body .footer                      {background: #619c62; padding: 15px 0; text-align: center!important}
.footer .wrapper p           {font-size: 18px; color: #fff; float: left; margin-right: 24px; text-align: center!important}
.footer .wrapper p#email     {margin-right: 0}
.footer .wrapper p.copyright {font-size: 12px; margin-bottom:0; float:none}

/*social media icons*/
#social-media         {position: fixed; right:0; bottom:20px; padding:0; margin:0; z-index: 999}
#social-media li      {margin-bottom: 5px; position: fixed; right:0; width: 64px; height: 68px; display: block; background-position: 7px 0!important}
#social-media a       {width: 64px; height: 68px; display: block; text-indent: -9999px; font-size:0; line-height: 0;}
#social-media li:hover {background-position: 0 0!important}

#social-media #twitter            {background: url(../images/twitter.png) no-repeat; bottom: 239px; font-size: 12px; color: #404040; z-index: 9999}
#social-media #twitter:hover      {background-position: 7px 0!important}
#social-media .twitter            {margin:0; padding:5px 0 0 73px; position: relative;}
#social-media .twitter-item       {width: auto; position: absolute; right:-9999px; background: none; z-index: 9999; max-width: 500px}
#social-media .twitter-item .last  {display:block}
#social-media .twitter-item a     {text-indent: 0; line-height: 16px; font-size:12px; width: auto; height:auto; color: #404040; position: relative; display: inline}
#social-media .twitter-item a:hover {text-decoration: none}
body #social-media .nopublic:hover {background-position: 0 0!important}

#social-media #facebook        {background: url(../images/facebook.png) no-repeat; bottom: 166px}
#social-media #delicious       {background: url(../images/delicious.png) no-repeat; bottom: 93px}
#social-media #stumbleupon     {background: url(../images/stumbleupon.png) no-repeat; bottom: 20px}

/*
 =Blog
 --------------------------------------------------------*/
.blog,
.single,
.archive,
.search,
.error404
{background: url(../images/blog/header.jpg) no-repeat top center; padding: 150px 0 0; color: #767676}

.blog a,
.single a,
.archive a,
.search a,
.error404 a
{color: #1477b0; font-weight: bold; text-decoration: none}

.blog a:hover,
.single a:hover,
.archive a:hover,
.search a:hover,
.error404 a:hover
{color: #fff; background: #1477b0}

.blog .header,
.single .header,
.archive .header,
.search .header,
.error404 .header
{border-bottom: 5px solid #767676}

.blog .header #logo,
.single .header #logo,
.archive .header #logo,
.search .header #logo,
.error404 .header #logo
{background: url(../images/blog/logo.gif) no-repeat; width: 327px; height: 67px}

.blog #article,
.single #article,
.archive #article,
.search #article,
.error404 #article
{padding: 0 20px 0 0; margin: 20px 0; width: 720px; border-right: 1px solid #767676; float: left}

.blog h1,.blog h2,.blog h3,.blog h4,.blog h5,.blog h6,
.single h1,.single h2,.single h3,.single h4,.single h5,.single h6,
.archive h1,.archive h2,.archive h3,.archive h4,.archive h5,.archive h6,
.search h1,.search h2,.search h3,.search h4,.search h5,.search h6,
.error404 h1,.error404 h2,.error404 h3,.error404 h4,.error404 h5,.error404 h6
{font-weight:700; line-height:12px; color:#767676}

.blog h1,
.single h1,
.archive h1,
.search h1,
.error404 h1
{line-height:12px; color:#767676}

.post
{border-bottom: 1px solid #767676; padding: 0 0 30px; margin: 0 0 30px}

.post:last-child
{border: none}

.post-1 .post-heading
{font-size: 45px; line-height: 45px; font-weight: normal; text-align: justify; font-weight: bold}

.post-heading
{font-size: 25px; line-height: 30px}

.post-heading a
{color:#767676; text-decoration: none}

.post-heading a:hover
{color:#767676; background: none}

.post-1 {float: left; width: 720px}

.blog p,
.single p,
.archive p,
.search p,
.error404 p
{line-height: 20px; text-align: justify}

.blog-article img
{float: right; margin: 0 0 20px 20px; width: 466px!important; height: auto!important; border: 5px solid #767676}

.post-categories li
{float: left; margin: 0 5px 0 0;}

ul#aside {padding: 20px 0 20px 20px; float:left; width: 179px}
ul#aside ul {padding: 0; margin: 0}
ul#aside li {margin: 0 0 40px; padding: 0 0 40px; border-bottom: 1px solid #767676}
ul#aside li li {margin: 0 0 5px; padding: 0; border: none}

.blog #social-media a:hover,
.single #social-media a:hover,
.archive #social-media a:hover
{background: none; color: #1477B0}

.subscribe:hover {background: none; color: #1477B0}

.blog .footer .wrapper p,
.single .footer .wrapper p,
.archive .footer .wrapper p,
.search .footer .wrapper p,
.error404 .footer .wrapper p
{margin-right: 0}

.blog .footer .wrapper #email a,
.single .footer .wrapper #email a,
.archive .footer .wrapper #email a,
.search .footer .wrapper #email a,
.error404 .footer .wrapper #email a
{color: #fff}

#searchform {margin-bottom: 40px}
.widgettitle {margin-bottom: 10px}
#s {width: 108px; height: 20px; border: 1px solid #999999}
#searchsubmit {text-indent: -9999px; border: none; background: url(../images/search_but.gif) no-repeat 0 2px; width: 65px; height: 29px; margin-top: 2px}
#searchsubmit:hover {cursor: pointer}
.wp-post-image {border: 5px solid #767676}
.alignleft {float: left; margin: 0 20px 20px 0}
.alignright {float: right; margin: 0 0 20px 20px}
.center {text-align: center; margin: 0 auto}
.screen-reader-text {text-indent: -9999px; font-size: 0; line-height: 0 }

.post-categories {margin: 0 0 40px 0; padding: 0}
.tags {}

#blog-text img {border: 5px solid #767676}
.wp-caption-text {text-align: center!important}