body {
margin: 0;
padding: 0;
font:70% Verdana, Helvetica, sans-serif;
padding-top:3px;
}

#threeColLayout {
background: #ffecf7;
background: url(../img/bg.gif);
}
 

/* default links */
a:link {
background-color: transparent;
text-decoration: underline;
color: #666;
}
a:hover {
background-color: #FFC;
text-decoration: underline;
color: white;
}
a:visited {
background-color: transparent;
text-decoration: underline;
color: #666
}

/* headers here */
h1 {
margin: 0;
padding: 30px;
font-size: 150%;
color: #FF0000;
text-indent: -9000px;
}

h2 {
margin: 0 10px 0 10px;
padding: 2px;
font-size: 130%;
color: white;
background: #000000;
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3 {
text-transform: uppercase;
display: inline;
font-size: 92%;
margin: 10px 5px 0 5px;
padding: 2px;
}

.default h3 {
background: #F6CE45;
}
.careers h3 {
background: #F762E0;
}
.one_man h3 {
font-size: 110%;
background: #B18FD1;
}
.interviews h3 {
font-size: 110%;
background:#FCEBE3;
}
.profiles h3 {
background: #F6FA92;
}

/* main wrapper that holds it all centrally */

#wrapper {
width:750px;
margin:0 auto;
border-left:1px solid black;
border-right:1px solid black;
background: white;  
border-bottom:1px solid black; 
}

/* default masthead holding the banner and mainNav */

#header {
width: 750px;
height: 145px;
background:url(../img/header.jpg);
}

/* now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:750px;
display:inline;
margin: 0 0 20px 0;
background:#FCEBE3;
 }

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */

#threeColLayout #primaryContent {
float:left;
width:270px;
margin: 0 0 20px 195px;
}

#secondaryContent{
float:left;
width:260px;
margin: 0 0 20px 15px;
}

#sideContent{
float:left;
width:247px;
margin: 0 0 20px -462px;
_margin: 0 0 20px -755px;
background:#ebe8de;
 
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT -  used only if no selector */

#twoColContent{
width:555px;
float:left;
margin: 0 0 20px 195px;
}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

.cbSide {
width:185px;
margin: 5px 0 0 -5px;
font-size:11px; 
 
}
.cbSide p {
margin: 0;
padding: 0 5px 2px 5px;
font-size: 90%;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.boxThumb {
margin: 15px 0 0 0;
width:100px;
padding-left:1px;
padding-top:1px;

}

.box {
margin: 15px 15px 0 0;
width:180px;
_width:170px;
padding-left:10px;
_padding-left:10px; 
}

._box {
margin: 20px 36px 2px 0;
width:500px;
background:#FCEBE3;
border:2px solid white;
line-height: 170%;
padding: 5px;
margin-left:25px;
}

/* Styling of the es if there is no JavaScript support */

.cbb {
margin: 0 10px 0 10px;
padding: 5px 0 5px 0;
line-height: 170%;
border: 1px solid black;
   
}

/* paragraph styles for any main boxes */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
   
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
/*margin: 0.5em 0;*/
line-height: 170%;
	}

/* Rules for the top corners and border */
.bt {
	/*background:url(../img/box.png) no-repeat 100% 0 !important;
	background:url(../img/box.gif) no-repeat 100% 0;*/
	margin:0 0 0 18px;
	height:27px;
	}
.bt div {
	height:27px;
	width:18px;
	position:relative;
	left:-18px;
	/*background:url(../img/box.png) no-repeat 0 0 !important;
	background:url(../img/box.gif) no-repeat 0 0;*/
	}

/* Rules for the bottom corners and border */
 

.bb {
	/*background:url(../img/box.png) no-repeat 100% 100% !important;
	background:url(../img/box.gif) no-repeat 100% 100%;*/
	margin:0 0 0 12px;
	height:14px;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	/*background:url(../img/box.png) no-repeat 0 100% !important;
	background:url(../img/box.gif) no-repeat 0 100%;*/
	}

/* Insert the left border */
.i1 {
	padding: 0 0 0 12px;
	background:url(../img/borders.png) repeat-y 0 0 !important;
	background:url(../img/borders.gif) repeat-y 0 0;
	}
/* Insert the right border */
.i2 {
	padding: 0 12px 0 0;
	background:url(../img/borders.png) repeat-y 100% 0 !important;
	background:url(../img/borders.gif) repeat-y 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#FFF;
border: 1px solid #FFF;
	border-width:1px 0;
	padding:0 5px;
	}
/* CSS for the box ends here */

/* date and posted control the small text info in article blurbs */

.date {
font-size: 85%;
font-weight: normal;
color: #666;
}

.posted {
display: block;
margin: -5px 0 0 50px;
padding: 0 0 10px 0;
font-weight: normal;
color: #666;
}

.postedUnderline {
display: block;
margin: 0 5px 5px 50px;
padding: 0 0 5px 0;
font-weight: normal;
color: #666;
border-bottom: 1px solid #999;
}

address {
margin-left: 50px;
}

/* erm, the footer */

#footer{
clear:both;
width: 750px;
height: 65px;
background: transparent url(../img/footer.gif);
padding: 0px;
padding-top:1px;
margin: 0 auto;
text-align:center;
font-size:10px;
}
#footer p {
margin: 10px 10px 0 0;
padding: 30px 4px 4px;
padding-left: 10px;
font-weight: normal;
color: white;
}

#footer a:link, #footer a:visited {
color: #ffffff;
text-decoration:none;
}
#footer a:hover {
color: #000000;
background: #ffffff;
text-decoration:none;
}

/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */

img {
float: left;
margin: 0px 0 2px 5px;
border: 2px solid #ffffff;
}

/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.default img {
border: 0;
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
display: block;
float: none;
margin-top: 4px;
border: 2px solid #000000;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
margin: 20px 40px 0 0;
/*background: url(../img/shadow.gif) no-repeat bottom right;*/
float:left;
line-height:0;
}
 
.img-wrapper img {
float:none;
margin:0;
background:#fff;
padding:4px;
border:1px solid #C5BDBD;
position:relative;
left:-5px;
top:-5px;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
margin: 0 0 20px 50px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
clear: both;
}

/* CSS for the ticked off links. Note, I am not ordering things in the LVHA way, as I prefer the visited tick to work above the arrow once visited. */

.cbSide ul {
list-style-type: none;
margin-top: 0px;
margin-left: -2px;
margin-bottom: 0;
padding-bottom: 5px;
font-weight:normal;
padding-left: 3px; 
}
 
.cbSide li a:link {
color:red; 
line-height:150%;
text-decoration:none; 
display:block;
width:210px;
background:#ebe8de;
padding-left:5px;
   
}

.cbSide li a:active {
color:red; 
line-height:150%;
text-decoration:none; 
display:block;
width:210px;
padding-left:5px; 
  
}

 

.cbSide li a:hover {
color:red;
line-height:150%;
display:block;
width:210px;
text-decoration:underline;
padding-left:5px;
 
  
}

.cbSide li a:visited 
{
color:red;
text-decoration:none; 
line-height:150%;
display:block;
width:210px;
background-position: 0 -40px;
padding-left:5px;
 
}
 
/* horizontal main menu navigation - based on a method from Richard Rutter */

#mainNav
{
margin: 18px 0 0 0;
padding-top:20px;
padding-left: 0px;
width: 750px;
height: 30px;
font-weight: bold;
font-size: 110%;
}

#mainNav ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;

}

#mainNav li
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
height:30px;
}

#mainNav a
{
color: #ffffff;
display: inline;
width: auto;
text-decoration:underline;
margin: 0;
padding: 10px;
padding-bottom:8px;
border-right: 1px solid #FFF;
background:#353535;
background:#F75E1C;
}

#mainNav a:hover, #mainNav a:active 
{ 
    
  color: #fffff;
  text-decoration:none;
  background:url(../img/aHover.gif) no-repeat;
}

#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: #BBB;
color: #F8FCBF;
font-weight: normal;
}

/* Highlighting the current page */

body.home #mainNav a#home, body.gallery #mainNav a#gallery, body.contact #mainNav a#contact { 
  color: #fff;
 
}
body.home #mainNav a:hover#home, body.gallery #mainNav a:hover#gallery, body.contact #mainNav a:hover#contact { 
  color: #000;
}

/* Highlighting external links ONLY in the main text areas, so as not to screw up the ticked-off links */

.box.default a[href^="http:"] { 
  background: url(../img/external.gif) no-repeat right top;
  padding-right: 10px; 
} 
 .box.default a[href^="http://www.collylogic.com"], .box.default a[href^="http://www.collylogic.com"] { 
  background-image: none; 
  padding-right: 0; 
}

/* form styling - not much though kids */
fieldset {
width: 240px;
border: 0;
margin: 0 0 10px 0;
padding: 5px;
text-align:right;
}

legend {
text-transform: uppercase;
font-size: 110%;
font-weight: normal;
margin: 10px 0 2px 0px;
padding: 2px;
background: #D72E2E;
color: #FFF;
}

 

label {
 color: #00000;
}

 

#inputSearch {
margin-top:0;
padding: 2px;
border: 0;
background: ;
color: #707070;
border:1px solid black;
width:190px;
}

#inputBtnSearch {
margin-top:0;
padding: 2px;
border: 0;
background: url(../img/back.gif);
color: white;
border:1px solid black;
padding-left:8px;
padding-right:8px;
font-weight:bold;
}

#inputBtnSearch:hover {
    color:white;
    background: url(../img/backHover.gif);
     
}

textarea {
margin-top:0;
padding: 2px;
border: 0;
background: #D7E7E9;
color: #333;
}

.heading {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:100px;
              
 }
 
#mainNavTop  {
   color:#635D45; 
   padding-left:3px; 
   font-size:10px;
   padding-bottom:3px;
   text-align:right;
    
}

#mainNavTop a {
    color:#bc231b;
    font-size:10px;
    text-decoration:none;
    font-weight:normal;
}

#mainNavTop a:hover 
{
    color:#bc231b;
    font-size:10px;
    text-decoration:underline;
    background:#ffffff;
}

#content 
{
  background:#FCEBE3;
  _width:550px;
  line-height:170%;
  color:#635d45;
}

#points 
{
          list-style-type: none;
}

.collapsed 
{
     display:none;
}

.expanded 
{
     display:block;
}

.menu3 a:hover {
   text-decoration:underline;
}

#group {
    
   padding-right:18px;
}

#goods {
    height:421px;
    overflow:auto;
    padding-right:3px;
}
.goods {
  text-align:center;
  margin:0 auto;
}

#goods a:link {
  color:red;
}
#goods a:active {
  color:red;
}
#goods a:visited {
  color:red;
}

.itemRow {
   
   color:black;
   padding-left:10px;
}

.itemDesc {
    
   padding-left:10px;
}



a:hover {
   text-decoration:none;
   color:red;
   background:#FCEBE3;
    
}

#pager {
   margin: 0 auto;
   text-align:center;
   padding-top:4px; 
   color:red;
} 

#pager a:hover {
   color:red;
}

#emptySearch {
   color:#635d45;
}

 
.orderItemAmount {
    border:1px solid black;
    background:#FCEBE3;
    width:40px;
    font-size:12px;
     
}

.itemRowOrder {
   
   color:black;
   padding-left:10px;
   width:130px;
}

.add {
   font-weight:normal;
   color:red;
   text-decoration:underline;
}

.add:hover {
   font-weight:normal;
   color:red;
   text-decoration:none;
    
}

#info {
   
}

#cart {
    border:1px solid black;
    text-align:center;
    margin:0 auto;
}

#cart:hover {
  background:#FFFFFF;
} 
 

.cartInfo {
   font-weight:normal;
    
}

#mainNavTopCash  {
   color:#635D45; 
   padding-left:3px; 
   font-size:10px;
   padding-bottom:3px;
   text-align:left;
    
}

#mainNavTopCash a {
    color:#bc231b;
    font-size:10px;
    text-decoration:underline;
    font-weight:normal;
}

#mainNavTopCash a:hover 
{
    color:#bc231b;
    font-size:10px;
    text-decoration:none;
    background:#ffffff;
}

#cash {
    border:0px solid black;
    margin:0 auto;
    width:100%;
    text-align:left;
}

#cash th {
    font-size:10px;
    color:#ffffff;
    padding-left:2px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    background:#F75E1C;
}

#cash tr {
    font-size:10px;
    color:#000000;
    padding-left:2px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    background:#8DB7D6;
}

#cash td {
     
    padding-left:2px;
     
   
}

._total {
   text-align:right
   padding-right:2px;
}

#btnOrder {
     
    border-top:1px solid black; 
}

#btnOrder tr {
    background:#C3DAE6;
      
}

#btnOrder a {
     padding-left:2px;
      
}

#register {
  width:100%;
}

input {
  border:1px solid black;
  padding:2px;
  margin:2px;
}

.submit {
  background:#8DB7D6;
  color:#000000;
}

.submit:hover {
  background:#C3DAE6;
   
}

.error {
   color:red;
}

.thumb {
  width:50px;
}

#counter {
  margin:0 auto;
  text-align:center;
  width:100px;
}


/**
 * here to be added
 */ 
 
.heading1 {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:45px;
               
}

.heading2 {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:220px;
               
}
.heading3 {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:180px;
               
}
.heading4 {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:110px;
               
}  
.heading5 {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:170px;
               
} 
.heading6 {
            color:#991200;
            font-size:14px;
            background:#FCEBE3;
            padding:4px;
            padding-left:150px;
               
}  
 
#head {
      text-align:center;
      font-size:12px;
      font-weight:bold;
      padding-left:30px;
}
#head_ {
      text-align:left;
      font-size:12px;
      font-weight:bold;
      padding-left:30px;
}

#main {
   font-weight:bold;
}

#pc {
   text-align:right;
   padding-right:17px;
}

#about {
   padding-left:28px;
} 

#pcE {
   padding-left:30px;
}

#founded {
   padding-left:28px;
}

._box_ {
margin: 20px 36px 2px 0;
width:480px;
background:#FCEBE3;
border:2px solid white;
line-height: 170%;
padding: 5px;
margin-left:57px;
}

 
.jx {
  color:red;
}