/*

Theme Name: The Website Development Company

Theme URI: //websitedevelopmentcompany.org.uk

Description: Wordpress theme for The Website Development Company

Version: 3.0

Author: Danielle O'Dwyer

*/





/* ----------------------------------------------------------------------- basic ----------------------------------------------------------------- */

* {

    padding: 0;

    margin: 0;

}

body {

	font-family: Arial, Sans-Serif;

        background-color: #E9E9E9;

}

.canvas {

	height: auto;

	width: auto;

	margin: 0 auto;

	margin-top: 5px;

}

.header {

	height: 20px;

	width: 760px;

	margin: 0 auto;

	clear: both;

	color: #AEAEAE;

	text-align: center;

	font-size: 0.7em;

}

/* ----------------------------------------------------------------------- navigation ----------------------------------------------------------------- */

.navigation {

	width: 755px;

	height: auto;

	margin: 0 auto;

	clear: both;

        background-color: #C8C8C8;

        padding: 0 0 0 2px;

        border: 1px dotted #b2b2b2;

}

.navigation li {

	clear: none;

	float: left;

        display: inline;

	list-style-type: none;

	text-align: center;

        padding: 0;

        margin: 4px 2px;

}

.navigation a {

	text-decoration: none;

	clear: none;

	float: left;

        display: inline;

	margin: 0px;

	font-size: 90%;

	font-weight: bold;

}

.page-item-22 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-blue.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 39px;

}

.page-item-22 a:hover {

        color: #004284;

        background-image: url(images/backgrounds/nav-background-blue-hover.jpg);

	background-repeat: repeat-x;  

        padding: 11px 10px 4px 10px;

        width: 39px;    

}

.page-item-25 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-red.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 81px;

}

.page-item-25 a:hover {

        color: #990000;

        background-image: url(images/backgrounds/nav-background-red-hover.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 81px;

}

.page-item-27 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-yellow.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 91px;

}

.page-item-27 a:hover {

        color: #cc9900;

        background-image: url(images/backgrounds/nav-background-yellow-hover.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 91px;

}

.page-item-29 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-blue.jpg);

	background-repeat: repeat-x;

        padding: 11px 8px 4px 8px;

        width: 105px;

}

.page-item-29 a:hover {

        color: #004284;

        background-image: url(images/backgrounds/nav-background-blue-hover.jpg);

	background-repeat: repeat-x;

        padding: 11px 8px 4px 8px;

        width: 105px;

}

.page-item-31 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-green.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 101px;

}

.page-item-31 a:hover {

        color: #009900;

        background-image: url(images/backgrounds/nav-background-green-hover.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 101px;

}

.page-item-33 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-red.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 91px;

}

.page-item-33 a:hover {

        color: #990000;

        background-image: url(images/backgrounds/nav-background-red-hover.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 91px;

}

.page-item-37 a {

        color: #000;

        background-image: url(images/backgrounds/nav-background-yellow.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 81px;

}

.page-item-37 a:hover {

        color: #cc9900;

        background-image: url(images/backgrounds/nav-background-yellow-hover.jpg);

	background-repeat: repeat-x;

        padding: 11px 10px 4px 10px;

        width: 81px;

}



/* ------------------------------------------------------------------ banner ----------------------------------------------------------- */



.banner {

	width: auto;

	height: auto;

	min-height: 60px;

	margin: 0 auto;

	clear: both;

}

.bannercontent {

	width: 760px;

	height: auto;

	min-height: 60px;

	margin: 0 auto;

	clear: both;

}

.logo{

	width: 280px;

	height: auto;

	min-height: 50px;

	float: left;

	display: inline;

	color: #004284;

	font-size: 1em;

	line-height: 20px;

	font-weight: bold;

	padding-top: 10px;

}

.portfolio{

	width: 160px;

	height: auto;

	min-height: 40px;

	text-align: center;

	margin: 10px 20px 10px 20px;

	float: left;

	border: none;

	clear: right;

}

.portfolio li  {

	clear: none;

	float: left;

	width: 160px;

	height: auto;

	min-height: 40px;

	list-style-type: none;

	text-align: center;

	display: inline;

	padding: 0px;

	margin: 0px;

	background-color: #990000;

}

.portfolio a, .portfolio a:active, .portfolio a:visited {

	color: #fff;

	text-decoration: none;

	height: 30px;

	width: 150px;

	clear: none;

	float: left;

	margin: 0px;

	padding: 5px;

	font-size: 0.9em;

	line-height: 30px;

	font-weight: bold;

}

.portfolio a:hover {

	color: #FFFFFF;

	text-decoration: none;

	height: 30px;

	width: 150px;

	background-color: #003366;

	margin: 0px;

	padding: 5px;

	line-height: 30px;

}



.tel {

	width: 280px;

	height: auto;

	min-height: 50px;

	float: right;

	display: inline;

	color: #004284;

	font-size: 1em;

	line-height: 20px;

	text-align: right;

	font-weight: bold;

	padding-top: 10px;

}





/* ------------------------------------------------------------------ content home ----------------------------------------------------------- */

.content {

	background-color:#fff;

	width: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

* html .content { /* tan hac */

	background-color: #fff;

	width: 760px;

	w\idth: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

 /* ---------------- content home ------------ */

.contenthome {

	background-color: #fff;

	width: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

* html .contenthome { /* tan hac */

    background-color: #fff;

	width: 760px;

	w\idth: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

 /* ---------------- content contact page ------------ */

.contentcontact {

	background-color: #fff;

	width: 760px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

* html .contentcontact { /* tan hac */

	background-color: #fff;

	width: 760px;

	w\idth: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}





/* -------------------------------------------------------------- text ---------------------------------------------------------- */

h1 {

	font-size: 1.1em;

	color: #002448;

	margin-bottom: 20px;

	line-height: 150%;

	text-align:center;

}

h2 {

	color: #5E0000;

	margin-bottom: 15px;

	line-height: 150%;

	font-size: 0.95em;

        border-bottom: 1px solid #5E0000;

}

h3{

	font-size: 0.8em;

	color: #333333;

	margin-bottom: 15px;

	line-height: 150%;

}

h3 a{

	color: #333333;

}

p {

	font-size: 0.75em;

	color: #333333;

	margin-bottom: 20px;

	text-align:justify;

	line-height: 150%;

}

ul {

	color: #333333;

	margin: 0 30px 15px 14px;

	float: left;

	display: inline;

	line-height: 150%;

}

li {

	font-size: 0.8em;

	color: #333333;

	line-height: 150%;

	margin-bottom: 10px;

	padding-left: 5px;

	

}

a{

	color: #003366;

	text-decoration: underline;

}

a:hover{

	color: #0057AE;

}





/* ----------------------------------------------------------------- Content single (Post pages) ------------------------------------------------------------ */

.contentsingle {

	background-color: #fff;

	width: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

* html .contentsingle { /* tan hac */

	background-color: #FFFFF4;

	width: 760px;

	w\idth: 720px;

	padding: 20px;

	height: auto;

	margin: 0 auto;

        border: 1px dotted #c9c9c9;

}

.contentsingle h1 {

        color: #886600;

}

.contentsingle h2 {

        color: #cc9900;

        border-bottom: 1px solid #cc9900;

}

.contentsingle h3 {

        color: #cc9900;

}

.contentsingle a {

        color: #cc9900;

}

.contentsingle a:hover {

        color: #003399;

}

.post h1 {

	color: #886600;

}

.post h2 a{

	color: #cc9900;

	text-decoration: underline;

}

.post h2 a:hover{

	color: #003366;

}

.post h3{

	color: #cc9900;

}

.post a p{

	color: #cc9900;

	text-decoration: underline;

}

.post a:hover p{

	color: #003366;

}

.nounderline {

        border-bottom-style: none;

}

.ynounderline {

	color: #cc9900;

        border-bottom-style: none;

}





/* ------------------ Blog Index Page - Blog Navigation -------------------*/

.blognav {

	float: left;

	display: inline;

	clear: both;

	background-color: #886600;

	padding: 5px 20px;

	color: #fff;

	font-weight: bold;

	width: 680px;

	height: 21px;

}

.blognav a {

	color: #fff;

	text-decoration:none;

}

.blognav a:hover {

	color: #fff;

	text-decoration:underline;

}

.alignleftlink {

	float: left;

	display:inline;

}

.alignrightlink {

	float: right;

	display:inline;

}





/* --------------------------------------------------------------------- Footer ------------------------------------------------------------------ */



.footer {

	background-color: #003366;

	height: auto;

	width: 720px;

	padding: 10px 20px 10px 20px;

	margin: 0 auto 50px auto;

        border: 1px dotted #bbb;

}

.footer p .smalltext {

	color: #ccc;

	font-size: 0.8em;

	margin-bottom: 10px;

	line-height: 150%;

	clear: both;

	text-align: center;

	font-weight: normal;

}

.footer h2 {

	color: #fff;

	font-weight: bold;

	line-height: 150%;

	margin-bottom: 2px;

	clear: both;

	text-align: center;

}

.footer h2 a{

	color: #fff;

	padding: 4px 10px;

}

.footer h2 a:hover, .footer h2 a:visited, footer h2 a:active{

	color: #fff;

	padding: 4px 10px;

}

.footer p {

	color: #ccc;

	line-height: 150%;

	clear: both;

	text-align: center;

        margin: 0;

}





/* ------------ Footer home page ------------ */

.footerhome {

	background-color: #003366;

	height: auto;

	width: 720px;

	padding: 10px 20px 10px 20px;

	margin: 0 auto 50px auto;

        border: 1px dotted #bbb;

}

.footerhome p .smalltext {

	color: #ccc;

	font-size: 0.8em;

	margin-bottom: 10px;

	line-height: 150%;

	clear: both;

	text-align: center;

	font-weight: normal;

}

.footerhome h2 {

	color: #fff;

	font-weight: bold;

	line-height: 150%;

	margin-bottom: 2px;

	clear: both;

	text-align: center;

}

.footerhome h2 a{

	color: #fff;

        text-decoration: underline;

	padding: 4px 10px;

}

.footerhome h2 a:hover, .footerhome h2 a:visited, .footerhome h2 a:active{

	color: #fff;

	padding: 4px 10px;

}



.footerhome p {

	color: #ccc;

	line-height: 150%;

	clear: both;

	text-align: center;

        margin: 0;

}



.footerhome a, .footer a{

	color: #fff;

        

}

.footerhome a:hover, .footerhome h2 a:visited, .footerhome h2 a:active, .footer a:hover, .footer h2 a:visited, .footer h2 a:active{

	color: #fff;

}





/* ******************************************************************* PAGE STYLING *****************************************************888*************** */



/* --------------------------------------------------------------------- Home Page ----------------------------------------------------------------- */

.ineedawebsite a {

	float: left;

	display: inline;

	width: 310px;

	margin-right: 10px;

	color: #FFFFFF;

	line-height: 150%;

	background-color: #004284;

	margin-bottom: 20px;

	font-size: 1.2em;

	font-weight: bold;

	text-align: center;

	padding: 20px;

	text-decoration: none;

}

.ineedawebsite a:hover {

	background-color: #990000;

	width: 310px;

	text-decoration: none;

        color: #FFFFFF;

}

.websitenotworking a {

	float: right;

	display: inline;

	width: 310px;

	margin-left: 10px;

	color: #FFFFFF;

	line-height: 150%;

	background-color: #004284;

	margin-bottom: 20px;

	font-size: 1.2em;

	font-weight: bold;

	text-align: center;

	padding: 20px;

	text-decoration: none;

}

.websitenotworking a:hover {

	background-color: #990000;

	width: 310px;

	text-decoration: none;

        color: #FFFFFF;

}

.needmoretraffic a {

	float: left;

	display: inline;

	width: 310px;

	margin-right: 10px;

	color: #FFFFFF;

	line-height: 150%;

	background-color: #004284;

	margin-bottom: 25px;

	font-size: 1.2em;

	font-weight: bold;

	text-align: center;

	padding: 20px;

	text-decoration: none;

}

.needmoretraffic  a:hover {

	background-color: #990000;

	width: 310px;

	text-decoration: none;

        color: #FFFFFF;

}

.needconsultancy a {

	float: right;

	display: inline;

	width: 310px;

	margin-left: 10px;

	color: #FFFFFF;

	line-height: 150%;

	background-color:#004284;

	margin-bottom: 25px;

	font-size: 1.2em;

	font-weight: bold;

	text-align: center;

	padding: 20px;

	text-decoration: none;

}

.needconsultancy a:hover {

	background-color: #990000;

	width: 310px;

	text-decoration: none;

        color: #FFFFFF;

}

.top10 {

        border: 0;

	text-align:center;     

}

.top10 a {

        border: 0;   

}

.top10 a img {

        border: 0;   

}





/* --------------------------------------------------------------------- What we do page ----------------------------------------------------------------- */



.centredservices {

	text-align: center;

	padding: 15px;

        font-size: 0.95em;

	font-weight: bold;

        background-color: #E9E9E9;

        border: 1px dotted #ccc;

}

.centredservices ul {

        margin: 0 auto;

        width: 688px;

}

.centredservices li {

	list-style-type: none;

        display: inline;

}

.centredservices li a  {

        color: #000;

        background-image: url(images/backgrounds/link.jpg);

	background-repeat: repeat-x;

	text-decoration: none;

	padding: 7px 40px 7px 40px;

        border: 1px dotted #ccc;

}

.centredservices li a:hover {

        color: #990000;

        background-image: url(images/backgrounds/link-hover.jpg);

	background-repeat: repeat-x;

	text-decoration: none;

	padding: 7px 40px 7px 40px;

        border: 1px dotted #ccc;

}





/* --------------------------------------------------------------------- Why chose us ----------------------------------------------------------------- */



.div1standards {

	float: left;

	display: inline;

	width: 350px;

	margin-right: 10px;

	font-size: 0.75em;

	color: #333333;

	margin-bottom: 15px;

	text-align:justify;

	line-height: 150%;

}

.div2standards {

	float: right;

	display: inline;

	width: 350px;

	margin-left: 10px;

	font-size: 0.75em;

	color: #333333;

	margin-bottom: 15px;

	text-align:justify;

	line-height: 150%;

}



/* --------------------------------------------------------------------- Contact Us Page ----------------------------------------------------------------- */



.map {

	width: 350px;

}



.innermap {

	width: 344px;

	height: 231px;

	border: 3px solid #990000;

	margin-top: 5px;

	margin-right: 0;

	margin-bottom: 0;

	margin-left: 0;

}



/* --------------------------------------------------------------------- General classes ----------------------------------------------------------------- */

.clearfloats {

	clear: both;

}

.small {

	font-size: 0.7em;

	margin-bottom: 0px;

	float: right;

	display: inline;

	line-height: 150%;

}

.div1 {

	float: left;

	display: inline;

	width: 350px;

	margin-right: 10px;

	color: #333333;

	line-height: 150%;

}

.div2 {

	float: right;

	display: inline;

	width: 350px;

	margin-left: 10px;

	color: #333333;

	line-height: 150%;

}

.pink {

	color: #990000;

}





/* --------- Image Styling ---------- */

.pictureright{

	float: right;

	display:inline;

	border: 2px solid #990000;

	width: 270px;

	height: 180px;

	margin: 5px 0 23px 30px;

	padding: 0;

}

.pictureleft {

	float: left;

	display:inline;

	border: 2px solid #990000;

	width: 270px;

	height: 180px;

	margin: 5px 30px 23px 0;

	padding: 0;

}

.imgrightpg{

	float: right;

	display:inline;

	border: 1px solid #ccc;

	width: 300px;

	height: 200px;

	margin: 5px 0 23px 30px;

	padding: 0;

}

.imgleftpg {

	float: left;

	display:inline;

	border: 1px solid #ccc;

	width: 300px;

	height: 200px;

	margin: 5px 30px 23px 0;

	padding: 0;

}



/* --------- Image Styling ---------- */

.post .pictureright{

	float: right;

	display:inline;

	border: 2px solid #cc9900;

	width: 270px;

	height: 180px;

	margin: 12px 0 23px 30px;

	padding: 0;

}

.post .pictureleft {

	float: left;

	display:inline;

	border: 2px solid #cc9900;

	width: 270px;

	height: 180px;

	margin: 12px 30px 23px 0;

	padding: 0;

}

.bb {

        color: #002448;

        border-bottom: 1px solid #002448;

}

.yb {

        color: #886600;

        border-bottom: 1px solid #886600;

}

.gb {

        color: #004200;

        border-bottom: 1px solid #004200;

}

.rb {

        color: #5E0000;

        border-bottom: 1px solid #5E0000;

}

.b {

        color: #004284;

}

.y {

        color: #cc9900;

}

.g {

        color: #007700;

}

.r {

        color: #990000;

}

.dy {

        color: #886600;

}

.dg {

        color: #004200;

}

.dr {

        color: #5E0000;

}



.noborder{

        border: none;

}

.bnoborder {

        color: #003366;

}

.dottedline {

	margin-bottom: 20px;

        border-bottom: 1px dotted #ccc;

}

nobottommargin: {

       margin-bottom: 0px;

       padding-bottom: 0px;

}

noborderorbottommargin: {

       margin-bottom: 0px;

       padding-bottom: 0px;

       border: none;

}





/* --------------------------------------------------------------------- Portfolio page ----------------------------------------------------------------- */



.imglefthead {

	margin-right: 18px;

	margin-left: 0px;

	background-color: #282F65;

	border-top-width: 1px;

	border-right-width: 1px;

	border-bottom-width: 0px;

	border-left-width: 1px;

	border-top-style: solid;

	border-right-style: solid;

	border-bottom-style: none;

	border-left-style: solid;

	border-top-color: #000033;

	border-right-color: #000033;

	border-left-color: #000033;

	height: auto;

	width: 338px;

	padding: 5px;

	font-size: 14px;

	font-weight: bold;

	color: #FFFFFF;

	text-align: center;

	border-bottom-color: #000033;

	float: left;

	display:inline;

	clear: none;

}

.imgleft {

	border: 1px solid #000033;

	margin-right: 18px;

	margin-bottom: 5px;

	margin-left: 0px;

	float: left;

	display:inline;

	clear: none;

}

.imgrighthead {

	background-color: #282F65;

	border-top-width: 1px;

	border-right-width: 1px;

	border-bottom-width: 0px;

	border-left-width: 1px;

	border-top-style: solid;

	border-right-style: solid;

	border-bottom-style: none;

	border-left-style: solid;

	border-top-color: #000033;

	border-right-color: #000033;

	border-left-color: #000033;

	height: auto;

	width: 338px;

	margin: 0px;

	padding: 5px;

	float: left;

	display:inline;

	font-size: 14px;

	font-weight: bold;

	color: #FFFFFF;

	text-align: center;

	border-bottom-color: #000033;

	clear: none;

}





.imgright {

	border: 1px solid #000033;

	margin-right: 0px;

	margin-bottom: 5px;

	margin-left: 0px;

	float: left;

	display:inline;

	clear: none;

}

.imagetxtleft {

	height: auto;

	width: 350px;

	margin-top: 0px;

	margin-right: 20px;

	margin-bottom: 20px;

	margin-left: 0px;

	clear: none;

	float: left;

	display:inline;

	font-size: 12px;

	color: #333333;

}

.imagetxtright {

	height: auto;

	width: 350px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 20px;

	margin-left: 0px;

	float: left;

	display:inline;

	font-size: 12px;

	color: #333333;

	clear: none;

}

.blogdescription {
	color: #fff;
}
.body_back .canvas .contenthome .main_page_style_small .main_page_style_small .blogdescription {
	height: 10px;
	margin: 0;
}
.main_page_style_small {
	margin: 20px 0 0 0;
}
.body_back .canvas .contenthome td {
	background-color:#999999;
	padding: 2px 15px 13px 15px;
	margin-top: 60px;
	height: 30px;
}
.body_back .canvas .contenthome table {
	margin: 9px 0 20px 0;
}