body  {
    font: 15px Verdana, Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
h1, h2, h3, h4 {
    font-variant:small-caps;
    font-weight:normal;}
hr {margin:30px 10px;border:1px solid #789dc2;}
input, textarea{margin-bottom: 10px}
#container { 
    width: 970px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #fff;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
} 
#header { 
    width: 100%;
    background: #fff; 
} 
#header-img {max-width: 100%!important}
#header-img img{max-width: 100%!important;heigh:auto;border:none;padding:0;box-shadow: none;}
#header hgroup{margin: 0 2%}
#site-title {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    font-size: 2.2em;
}
#site-description{
    margin: -5px 0 20px 0;
    font-variant: normal;
    font-size: 1.1em;
}
#main{
    clear: both;
    padding-top: 10px;
    width: 100%;
}
#sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 17.693%;
    background-color: #fff;
    background-image: url(images/sm-bg.jpg);
    background-repeat: no-repeat;
    background-position: 0 top;
    padding: 1.144%;
    position: relative;
}
#sidebar1 p {
    font-size: 14px;
}

#sidebar1 h4 {
    font-size: 1.3em;
    border-bottom: 1px solid #333;
}
#sidebar1 ul {
    font-size: 12px;
}
#sidebar1 ul {
    text-align: left;
    margin: 7px 10px 8px 0px; padding: 0;
    text-decoration: none;		
    border-top: 1px dotted #851554;
}
#sidebar1 ul li {
    list-style: none;
    border-bottom: 1px dotted #851554;
    padding: 5px 0 5px 5px;
    margin: 0 2px;		
}
* html body #sidebar1 ul li {
    height: 1%;
}
#sidebar1 ul li a {
    text-decoration: none;	
    background-image: none;	
    color: #9b4977; 		
}
#sidebar1 ul li a:hover {	
    color: #9b4977;	
    text-decoration: underline;
}
#sidebar1 ul ul { margin: 0 0 0 5px; padding: 0; }
#sidebar1 ul ul li { border: none; }

#mainContent {
    width: 75.115%;
    padding: 0 2%;
    float: right;
    background-color: #FFF;
    background-image: url(images/big-bg.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    border: #999 solid 1px; 
} 

#mainContent h1{font-size: 1.8em}
#mainContent h2{font-size: 1.6em}
#mainContent h3{font-size: 1.3em}

#footer {
    font-weight: bolder;
    color: #FFF;
    background-color: #630126;
    width: 100%;
    clear: both;
} 
#footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-size:11px;
}
#footer a {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    color:#999;
    font-size:10px;
}
.footer  {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* images */
#mainContent img, #sidebar1 img {
    background: #fafafa;
    border: 1px solid #dcdcdc;
    padding: 6px;
	height:auto;
	max-width: 100%;
}

#mainContent li {margin-bottom:10px;}


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

code {
    margin: 5px 0;
    padding: 10px;
    text-align: left;
    display: block;
    overflow: auto;  
    font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
    /* white-space: pre; */
    border: 1px solid #eee; 
    background: #fff;  
}
acronym {
    cursor: help;
    border-bottom: 1px dashed #777;
}
blockquote {
    margin: 10px;
    padding: 0 35px 0 55px;  
    border: 1px solid #eee; 
    background-color: #fff; 
    background-image: url(images/66.jpg), url(images/99.jpg);
    background-repeat: no-repeat;
    background-position: top left, bottom right;
    font: italic 18px/1.4em Georgia, Arial, 'Trebuchet MS', Tahoma, Sans-serif;
    color: #555;
}

fieldset#contact-form {
    margin:20px 0px 20px 10px;
    padding:10px;
    font-size:12px;
    color:#000;
    background:url(images/email.jpg) no-repeat top left/100% auto ;
}
fieldset#contact-form textarea{height:95px}
/** MEny CSS **/
ul#nav
{
    font-variant:small-caps;
    list-style-type:none;
    height:auto;
    display: inline-block;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    padding-left: 0;
    margin: 0;
    border-bottom:1px solid #aaa;
    border-top:1px solid #aaa;
    background:transparent url(images/nav-bg.png) repeat-x top left;
    width: 100%;
}

ul#nav li
{
    float: left;
}

ul#nav li a
{
    color:#000;
    text-decoration:none;
    font-weight:bold;
    padding:10px 20px 1px;
    line-height: 30px;
}

ul#nav li#active a
{	
    color:#FFFFFF;
    margin:0;
    border-bottom: 5px solid #789DC2;
}
ul#nav li a:hover
{
    color:#FFFFFF;
    border-bottom: 5px solid #789DC2;
    line-height: 30px;  
}

@media (max-width: 992px) {
    img {max-width:98%;}
    #header h1{font-size: 2.6em}  
    ul#nav li a{font-size: 1.1em; padding: 5px 20px 0px;}
    #container{ width: 94%; padding: 3%}		
    #mainContent{width: 94%; background: url(images/big-bg.jpg) no-repeat right top!important;  float:none; border: 1px solid #ccc; padding: 3%; margin-bottom: 1em}
    #site-description{font-size: 1em; margin-bottom: 1em}
    fieldset#contact-form{margin: 0}
    #sidebar1{width: 94%; background: url(images/big-bg.jpg) no-repeat right top!important; float: none;padding: 3%}
    #sidebar1 ul li a{font-size: 1.2em}
    #sidebar1 h1,#sidebar1 h2,#sidebar1 h3,#sidebar1 h4{margin: .5em 0}
    #blog-list td{font-size: 14px; padding: 3px}
	fieldset#contact-form {background-size:100% 120%;}
}

@media (max-width: 767px) {
    textarea{width: 90%}	
    blockquote{margin: 0; }
    #rss-img{width: auto;}
    hr {margin: 20px 10px;}   
    #container{ width: 92%;} 
    #mainContent blockquote{margin: 0}
    #mainContent img, #sidebar1 img{padding: 0; max-width: 99%; height: auto;}	
    fieldset#contact-form{width: 92%;background-size:100% 150%;}	
}
@media (max-width: 700px) {fieldset#contact-form{width: 92%;background-size:100% 120%;}}
@media (max-width: 480px) {blockquote {margin: 10px;padding: 0 27px;background-size: 28px auto;}#mainContent ul {padding-left: 20px;}#site-title {font-size: 2em;line-height:1.3em;}#mainContent h1 {font-size: 1.6em;line-height: 1em;} #mainContent img, #sidebar1 img{float:none!important;clear:both;}	}
@media (max-width: 320px) {#site-title {font-size: 1.5em;line-height: 1.1em;}#mainContent h1 {font-size: 1.4em;line-height:1em;}#mainContent h2 {font-size: 1.3em;}#mainContent h3 {font-size: 1.2em;}}