/*
Ely Web Solution styles
Karl Bedingfield
karl@elywebsolutions.com
Sept 28 2003
*/

/* BODY STYLES */

html body {
  margin:0;
  padding:0;
  background:#eee;
  font:x-small Verdana,Sans-serif;
  voice-family: "\"}\""; 
  voice-family:inherit;
  font-size:small;
} html>body {font-size:small;}

/* HEADER STYLES */

#header {
   background: #036 url(../images/nav_bg.gif);
}
  
html #header h1 {
  background: url(../images/ewsol_logo.gif) no-repeat 2px 3px;
  height:75px;
  margin:0;
  padding:0;
}

/* LOGO LINK */
#logo {
  position:absolute;
  left:0;
  width:289px;
  height:75px;
  margin-left:0px;
  border:0px;
  border-width:0 0 0 0px;
}

#logo img {
  visibility:hidden;
}

/* WINDOW DRESSING */
#headerOverlap {
  position:absolute;
  top:0px;
  left:65%;
  width:520px;
  height:75px;
  background-image:url(http://www.elywebsolutions.com/images/bleed.gif);
  background-position:center left;
  background-repeat:no-repeat;
}

/* NAVIGATION RULES */
/* Navigation lifted from http://www.stopdesign.com */

#navigation {
  float:left;
  width:100%;
  background:#036;
  border-bottom:1px solid #369;
}

#navigation ul {
  margin:0;
  padding: 1px 0 0 0;
  font-size:85%;
  white-space:nowrap;
}

#navigation ul li {
  float:left;
  margin:0;
  padding:0;
  list-style:none;
  background-image:none;
  line-height:normal;
}

#navigation ul a, #navigation ul strong {
  background:none;
  display:block;
  float:left;
  height:auto;
  border:1px solid #369;
  border-width:0 1px 0 0;
  margin:0;
  padding:4px 8px;
  text-decoration:none;
  font-weight:normal;
  color:#69c;
  white-space:nowrap;
}

#navigation ul a strong {
  padding:0;
  border:none;
  background:none;
}
/* Commented Backslash Hack hides 
   rule from IE5-Mac, documented at 
   http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html \*/
#navigation ul a, #navigation ul strong {float:none;}
   /* End hack */
	
#navigation ul span {
  font-weight:bold;
  color:#9cf;
}

#navigation ul a:hover {
  background:#4a4d84;
}

#navigation #c strong, #navigation #c a, #navigation #c a strong {
  background:#369;
  }
#navigation ul a:hover, #navigation ul a:hover strong, #navigation ul a:hover span, #navigation #c strong, #navigation #c strong span {
  color:#fff;
}

#navigation ul #h {
  border-left-width:1px;
}

/* MAIN CONTENT STYLES */
  
#mainWrapper {
  position:relative;
  clear:both;
  line-height:1.5em;
}
  
#mainContent {
  width:65%;
  margin:0;
  background:#fff;
  font-size:100%;
  color:#000;
}
  
#mainContent .col {
  margin-left:0px;
  padding:0px 50px 30px 15px;
}
  
#mainContent h2 {
  font:bold 125% Arial;
  color: #369;
  margin:1.5em 0 .5em 0;
  padding-bottom:5px;
  border-bottom:1px solid #eee;
}

/* #mainContent p {
 margin-top: 0px;
} */

#mainContent h3 {
  color: #000;
  text-transform: none;
  white-space: nowrap;
  font:bold 100% Verdana,Sans-serif;
  /* margin-bottom: 5px; */
}

/* H4 Header For Main Content */
#mainContent h4 {
  font:bold 125% Arial;
  color: #369;
  margin:1.5em 0 .5em 0;
  padding-bottom:5px;
  border-bottom:1px solid #eee;
}

/* Remove if no indent needed */
#mainContent ul {
	list-style: none;
	margin: 1em 0 1em 0;
	padding-left: 24px;
}

#mainContent ul.links li {
  background: url(http://www.elywebsolutions.com/images/bullet_grey.gif) no-repeat 0 .4em;
}

#mainContent .imgleft {
  border:1px solid #ccc;
  padding:4px;
}

#mainContent .imgright {
  border:1px solid #ccc;
  padding:4px; 
}

.entry blockquote {
  margin:1em 0;
  padding:0 1em .75em;
  border:1px solid #eee;
  border-width:1px 0;
  font-size:80%;
  line-height:1.5em;
}
  
.entry blockquote p {
  margin:.75em 0 0;
}

/* MAIN CONTENT COLORS */

/* Controls RIGHT COLUMN background colour */
body.mainColor {
	background: #000000;
}

/* Controls column color and text */
.mainColor #rightBox .col {
	border-right-color: #333;
	color: #ccc;
}

.mainColor #rightBox a:link {
	color: White;
	border-color: #ccc;
}

.mainColor #rightBox a:visited {
	color: White;
	border-color: #ccc;
}

/* Right Menu Hover Button */
.mainColor #rightBox a:hover {
	color: #ccc;
	border-color: #ccc;
	background: #000;
}

/* H2 For Right Content */
.mainColor #rightBox h2 strong {
	color: Yellow;
}

/* H4 For Main Content */
.mainColor h4 {
	color: #000000;
}

.mainColor #rightBox strong.arrow {
	color: #f90;
}

.mainColor #rightBox p strong {
	color: #fff;
}

.mainColor #rightBox dd strong {
	color: #fff;
}

/* IMAGE STYLES FOR MAIN CONTENT */

.imgLeft {
  position:relative;
  float:left;
  margin:3px 12px 5px 0;
}

.imgleft {
  position:relative;
  float:left;
  margin:3px 12px 5px 0;
}
  
.imgRight {
  position:relative;
  float:right;
  margin:3px 0 5px 12px;
}

.imgright {
  position:relative;
  float:right;
  margin:3px 0 5px 12px;
}

/*RIGHT COLUMN STYLES */ 

#rightBox {
  position:absolute;
  width:35%;
  right:15px; margin-right:-15px; /* IE5/Mac Horiz Scrollbar Hack */
  left:auto;
  /* Top adjusts height of copy*/
  top:0;
  /* border-bottom:1px dotted #999; /* bottom dotted line */
  font-size:85%;
  line-height:1.5em;
}
  
#rightBox .col {
  color: #666;
  margin: 10px 0 0 0;
  padding: 0 15px 10px 15px;
}

#rightBox h2 {
  margin: 15px -15px 8px -15px;
  padding:0 15px;
  border-top-width:0;
  font-weight:normal;
  font-size:135%;
}
  
#rightBox h2.first {
  border-top:1px dotted #999;
  margin-top:0;
  padding-top:10px;
}

#rightBox span.first {
	color: #fff;
	font-size: 100%;
	font-weight: bold;
}

#rightBox span.active {
	color: #FFFFE0;
	font-size: 100%;
	font-weight: bold;
}

/* SITEWIDE HYPERLINKS */

a:link {
  border-bottom:1px dotted #69f;
  color: #0000CD;
  text-decoration:none;
}

a:visited {
  border-bottom:1px dotted #69f;
  color: #0000CD;
  text-decoration:none;
}
  
a:visited {
  border-bottom-color:#0000CD;
  color:#0000CD;
}
  
a:hover {
  border-bottom:1px solid #f00;
  color:#f00;
}

/* PAGE ENTRY TEASER IMAGES */

.teaserImage {
  background: url(http://www.elywebsolutions.com/images/splash.gif) repeat-x;
  margin:0 -50px 0 -15px;
  padding:20px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px dotted #ccc;
}

.teaserImageHome {
  background: url(http://www.elywebsolutions.com/images/index_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageAbout {
  background: url(http://www.elywebsolutions.com/images/about_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageWebsite {
  background: url(http://www.elywebsolutions.com/images/a_webd_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageHosting {
  background: url(http://www.elywebsolutions.com/images/a_hosting_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageSupport {
  background: url(http://www.elywebsolutions.com/images/support_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageContact {
  background: url(http://www.elywebsolutions.com/images/contact_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageJobs {
  background: url(http://www.elywebsolutions.com/images/jobs_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}

.teaserImageTerms {
  background: url(http://www.elywebsolutions.com/images/terms_splash.jpg) repeat-x;
  margin:0 -50px 0 -15px;
  padding:68px 50px 10px 15px;
  font-size:85%;
  line-height:1.5em;
  border-bottom:3px solid #ccc;
}
  
/* RIGHT COLUMN LISTS */

dl {
	margin:0 0 1.5em;
}

#rightBox dl {
	margin-bottom:.5em;
}

dt {
	font-weight:bold; 
	margin:0 0 .1em 0;
}

dd {
	margin:0 0 .75em 0; 
	font-size:85%; 
	line-height:1.5em;
}

#rightBox dd {
	font-size:100%;
}

ul {
  margin:.5em 0 1em;
  padding:0;
  list-style-type:none;
  }
  
ul li {
  margin:0;
  padding:0 0 2px 18px;
  line-height:1.5em;
}

#rightBox ul.links li {
  background: url(http://www.elywebsolutions.com/images/icon_offsite.gif) no-repeat 0 .4em;
}

#rightBox ul.sMenu li {
  background: url(http://www.elywebsolutions.com/images/square_web.gif) no-repeat 0 .4em;
}

/* FOOTER STYLES */

#footer {
  background: #F0FFFF;
  color: #4682B4;
  font-size:85%;
  text-align: center;
  padding-top:5px;
  padding-bottom: 5px;
  border-top:1px solid #939;
  width:65%;  
}

#footer a:link {
	color:#000;
	border-width: 0px;
}

#footer a:visited {
	color:#000;
	border-width: 0px;
}

#footer a:hover {
  color:#ccc;
  border-width: 0px;
}

/* FRONT PAGE PHOTOGRID 1 */
#photoGrid {
 margin-top: 12px;
 margin-bottom: 10px;
}

#photoGrid img {
 border: 1px solid #ccc;
 padding: 5px;
}

/* FRONT PAGE PHOTOGRID2 */
#photoGrid2 {
 margin-top: 12px;
 margin-bottom: 10px;
}

#photoGrid2 img {
 border: 1px solid #ccc;
 padding: 5px;
}

/* FORM RULES */

form {
  margin:0; 
  line-height:1.3em;
  }
  
form div {
  padding:3px 0 2px;
}

input.text {
  font:100% Verdana,Sans-serif;
}

input.button {
  background:#c00;
  color:#fff;
  font:bold 100% Verdana,Sans-serif;
  border:2px solid #f00;
  border-color:#f00 #900 #900 #f00;
}

#formCSS div {
  padding-top:5px;
}

#formCSS label {
  display:block;
  padding-bottom:1px;
}
  
#formCSS input.text {
  width:200px;
}

#formCSS input#subject {
  voice-family: "\"}\"";
  voice-family:inherit;
  width:95%;
} html>body #formCSS input#subject {width:95%;}
 
#formCSS input.text {
  background:#eee;
  border:1px solid #999;
}
  
#formCSS textarea {
  background:#eee;
  border:1px solid #999;
}

#formCSS select.text, option.text {
  background:#eee;
  border:1px solid #999;
}

#formCSS textarea {
  voice-family: "\"}\"";
  voice-family:inherit;
  width:95%;
  height:10em;
} html>body #formCSS textarea {width:95%;}

/* MISCELLANEOUS RULES */

strike {
	text-decoration: line-through;
	}

.ahem {
	display: none; 
	color: #000; 
	background-color: #fff
}

hr {
	display:none;
}

.none {
	display:none;
}

/* Cleaner to create scroll for IE */
.cleaner {
	height: 0px;
}

a.noline:link {
	border-style: none;
}
	
a.noline:visited {
	border-style: none;
}

.dashline {
	border-top: 1px dashed #cccccc;
} 

p.dashline {
   border-top: 1px dashed #ccc;
} 

#pgtop {
 	width : 1px;
 	position : absolute;
 	top : 0px;
 	left : 0px;
 	height : 1px;
} 

.hide {
   display: none;
}

.price {
   background-color: #fff;
	color: #FF6347;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%; 
}

.quote {
	color:#f90; 
	white-space:nowrap; 
	text-transform: none;
}

/* SWAP CLASSES FOR H1 */
h1.swap {
  background-repeat:no-repeat;
}
  
h1.swap span {
  display:none;
}

h1.swap img {
  display:block;
}

/* THUMBNAILS */

#thumbs1 a {
  float:left;
  display:block;
  margin: 4px 10px 0 0;
  padding: 3px;
  border:1px solid #333;
  text-decoration: none;
  width:56px;
  height:56px;
  voice-family: "\"}\""; voice-family:inherit;
  width:48px;
  height:48px;
} 
  

/* \ Hack to get IE5-Mac to ignore the following rule */
#thumbs1 a:hover {
  border-width:2px; 
  padding:2px;
}

#thumbs1 img {border:0; display:block;}

#thumbs2 a {
  float:left;
  display:block;
  margin: 4px 10px 0 0;
  padding: 3px;
  border:1px solid #333;
  text-decoration: none;
  width:56px;
  height:56px;
  voice-family: "\"}\""; voice-family:inherit;
  width:48px;
  height:48px;
} 
  

/* \ Hack to get IE5-Mac to ignore the following rule */
#thumbs2 a:hover {
  border-width:2px; 
  padding:2px;
}

#thumbs2 img {border:0; display:block;}

#thumbs3 a {
  float:left;
  display:block;
  margin: 4px 10px 0 0;
  padding: 3px;
  border:1px solid #333;
  text-decoration: none;
  width:56px;
  height:56px;
  voice-family: "\"}\""; voice-family:inherit;
  width:48px;
  height:48px;
} 
  

/* \ Hack to get IE5-Mac to ignore the following rule */
#thumbs3 a:hover {
  border-width:2px; 
  padding:2px;
}

#thumbs3 img {border:0; display:block;}