/*
  Created for Rodon Signs Inc.
  v.0.4
  
  Copyright, Rodon Signs Inc.
*/

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}

* br { clear: both; }
.clear { clear: both; }

/* Style the menu items above the header*/
#menu {
 color: #222;
 width: auto;
 float: right;
 padding: 10px;
 height: 10px;
 margin: 10px 10px 0px 0px;
}
#menu ul li {
 display: inline;
 list-style-type: none;
 color: #999;
}
#menu ul li a, #menu ul li a:visited {
 text-decoration: none;
 color: #999;
}
#menu ul li a:hover {
 color: #000;
}

/* Style the contact header */
#contact_header {
 color: #222;
 width: auto;
 float: left;
 padding: 10px;
 height: 10px;
 margin: 10px 10px 0px 0px;
}
#contact_header ul li {
 display: inline;
 list-style-type: none;
 color: #999;
 padding: 10px;
}
#contact_header ul li a, #contact_header ul li a:visited {
 text-decoration: none;
 color: #999;
}
#contact_header ul li a:hover {
 color: #000;
}

/* Style the header*/
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 0px 10px 0px 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 5px 0px 0px 0px;
 background: #365FB7; /*#A7A37E;*/
}
/* add company name and logo to the header*/
#co_name h2 {
 height: 100px;
 width: 900px;
 background: url(../images/logo.jpg) no-repeat;
 text-indent: -9000px;
 cursor: pointer;
}
#co_name {
 color: #333;
 width: auto;
 float: left;
 padding: 0px;
 border: 0px; /*1px solid #ccc;*/
 height: auto;
 margin: 0px 5px 0px 5px;
}

/* Syle the left column of the layout*/
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #F4F0D8;  /*#E6E2AF;*/
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 780px; /*750*/
 width: 608px;
 float: left;
}
/* Style the company intro box */
#intro {
 float: left;
 /*border: 1px solid #999;*/
 background: inherit; /*#EFECCA;*/
 margin: 0px 5px 20px 25px;
 left: 10px;
 padding: 0px;
 height: 300px; /*210px*/
 width: 520px;
}
#intro p {
 text-align: center;
}
#intro h1 {
 width: 500px;
 height: 54px;
 margin: 5px;
 border: 0;
 background: url(../images/slogan.jpg) no-repeat;
 text-indent: -9000px;
 font-size: 28px;
}
/* add image via CSS for accessibility */
#intro h2 {
 width: 350px;/*220px;*/
 height: 189px;/*115px;*/
 margin: 5px;
 border: 0;
 background: url(../images/store.jpg) no-repeat;
 text-indent: -9000px;
}
/* Style the digital printing box */

#designer {
 text-align: center;
 /*border: 1px solid #999;*/
 background: inherit; /*#EFECCA;*/
 margin: 30px 5px 5px 15px;
 padding: 0px;
 height: 85px; /*60*/
 width: 500px;
 left: 30px;
}
#designer h2 {
 width: 500px;
 height: 81px;
 background: url(../images/designer.jpg) no-repeat;
 text-indent: -9000px;
 margin: 5px;
 border: 0px;
}
/* Style the section 1 box - tradeshow graphics */
#section1 {
 float: left;
 /*border: 1px solid #999;*/
 background: inherit; /*#EFECCA;*/
 margin: 0px 5px 5px 5px;
 padding: 0px 0px 0px 20px;
 height: 305px;
 width: 180px;
}
/* add image via CSS for accessibility */
#section1 h2 {
 width: 140px;
 height: 115px;
 background: url(../images/tradeshow_banner.png) no-repeat;
 text-indent: -9000px;
 margin: 5px;
 border: 0px;
 cursor: pointer;
}
/* Style the section 2 box - vehicle graphics */
#section2 {
 float: left;
 /*border: 1px solid #999;*/
 background: inherit; /*#EFECCA;*/
 margin: 0px 5px 5px 5px;
 padding: 0px;
 height: 305px;
 width: 180px;
}
/* add image via CSS for accessibility */
#section2 h2 {
 width: 140px;
 height: 115px;
 background: url(../images/wrap_banner.png) no-repeat;
 text-indent: -9000px;
 margin: 5px;
 border: 0px;
 cursor: pointer;
}
/* Style the section 3 box - indoor, outdoor graphics */
#section3 {
 float: left;
 /*border: 1px solid #999;*/
 background: inherit; /*#EFECCA;*/
 margin: 0px 5px 5px 5px;
 padding: 0px;
 height: 305px; /*365px;*/
 width: 180px;
}
#section3 h2 {
 width: 140px;
 height: 115px;
 background: url(../images/signs_banner.png) no-repeat;
 text-indent: -9000px;
 margin: 5px;
 border: 0px;
 cursor: pointer;
}
/* Style the link to gallery for all other examples */
#to_gallery {
 width: 600px;
 height: 20px;
 text-align: center;
}
#to_gallery a:link {
 text-decoration: none;
 color: #365FB7;
}
#to_gallery a:visited {
 text-decoration: none;
 color: #365FB7;
}
#to_gallery a:hover {
 color: 666666;
}

/* Style the contents inside each of the three category sections */
.ssection {
 float: left;
 position: relative;
}
.ssection ul {
 float: left;
 position: relative;
 margin: 5px;
 left: 20px;
 list-style-type: none;
}
.ssection ul li a, .ssection ul li a:visited {
 text-decoration: none;
 color: #999;
}
.ssection ul li a:hover {
 color: #000;
}
.more {
 float:right;
}
.more a:link {
 color: #365FB7;
 text-decoration: none; 
}
.more a:visited {
 color: #365FB7;
 text-decoration: none; 
}
.more a:hover {
 color: #666666;
}
#intro .imgs {
 position: relative;
 width: 360px;
 height: 199px;
 background: #F4F0D8;  /*#E6E2AF; */
 border: 1px solid #aaa;
 margin: 0px 10px 0px 10px;
 left: 70px;
}
.imgs {
 width: 150px;
 height: 125px;
 background: #F4F0D8;  /*#E6E2AF;*/
 border: 1px solid #aaa;
 margin: 10px 0px 5px 10px;
}
.ssection h3 {
 margin: 5px;
}

/* Syle the right column of the layout*/
#rightcolumn { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F4F0D8;  /*#E6E2AF;*/
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 780px;
 width: 270px;
 display: inline;
}
/*style the contact and e-mail dialog box*/
#contact_dialog {
 float: right;
 position: relative;
 background: #F4F0D8;  /*#EFECCA;*/
 margin: 20px 30px 5px 5px;
 padding: 0px;
 height: 100px;
 width: 220px;
}
#contact_dialog a, #contact_dialog a:visited {
 text-decoration: none;
 color: #000;
}
#contact_dialog a:hover { color: #999; }
#msg { 
 margin: 0px 0px 0px 25px;
 border: 1px solid #ccc; 
 width: 135px;
}

/* Syle the sample galllery container in the right column */
#sm_gallery {
 float: right;
 /*border: 1px solid #999;*/
 background: #F4F0D8;  /*#EFECCA;*/
 margin: 20px 5px 5px 5px;
 padding: 0px;
 height: 210px;
 width: 260px;
}
/* float the list */
#sm_gallery ul {
 float: left;
 padding:0; 
 margin: 15px 5px 5px 13px;
 list-style-type: none;
 border:0;
}
/* style the anchor and visited achor tags */
#sm_gallery ul a, #sm_gallery ul a:visited {
 float:left;
 width:110px;
 height:85px;
 background: #F4F0D8;  /*#E6E2AF;*/
 border:1px solid #aaa;
 margin:1px;
}
/* set the default size of the image tag */
#sm_gallery ul a img {
 width:100px; height:75px;
 border:0; margin:5px;
}
#sm_gallery ul a:hover {
 position:relative;
}
/* when hovering over the linked image duble the image size, style the container and position it above the original thumbnail*/
#sm_gallery ul a:hover img {
 width:200px; height:150px;
 position:absolute;
 left:-50px; top:-38px;
 border:0;
 border:1px solid #888;
 padding:5px;
 background: #BA9B65; /*#A7A37E; */
 z-index: 99;
}
/* Style the promotion box*/
#promo_box {
 display: block;
 float: right;
 /*border: 1px solid #999;*/
 background: #F4F0D8; /*#EFECCA; */
 margin: 40px 5px 5px 5px;
 padding: 0px;
 height: 320px;
 width: 250px;
}
/* add image via CSS for accessibility */
#promo_box a h2 {
 width: 200px;
 height: 200px;
 background: url(../images/alpina.jpg) no-repeat;
 text-indent: -9000px;
 margin: 5px;
 border: 0px;
 cursor: pointer;
}
#promo_box .imgs {
 float: left;
 width: 210px;
 height: 210px;
 background: #F4F0D8; /*#E6E2AF;*/
 border: 1px solid #aaa;
 margin: 10px 10px 5px 20px;
}
#promo_box .t {
 margin: 5px;
 text-align: center;
}
#promo_box .t a {
 text-decoration: none;
 color: #365FB7;
}
/* Style the footer of the layout */
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BA9B65;  /*#A7A37E;*/
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
.yui-toolbar-container  {
  display: none;
}
.yui-editor-skipheader {
  display: none;
}
.yui-editor-editable {
  border: 1px solid #ccc;
  margin: 5px;
}
.captcha {
  position: relative;
  margin: 0px;
  top: 55px;
  width: 200px;
}