/*================================================================
The MAIN stylesheet for the website.

Define SITE-WIDE styles:
  - General Typography
  - Header Content
  - Sidebar Content
  - Forms
  - Tables
  - Footer
  - Sitewide Custom Definitions
  
================================================================*/

@import url("base.css");
@import url("layout.css");
@import url("navigation.css");


/* GENERAL TYPOGRAPHY (Standard HTML tags)
----------------------------------------------------------------*/
html, body {
  font-family: verdana, helvetica, sans-serif;
  color: black;
  }

h1 {
  color: #000; 
  margin: 15px 0 12px 0;
  padding: 3px 0;
  font: 1.5em Trebuchet MS, sans-serif;
  line-height: 1.5em;
  }

#strapline  h1 {
font: 1.4em Trebuchet MS, sans-serif;
margin: 0;
padding: 7px 20px;
line-height: 1.2em;
color: #eee;
  }

#strapline  h1 a{
text-decoration: none;
color: #eee;
  }

     
h2 {
color: #21A2E6; /* cyan */
  margin: 16px 0 6px 0;
  line-height: 1.3em;
  font: 18px Trebuchet MS, sans-serif;
  }

  h3 {
  color: #333;
  margin: 14px 0 8px 0;
  line-height: 1.2em;
  font: 12px verdana, sans-serif;
  font-weight: bold;
  }

  h1 a, h2 a, h3 a{
  color: #000;
  text-decoration: none;
  }
  

p {
  margin: 5px 0 6px 0;
  color: #333;
  font: 11px verdana, sans-serif;
  line-height: 1.4em;
  }
  

a:link, a:visited {
  color: #21A2E6; /* cyan */
  text-decoration: underline;
  }

h1 a:visited, h2 a:visited, h3 a:visited {
color: inherit;
text-decoration: none;}

a:hover {
  color: #87CCF0; /* cyan light */
  text-decoration: none;
  }

small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 10px;
line-height: 1.5em;
color: #21A2E6; /* cyan */
}

strong {
background: #DFF3FB;
}

a.block-link {
	display: block;
	padding: 10px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	background: #eee;
	border: 1px solid #ccc;
	margin: 20px 0px;
	}


/* SIDEBAR CONTENT
----------------------------------------------------------------*/
#sidebar {
  text-align: left;

  }
  
#sidebar h3, #other-products h3 {
padding: 0px 10px 0px 5px;
  }
  #sidebar h3 a:link, #sidebar h3 a:hover, #sidebar h3 a:visited{
text-decoration: none;
color: #333;
  }

    #other-products h3 a:link, #other-products h3 a:hover, #other-products h3 a:visited{
text-decoration: none;
color: #333;
  }
  
#sidebar p {
  font-size: 11px;
  line-height: 1.3em;
  }

#social-media {
margin: 2px;
}


/* CONTENT LEFT
----------------------------------------------------------------*/
#greycontent {
  padding: 5px 20px 10px 20px;
  background: #ccc;
}

.product{
float: right;
margin: 10px 0px 5px 10px;
padding: 3px;
border: 1px solid #efefef;
display: inline;
background: #fff;
}

.product img{
margin: 0px;
padding: 0px 0px 2px 0px;
border: 0px;
display: block;
}

.sub-cat{
margin: 20px 0px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}

.sub-cat a{
text-decoration: none;
}

.sub-cat:hover{
background: #eee;
}

/* FORMS
----------------------------------------------------------------*/

fieldset.sign-up {
	border: 1px solid #eee;
	padding: 0px 2px 2px 2px;
	margin-bottom: 5px;
	}

fieldset.sign-up label {
	font-size: 9px;
	}
	
fieldset.sign-up p{
	margin: 5px 0px;
	}

	
fieldset {
	border-radius: 8px;
   -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border: 1px solid #ccc;
  background: #fff;
  -moz-box-shadow: 0px 0px 5px #ccc;
  -webkit-box-shadow: 0px 0px 5px #ccc;
  box-shadow: 0px 0px 5px #ccc;
  padding: 10px 20px;
  margin-bottom: 20px;
	}
	
	fieldset h2 {
	margin: 10px 0 20px 0;
	}
	
	
	fieldset span {
	margin-left: 150px;
	}
	
	
input[type="file"], input[type="button"], input[type="submit"], input[type="reset"] {
padding: 8px 12px !important;
	text-align: center;
	color: #e5f0f8;
	background: #21A2E6;
	border: 0;
	margin: 0;
	 border-radius: 5px;
   -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
cursor:pointer;
font-size:14px !important;
line-height:14px;
text-decoration:none;
margin-left: 150px;
}

input[type="file"]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
	background: #87CCF0; /* cyan light */
	color: #fff;
}



textarea, input[type="text"], input[type="password"] {
	border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-style:solid;
border-width:1px;
border-color: #ccc;
padding:2px 8px;
background: #fff;
padding:4px 8px;
text-decoration:none;
width: 300px;
font-size:12px !important;
margin-bottom: 6px;
margin-top: 3px;
}

textarea {

}

label {
	margin: 0;
	font-size: 12px;
	font-weight: bold;
	width: 150px;
	float: left;
	display: block;
	}

label.check-label {
	margin: 0 0 0 10px;
	font-size: 12px;
	display: inline;
	width: auto;
	}

#sidebar input[type="file"], #sidebar input[type="button"], #sidebar input[type="submit"], #sidebar input[type="reset"] {
margin-left: 0px;
}


/* Alert messages for quote/contact form */

.notification_error
{
height: auto;
padding: 8px;
background: #ffffd9;/*pale yellow*/
text-align: left;
-moz-border-radius: 5px;
}

.notification_error li
{
color: #f3308e; /* magenta */
font-size: 12px;
}

.notification_ok
{
height: auto;
padding: 8px;
background: #EBF6FC; /*pale blue*/
-moz-border-radius: 5px;
}



/* TABLES
----------------------------------------------------------------*/
table {
  border-collapse: collapse;
  text-align: left;
  margin: 15px 0px;
  }

caption {
  color: #333;
  margin: 12px 0 6px 0;
  line-height: 1.2em;
  font: 12px verdana, sans-serif;
  font-weight: bold;
  text-align: left;
  }
  
td {
  padding: 6px 6px;
  font: 10px verdana, sans-serif;
  border-bottom: 1px solid #ccc;
  }
 
 tr.thick {
  border-bottom: 1px solid #333;
  } 

  td.highlight {
background: #EBF6FC; /*pale blue*/
  }

    td.pink {
background: #F7D8ED;/*pale pink*/
  }
      td.cream {
background: #ffffd9;/*pale yellow*/
  }

  th {
  padding: 4px 6px;
  font: 10px verdana, sans-serif;
  text-align: center;
  font-weight: bold;
  color: #000;
  border-bottom: 2px solid #000;
  }

table.basic {
  border-width: 1px 1px 0px 0px;
  border-style: solid;
  border-color: #ccc;
  text-align: left;
  margin: 10px 0px;
  }
table.basic td {
  padding: 6px 6px;
  margin: 2px 0px;
  font: 10px verdana, sans-serif;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  }

  table.basic th {
  width: 100px;
  padding: 4px 6px;
  font: 10px verdana, sans-serif;
  font-weight: normal;
  text-align: right;
  vertical-align: text-top;
  color: #000;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  }

  table.basicplus {
  border-width: 1px 1px 0px 0px;
  border-style: solid;
  border-color: #ccc;
  text-align: left;
  margin: 10px 0px;
  }

  table.basicplus td {
  padding: 6px 6px;
  margin: 2px 0px;
  font: 10px verdana, sans-serif;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  }

    table.basicplus th {
  padding: 4px 6px;
  font: 10px verdana, sans-serif;
  font-weight: normal;
  text-align: left;
  vertical-align: text-top;
  color: #000;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  background: #DFF3FB;
  }
  
   table.basic-centered {
  border-width: 1px 1px 0px 0px;
  border-style: solid;
  border-color: #ccc;
  text-align: center;
  margin: 10px 0px;
  }

  table.basic-centered td {
  padding: 6px 6px;
  margin: 2px 0px;
  font: 10px verdana, sans-serif;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  }

    table.basic-centered th {
  padding: 4px 6px;
  font: 10px verdana, sans-serif;
  font-weight: normal;
  text-align: center;
  vertical-align: text-top;
  color: #000;
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  background: #DFF3FB;
  }

table.vertical {
  border-bottom: 1px solid #ccc;
  }

table.vertical td {
  padding: 0px 6px 2px 6px;
  font: 10px verdana, sans-serif;
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: #ccc;
  vertical-align: top;
  }

  table.vertical td h3{
margin-top: 0;
  }

  table.noborders td {
  padding: 0px 6px 0px 6px;
  font: 10px verdana, sans-serif;
  border: 0;
  vertical-align: top;
  }

table.order {
  border-collapse: separate;
  border-spacing: 2px;
  text-align: left;
  margin: 10px 0px;
  }
.order td {
  padding: 6px 6px;
  margin: 2px 0px;
  font: 10px verdana, sans-serif;
  border-bottom: 1px solid #ccc;
  }

  .order th {
  width: 100px;
  padding: 4px 6px;
  font: 10px verdana, sans-serif;
  font-weight: normal;
  text-align: right;
  color: #000;
  border:0px;
  }

  table.order-conf {
  border-collapse: separate;
  border-spacing: 2px;
  text-align: left;
  margin: 0px 0px;
  }
  
.order-conf td {
  padding: 6px 6px;
  background: #DBF0FD;
  margin: 2px 0px;
  font: 10px verdana, sans-serif;
  border: 0;
  }


  .order-conf th {
  width: 100px;
  padding: 4px 6px;
  font: 10px verdana, sans-serif;
  font-weight: normal;
  text-align: right;
  border:0px;
  }


  table.swatch {
  border-collapse: separate;
  border-spacing: 4px;
  text-align: left;
  margin: 10px 0px;
  float: left;
  }
.swatch td {
  padding: 6px 5px;
  margin: 2px 0px;
  font: 10px verdana, sans-serif;
  border: 1px solid #eee;
  }


.design-prices{
	border-collapse:separate;
}
  
 /* zebra stripes on our design table  */ 
.design-prices tbody tr:nth-child(odd) {
  background: #f5fcfd;
}

.design-prices thead th:empty{
    background:transparent;
    border:none;
}


.design-prices thead tr:nth-child(1) th{
	
	font-size: 18px;
}

.design-prices thead th:nth-child(2),
.design-prices thead th:nth-child(3){
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius:8px 8px 0px 0px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

.design-prices thead tr:nth-child(1) th:nth-child(3),
.design-prices thead th:nth-child(4),
.design-prices thead th:nth-child(5){
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #1c609f;
    border:1px solid #2ca5dd;
    border-bottom:3px solid #2ca5dd;
    background: #2ca5dd; /* Old browsers */
background: -moz-linear-gradient(top,  #2ca5dd 0%, #3174bc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ca5dd), color-stop(100%,#3174bc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2ca5dd 0%,#3174bc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2ca5dd 0%,#3174bc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2ca5dd 0%,#3174bc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2ca5dd 0%,#3174bc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ca5dd', endColorstr='#3174bc',GradientType=0 ); /* IE6-9 */

    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius:8px 8px 0px 0px;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

.design-prices tbody td:nth-child(2),
.design-prices tbody td:nth-child(3){
background: #c7e8ac;
}

.design-prices tbody td:nth-child(4),
.design-prices tbody td:nth-child(5){
background: #c0e5f5;
}


/* FOOTER CONTENT
----------------------------------------------------------------*/


.specs {
background: #DFF3FB;
padding: 6px 8px;
margin: 10px 0px;
line-height: 150%;
color: #000;
font: 12px verdana, sans-serif;
clear: right;
}

.warning {
background: #fdf7b6; /* yellow */
padding: 6px 8px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
margin-top: 20px;
}

.notice {
background: #fbdff0; /* magenta light */
padding: 6px 8px;
margin: 10px 0px;
line-height: 150%;
color: #000;
font: 12px verdana, sans-serif;
clear: right;
}

/* copyright
----------------------------------------------------------------*/
#copyright {
font: 10px verdana, sans-serif;
color: #fff;
padding: 8px 10px;
background: #87CCF0; /* cyan light */
clear: both;
margin: 5px 0 10px 0;
  }

/* SITE-WIDE CUSTOM STYLES (For page-specific stuff, use css/pages/mypage.css)
------------------------------------------------------------------------------*/


.formerror-head {
  padding: 5px 0;
  color: #CC0000;
}


.errors p{
  font: 11px verdana, sans-serif;
  color: #EF5B99; /* magenta */
  padding: 3px 0px 2px 20px;
  background: url("../images/error.gif") no-repeat top left;
}


.roundbottom {
background: url("../images/br.gif") no-repeat top right;
}
img.corner {
width: 10px;
height: 10px;
border: none;
display: block;
}

img.right{
float: right;
margin: 0px 0px 0px 10px;
}

img.rightbanner{
float: right;
margin: 0px 0px 0px 4px;
}

img.left{
float: left;
margin: 0px 10px 0px 0px;
}

.recent-work img {
float: right;
border: 0;
}

/* Lists (ul)
----------------------------------------------------------------*/
ul.ticklist {
margin: 10px 0px; 
padding: 0;
list-style-type: none;
  }

ul.ticklist li {
background: url("../images/tick.png") 4px 0px no-repeat;
color: #21A2E6;  /*  cyan */
  font: 12px 'Trebuchet MS', sans-serif;
  font-weight: bold;
  line-height: 1.4em;
  padding-left: 30px;
  padding-top: 2px;
  padding-bottom: 8px;
  }
  
 

ol li, ul li  {
  margin: 5px 0 6px 0;
  color: #333;
  font: 11px verdana, sans-serif;
  line-height: 1.4em;
  }
  
  
ul.standard li {
  margin: 5px 0 6px 0;
  color: #333;
  font: 11px verdana, sans-serif;
  line-height: 1.4em;
  }
  
/* news feed
----------------------------------------------------------------*/
#blogfeed {
padding: 0px;
margin: 20px 0 0 0;
  }
  
  #newsfeed {
padding: 0px;
margin: 20px 0 0 170px;
width: 605px;
  }

  #newsfeed img{
float: left;
  }

  #feed1, #feed2, #feed3 {
margin: 0px 0px 0px 0px;
padding: 8px 15px;
border: 1px solid #ccc;
background: #fff url(/css/images/div-bg.jpg) repeat-x bottom;
  }
  
  #feed3 img{
width: 75px;
height: 75px;
margin-right: 3px;
  }


  #feed1 h3, #feed1 small{
margin: 0;
padding: 0;
  }


  #paddiv {
  margin: 10px 0px;
  }

#announcement{
padding: 8px 15px;
background: yellow;
margin: 10px 20px 15px 165px;
}

#announcement h1{
margin-top: 0;
font-size: 28px;
}

.discount{
background: #EBF6FC; /*pale blue*/
	padding: 12px 16px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
margin-top: 20px;
font-size: 32px;
color: #000;
text-align: center;
}

#slider{
	margin: 10px 0px 10px 0px;
}

.pad10{
	padding: 10px;
}

.nav-tabs{
	margin: 0 0 15px 0;
}

.alert{
	margin-top: 10px;
}