/* 
MOONRAY MARKETING - SCREEN Stylesheet
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
*/

@import url(blog.css);
@import url(search.css);

/*
----------------------------------------------------------------------------- 
Globals
----------------------------------------------------------------------------- */

html { }
body { margin: 0px; padding: 0px;  background: #FFF url(../img/topbar-bg.gif) 0 0 repeat-x; color: #000; font: 12px Arial, sans-serif; }

/*
----------------------------------------------------------------------------- 
Headings
----------------------------------------------------------------------------- */
p, h1, h2, h3, h4, h5, h6, li, td, dt, dd { font-size: 12px; font-weight: normal; }
p { padding-top: 1.5ex; }

/*
----------------------------------------------------------------------------- 
Links
----------------------------------------------------------------------------- */
a, a:visited  { font-weight: bold; color: #ad544c; text-decoration: none; }
a:hover { color: #5c2e2a; }
a:focus { outline: none; }
input { outline: none; }

/*
----------------------------------------------------------------------------- 
Misc
----------------------------------------------------------------------------- */
hr { display: none; }
img { border: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.clear { clear: both; }

/*
----------------------------------------------------------------------------- 
Global Structure
----------------------------------------------------------------------------- */
#page-wrap { width: 900px; margin: 35px auto; }
#header { margin: 0; width: 900px; height: 312px; background: transparent url(../img/header.gif) 0 0 no-repeat; }
#header-content { padding: 4px 0 0 5px; }

body#secondary #header { margin: 0; width: 900px; height: 120px; background: transparent url(../img/inner-header.gif) 0 0 no-repeat; }
body#secondary #header-content h1 { margin: 0; padding: 40px 0 0 30px; color: #FFF; font: bold 24px Arial, sans-serif; }

body#login #header { margin: 0; width: 900px; height: 120px; background: transparent url(../img/inner-header.gif) 0 0 no-repeat; }
body#login #header-content h1 { margin: 0; padding: 40px 0 0 30px; color: #FFF; font: bold 24px Arial, sans-serif; }

#logo { float: left; width: 200px; margin: 0 0 10px 10px; }
#logo a { width: 200px; height: 76px; background: transparent url(../img/logo.gif) 0 0 no-repeat; display: block; text-indent: -9999px; }

#nav { float: right; width: 461px; margin: 8px -6px 0 0; }
#nav ul { }
#nav ul li { float: left; display: block; margin: 0 20px 0 20px; }
#nav ul li a { font: bold 18px Arial, sans-serif; color: #6d6f71; }
#nav ul li a:hover { color: #333; }


#subnav { float: right; width: 450px; margin: 10px 8px 0 0; padding: 0 0 8px 0; display: block; border-bottom: 1px #CCC solid; }
#subnav ul { float: right; margin: 0 2px 0 0; }
#subnav ul li { float: left; display: block; margin: 0 5px 0 15px; }
#subnav ul li a { font: normal 12px Arial, sans-serif; color: #6d6f71; }
#subnav ul li a:hover { color: #333; }



/*
----------------------------------------------------------------------------- 
Homepage Structure
----------------------------------------------------------------------------- */

body#home #leftcol { width: 620px; float: left; margin:0; }

body#home #rightcol { width: 275px; float: left; margin: 5px 0 0 0; }
body#home #rightcol .col { }


body#home #welcome { margin: 5px 0 15px 20px; padding:0; }
body#home #welcome p { margin:0; padding: 0 10px 0 0; color: #666; font: normal 16px/22px Arial, sans-serif; }


body#home #customer-quotes { float: left; margin: 0 10px 10px 0; width: 275px; height: 164px; background: transparent url(../img/customer-quotes-bg.gif) 0 0 no-repeat; }
body#home #customer-quotes p { margin:0; padding: 10px 15px 0 20px; color: #6d6f71; font: normal 12px Arial, sans-serif; }
body#home #customer-quotes em { display: block; padding: 10px 0 0 20px; color: #6d6f71; font: bold 12px Arial, sans-serif; }

body#home #news { width: 320px; float: left; margin: 0 10px 0 0; }
body#home #news h1 { margin:0; padding: 0 0 3px 2px; color: #6d6f71; font: normal 12px Arial, sans-serif; letter-spacing: 2px; border-bottom: 1px #CCC solid; }
body#home #news p { margin: 0; padding: 5px 0 5px 5px; border-bottom: 1px #CCC solid; }
body#home #news p em { display: block; font: normal 12px Arial, sans-serif; color: #6d6f71; }
body#home #news a { font: bold 12px Arial, sans-serif; color: #ae544c; }
body#home #news a:hover { color: #5c2e2a; }
body#home #news p.archive-rss { border:0; margin: 10px 0 0 10px; padding:0; }
body#home #news p.archive-rss a.rss-feed { margin: 0 5px 0 0; }
body#home #news p.archive-rss a.rss-feed img { vertical-align: middle; }

body#home #in-action h1 { margin: 0; padding:0; font: bold 18px Arial, sans-serif; color: #ad544c; }
body#home #in-action img { background: #666; border: 10px #EEE solid; padding: 1px; }
body#home #in-action p { margin: 5px 10px 0 10px; padding:0; color: #6d6f71; font: normal 12px Arial, sans-serif; }
body#home #in-action ul { margin: 0 0 0 5px; }
body#home #in-action ul li { float: left; display: block; margin: 7px 3px 0 3px; color: #a7a9aa; }
body#home #in-action ul li a { font: bold 12px Arial, sans-serif; }

/*
----------------------------------------------------------------------------- 
Secondary Page Structure
----------------------------------------------------------------------------- */

body#secondary #leftcol { width: 185px; float: left; margin: 10px 10px 0 10px; }
body#secondary #leftcol .col { }

body#secondary #leftcol .pagenav ul { margin: 0 0 20px 0; }
body#secondary #leftcol .pagenav ul h1 { font: bold 24px Arial, sans-serif; color: #6d6f71; margin:0; padding:0; }
body#secondary #leftcol .pagenav ul li { border-bottom: 1px #CCC solid; }
body#secondary #leftcol .pagenav ul li a { font: normal 16px Arial, sans-serif; margin: 2px 0 2px 0; padding: 10px 5px 10px 5px; display: block; }
body#secondary #leftcol .pagenav ul li a:hover { background: #fbfafa; color: #5c2e2a; }
body#secondary #leftcol .pagenav ul li ul li { border: 0; margin: 0 0 0 15px; }
body#secondary #leftcol .pagenav ul li ul li a { color: #4D74C0; font: normal 14px Arial, sans-serif; display: block; border-top: 1px #CCC solid; }
body#secondary #leftcol .pagenav ul li ul li a:hover { background: #fbfafa; color: #5c2e2a; }

body#secondary #leftcol #live-demo { }
body#secondary #leftcol #live-demo a { background: #ad544c; display: block; }
body#secondary #leftcol #live-demo a:hover { background: #CCC; }
body#secondary #leftcol #live-demo a img { border: 1px #6d6f71 solid; margin: 8px 8px 0 8px; }
body#secondary #leftcol #live-demo a:hover img { border: 1px #333 solid; filter:alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; }
body#secondary #leftcol #live-demo a em { color: #FFF; font: bold 14px Arial, sans-serif; padding: 8px 0 8px 10px; display: block; }
body#secondary #leftcol #live-demo a:hover em { color: #333; }

body#secondary #leftcol #customer-quotes { float: left; width: 165px; margin: 20px 0 0 0; padding: 10px; border-top: 10px #eaedf3 solid; border-bottom: 10px #eaedf3 solid; }
body#secondary #leftcol #customer-quotes p { margin:0; padding: 0; color: #6d6f71; font: normal 12px Arial, sans-serif; }
body#secondary #leftcol #customer-quotes em { display: block; padding: 10px 0 0 0; color: #6d6f71; font: bold 12px Arial, sans-serif; }


body#secondary #rightcol { width: 675px; float: left; margin: 10px 10px 0 10px; }
body#secondary #rightcol .col { }

body#secondary #rightcol h1 { font: bold 24px Arial, sans-serif; margin: 0 0 10px 0; padding:0; color: #4d749e; }
body#secondary #rightcol h2 { font: bold 18px Arial, sans-serif; margin: 0; padding:0; color: #4d749e; }
body#secondary #rightcol p { padding: 0 40px 0 0; margin: 0 0 15px 0; font: normal 13px/18px Arial, sans-serif; color: #434445; }

body#secondary #rightcol p img.imgleft { float: left; margin: 4px 15px 4px 0; }
body#secondary #rightcol p .imgright { float: right; margin: 4px 0 4px 15px; }
body#secondary #rightcol p img.imgleft, body#secondary #rightcol p img.imgright { padding: 2px; border: 1px solid #444; }

body#secondary #rightcol ul { margin: 0 0 35px 30px; }
body#secondary #rightcol ul li { margin: 0 0 15px 0; list-style-image: url(../img/icon-arrowbullet.gif); color: #434445; }
body#secondary #rightcol ol { margin: 0 0 15px 30px; list-style-type: decimal; }
body#secondary #rightcol ol li { margin: 0 0 5px 0; color: #434445; }

body#secondary #rightcol .col #ask-yourself { padding: 10px; margin: 20px 50px 20px 20px; background: #F9F8E7; }

body#login #rightcol { width: 675px; float: left; margin: 10px 10px 0 10px;  }
body#login #rightcol .col { }



body#login #login-form { width: 400px; margin: 0 auto; }
body#login #login-form form { margin: 0 0 0 145px; padding: 0; }
body#login #login-form form ul li { list-style: none !important; margin: 0; padding: 0; }
body#login #login-form form ul li label { display: block; font: bold 15px Arial, sans-serif; color: #555; margin: 5px 0 0 0; }
body#login #login-form form ul li input.fields { width: 100%; background: #EEE; padding: 5px; margin: 0 0 5px 0; color: #555; font: bold 13px Arial, sans-serif; border: 1px #DDD solid; border-bottom: 2px #DDD solid; }
body#login #login-form form ul li #perm { margin: 0 0 0 5px; }
body#login #login-form form ul li #loginbutton { cursor: pointer; background: #EEE; padding: 3px; float: right; margin: 5px -10px 0 0; color: #555; border-top: 1px #999 solid; border-left: 1px #999 solid; border-bottom: 1px #666 solid; border-right: 1px #666 solid; }

#demo-form form { width: 600px; }
#demo-form form ul li { list-style: none !important; }
#demo-form form ul li label { display: block; font: bold 15px Arial, sans-serif; color: #555; }
#demo-form form ul li input.fields { background: #EEE; padding: 5px; color: #555; font: bold 13px Arial, sans-serif; border: 1px #DDD solid; border-bottom: 2px #DDD solid; }
#demo-form form ul li #loginbutton { cursor: pointer; background: #EEE; padding: 3px; color: #555; border-top: 1px #999 solid; border-left: 1px #999 solid; border-bottom: 1px #555 solid; border-right: 1px #555 solid; }


body#login #footer { display: none; }

/*
----------------------------------------------------------------------------- 
How it Works Structure
----------------------------------------------------------------------------- */

#hw-leftcol { width: 300px; float: left; margin: 0 30px 0 20px; }
#hw-rightcol { width: 300px; float: left; }
#hw-leftcol p, #hw-rightcol p { width: 300px; text-align: center; font: bold 15px Arial, sans-serif !important; }

/*
----------------------------------------------------------------------------- 
Footer Structure
----------------------------------------------------------------------------- */

#footer { height: 200px; background: transparent url(../img/footer-bg.gif) 0 0 repeat-x; }
#footer #elements { width: 900px; margin: 0 auto; padding: 1px 0 0 0; }

#footer #elements #footer-nav { border-bottom: 1px #FFF solid; margin: 15px 0 0 0; padding: 0 0 5px 0; }
#footer #elements #footer-nav ul { }
#footer #elements #footer-nav ul li { float: left; display: block; margin: 0 10px 0 0; }
#footer #elements #footer-nav ul li a { color: #FFF; font: bold 14px Arial, sans-serif; }
#footer #elements #footer-nav ul li a:hover { color: #999; }

#footer #elements #left { width: 400px; float: left; }

#footer #elements #left #contact-info { margin: 15px 0 0 0; }
#footer #elements #left #contact-info ul#address { width: 200px; float: left; }
#footer #elements #left #contact-info ul#address li { color: #CCC; }

#footer #elements #left #contact-info ul#phone { width: 200px; float: left; }
#footer #elements #left #contact-info ul#phone li { color: #CCC; }
#footer #elements #left #contact-info ul#phone li em { color: #FFF; font: bold 12px Arial, sans-serif; }
#footer #elements #left #contact-info ul#phone li a { color: #fa7064; }
#footer #elements #left #contact-info ul#phone li a:hover { color: #5c2e2a; }

#footer #elements #left p#copyright { margin: 20px 0 0 0; padding:0; color: #CCC; }
#footer #elements #left p#copyright a { color: #CCC; font: normal 12px Arial, sans-serif; }
#footer #elements #left p#copyright a:hover { color: #FFF; }

#footer #elements #right { width: 500px; float: right; }

#footer #elements #right #newsletter { margin: 10px 0 0 0; }
#footer #elements #right #newsletter h1 { color: #FFF; font: bold 18px Arial, sans-serif; margin: 0; padding:0; }
#footer #elements #right #newsletter p {color: #CCC; font: normal 12px Arial, sans-serif; margin:0; padding:0; }
#footer #elements #right #newsletter form { margin: 0 0 0 10px; padding:0; }
#footer #elements #right #newsletter form ul li label { color: #CCC; display: block; }
#footer #elements #right #newsletter form ul#name { width: 125px; float: left; margin: 0 10px 0 0; }
#footer #elements #right #newsletter form ul#email { width: 125px; float: left; }
#footer #elements #right #newsletter form .input { width: 125px; margin: 5px 0 0 0; }
#footer #elements #right #newsletter form .submit { margin: 5px 0 0 0; }