/* Start of CMSMS style sheet 'Aloe: Layout' */
/*---[ undohtml ]-------------------------- */

:link,:visited { text-decoration:none }
/*ul,ol { list-style:none }*/
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
fieldset{
padding:.5em;
}


/*-- Set initial font styles --*/
body {
text-align: left;
font-family: tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 75.01%;
color: #333342;
line-height: 1em;
}

div {
font-size:1em;
}


img {
border: 0;
}

a,
a:link 
a:active {
text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
background-color: inherit; 
color: #ff6600; 
}

div#main a,
div#main a:link 
div#main a:active {
font-weight:bold;
}

a:visited {
text-decoration: underline;
background-color: inherit;
color: #ff6600;
}

a:hover {
text-decoration:underline;
color: #3366ff;
}

/*-- basic layout --*/
body {
margin:0;
padding:0;
background: #ffcc33 url(../images/bg.gif);
color: #333342;
}

div#pagewrapper {
margin: 0 auto;
Width:780px;
background-color: #fff;
border:10px solid #fff;
}


/*** header ****/
div#header {
height:125px; /* adjust according your image size */
/*background: #385C72; */
background:url(images/layout/hdr-bg.jpg) no-repeat;          
}

div#header h4 a {
 
display: block; 
/*height:125px;*/
/*text-indent: -999em;*/
text-decoration:none;
color: #3366ff; 
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 40px;
font-weight:normal;
padding:40px 0 0 100px;
}

div#header h5 { 
color:#70b03d; 
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
padding: 10px 0 10px 100px;
margin: 0;
}

div#header-pic	{
border-bottom:15px solid #CCD9FF;
border-top:5px solid #CCD9FF;
margin:0 0 10px;
}

#nav-main	{
list-style: none;
padding: 0px 0px 0 0;
/*margin: 5px auto;*/
font-family: Arial, Verdana, Helvetica, sans-serif;
/*padding-left:8px;*/
width: 780px;
}

div#search {
/*float: right;*/
/*width:100px;*/
/*text-align: right;*/
/*padding: 0.6em 0 0.2em 0;*/
/*margin: 0 1em;*/
}
div#search input	{
margin:0 5px 0 0;
}

div.breadcrumbs {
padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
border-bottom: 1px dotted #000;
}

div.breadcrumbs span.lastitem { 
font-weight:bold; 
}


div#content {
margin:20px 0;
}

div#main {
float:right;
width:560px;
}


div#sidebar {
float: left;
width:200px;
display: inline;  /* FIX ie doublemargin bug */
margin-left: 0;
}

div#sidebar inside	{
padding:0 10px;
}


div#footer {
clear:both;
margin:0 auto; 
width: 780px; 
background: #fff;
height: 30px;
padding: 0px;
clear: both;
border-top: 2px solid #70b03d;
font-size:90%
}

div#footer p {
font-size:90%;
padding: 1.5em;
text-align: center;margin:0;
color: #444;
}

div#footer p a {
color: #444;
}

#footer .padding { padding-top: 10px; text-align: center; color: #444; }
#footer a { color: #444;font-weight:normal; }
#footer a:hover { color: #444; text-decoration:underline;background:none; } 

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
height: 1px;
margin: 1em;
border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
float: left;
width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
float: right;
width: 49%;
text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
font-family: Arial, Helvetica, sans-serif;
color:#3366ff;
font-size:200%;
font-weight:normal;
text-decoration: none;
line-height:normal;
margin:0 0 0.5em 0;
}

div#content h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #3366ff;
font-size: 180%; font-weight: normal;
padding:10px 0;
}

div#content h3 {
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #70b03d;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 0 0.5em 0;
}

div#content h4 {
font-family: Arial, Verdana, Helvetica, sans-serif;
color:#70b03d;  
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}

div#content h5 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1.1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}

div#content h6 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
font-size:1.1em;
margin: 0 0 1.5em 0;  /* some air around p elements */
line-height:1.4em;
padding: 0;
}
blockquote {
border-left: 10px solid #ddd;
margin-left: 10px;
}
pre {
font-family: monospace;
font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
font-weight: bold;
}
em, i {
/* explicit setting for these */
font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}

pre {
border: 1px solid #000;  /* black border for pre blocks */
background-color: #ddd;
margin: 0 1em 1em 1em;
padding: 0.5em;
line-height: 1.5em;
font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
font-size: 1.1em;
line-height:1.4em;
margin: 0 0 1.5em 0;
list-style-type: square;
}

div#main ul li,
div#main ol li {
margin: 0 0 0.25em 3em;
}

div#dl dt {
font-weight: bold;
margin: 0 0 0.25em 3em;
}
div#dl dd {
margin: 0 0 0 3em;
}
/* END LISTS */



/*-- images --*/
.img-left-border	{
float:left;
padding:4px;
border:1px solid #ccc;
margin:0 10px 0 0;
}

.img-right-border	{
float:right;
padding:4px;
border:1px solid #ccc;
margin:0 0 0 10px;
}


/*---[ easy drop shadow ]------------------------------*/

.img-wrapper {
float:left;
margin:10px 10px 10px 0px;
background: url(images/layout/shadow.gif) no-repeat bottom right;
}

* html body	.img-wrapper /* for IE Win */{
margin:10px 10px 10px 0px
}

.img-wrapper img	{
float:none;
margin:0;
background-color:#fff;
padding:4px;
border:1px solid #B3B6A3;
position:relative;
left:-5px;
top:-5px;
}

* html body .img-wrapper img	{
float:none;
margin:0;
background-color:#fff;
padding:4px;
border:1px solid #B3B6A3;
position:relative;
left:-5px;
top:-5px;
}

.img-wrapper-right {
float:right;
margin:10px 0px 10px 10px;
background: url(images/layout/shadow.gif) no-repeat bottom right;
}

* html body	.img-wrapper-right /* for IE Win */{
margin:10px 0px 10px 10px
}

.img-wrapper-right img	{
float:none;
margin:0;
background-color:#fff;
padding:4px;
border:1px solid #B3B6A3;
position:relative;
left:-5px;
top:-5px;
}


/* -- product list item --*/

.ProductDirectoryItem	{
margin:0 0 20px 0;
border-bottom:1px dashed #ccc;
}

.ProductDirectoryItem h3	{
margin:0;
}

.ProductDirectoryItem p.description	{
margin:0;
}

.ProductDirectoryItem p.price	{
font-weight:bold;
color:#9C0200;
}
/* End of 'Aloe: Layout' */