/*
THEME NAME: 8Creative
DESCRIPTION: Built upon Sandbox
VERSION: 0.1.3
AUTHOR: Mark Carpenter &amp; Steve Coates
AUTHOR URI: http://www.8creative.com.au
*/

/*
LAYOUT: Two-Column (Left)
DESCRIPTION: Two-column fluid layout with one sidebars left of content
*/
div#container {float: right;margin: 0 0 0 -270px;width: 100%;}
div#content {margin: 0 0 0 270px;}
div.sidebar {float: left;width: 220px;overflow: hidden;
}
div#secondary {
clear: left;
}
div#footer {
clear: both;
width: 100%;
padding-top: 20px;
}
body {
font: 13px/22px "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
margin: 0px;
padding: 0px;
line-height: 1.6em;
background: url(images/back.gif) repeat-x;
color:#333;
}
div h1 h2 h3 h4 p {
margin: 0px;
padding: 0px;
}

h1 {
font: normal 2.2em "Arial Rounded MT Bold", Arial, sans-serif;
color: #553759;
text-transform: lowercase;
}

h2, .phone, .widgettitle {
font: normal 1.8em "Arial Rounded MT Bold", Arial, sans-serif;
color: #410041;
text-transform: lowercase;
}

h3 {
font: normal 1.6em Arial, Helvetica, sans-serif;
color: #553759;
padding:3px 0 5px 0;
text-transform: lowercase;
border-bottom: 2px dotted #666666;
margin:0 0 10px 0;
}

h4 {
font: normal 1.4em Arial, Helvetica, sans-serif;
text-transform: lowercase;
color: #7C5C89;
padding:3px 0 5px 0;
margin:0;
border-top: 1px dotted #666666;
border-bottom: 1px dotted #666666;
}

.entry-content img {border:0}

a {
}

a:link {
color: #3F013F;
text-decoration: none;
}
a:visited {
color: #660066;
text-decoration: none;

}
a:hover {
color: #000;
}

ul {
margin:0 0 .5em 1em;
padding: 0 0 .8em 1em;
list-style:none;
}

li {
margin: .3em 0 0 0; 
padding-left: 20px;
background-image: url('images/arrow-bullet.png');
background-repeat: no-repeat;
background-position: 0 .5em;
}

/* images to float left and right in content */
img.left, img.left a {
float:left;
margin: 0 10px 5px 0;
padding: 3px;
border: 1px solid #ccc;
display:block;
}

.right {
float:right;
margin: 0 0 5px 10px;
padding: 3px;
border: 1px solid #ccc;
}

/* Just some example content */
div#header{text-align:left;margin-bottom:2em;}

div#header a:hover {
border:0;
}
div#access div.skip-link{position:absolute;top:1em;right:1em;}
div#menu{height:1.5em;padding-top:0.3em;width:100%;}
div#menu ul a{text-decoration:none;}
div#menu ul,div#menu ul ul,div#menu ul li{list-style:none;margin:0;padding:0;}
div#menu ul li{float:left;}
div#menu ul li a{
padding:0.3em 0.5em;
font-size: 20px;
}
div#menu ul ul{display:none;}
div#menu ul ul li{float:none;}
div#menu ul ul li a{margin:0;padding:0;border:none;}
div#menu ul li:hover ul{display:block;padding-top:0.5em;position:absolute;}
div#menu ul li:hover ul li a{border:none;display:block;padding:0.1em;width:10em;}

.entry-title{clear:both;}
div#container,div.sidebar{margin-top:1em;}
.widget widget_sandbox_search {
border-style: none;
}
div.sidebar {
float:left;
overflow:hidden;
width:220px;
padding:0 0 0 0;
}
div#nav-above,div#nav-below{width:100%;height:1em;}
div#nav-above{margin-bottom:1em;}
div#nav-below{margin-top:1em;}
.alignleft,div.nav-previous{float: left;}
.alignright,div.nav-next{float: right;}
form#commentform .form-label{margin:1em 0 0;}
form#commentform span.required{background:#fff;color:red;}
form#commentform,form#commentform p{padding:0;}
input#author,input#email,input#url{width:50%;}
input#author,input#email,input#url,textarea#comment{padding:0.2em;}
div.comments ol li{margin:0 0 3.5em;}
textarea#comment{height:13em;margin:0 0 0.5em;overflow:auto;width:66%;border: solid 1px #ccc;}
textarea#comment:hover {
background-color: #F8F0FF;
border: 1px solid #666666;
color: #000;
cursor: pointer;
    }
textarea#comment:focus {
color: #000;
background-color: #ffffff;
border: solid 1px #ccc;
cursor: text;
font-family: Arial, Helvetica, sans-serif;
    }
textarea#commentFocused {background:#CCCCCC}
div.sidebar div,div.sidebar h3,div.sidebar ul,div.sidebar li{margin:0;padding:0;}
div.sidebar h3{font-size:1.2em;}
div.sidebar input#s{width:7em;}
div.sidebar li{
list-style:none;
margin:0;

}
div.sidebar h3 {padding-bottom: 10px;
border-bottom: 1px dotted #CCCCCC;}
div.sidebar li form{margin:0;padding:0;}
div.sidebar ul ul{
margin:0 0 20px 0;

}
div.sidebar ul li {
list-style:none;
margin:0;
width: 100%;
padding-top: 4px;
padding-bottom: 4px;
background: url(images/small-dot.gif) repeat-x bottom;
}
div.sidebar ul ul ul{margin:0 0 0 0.5em;}
div.sidebar ul ul ul li{list-style:none;}
div.sidebar ul li a {
font: 18px "Arial Rounded MT Bold", Arial, sans-serif;
color: #7F0F7F;
}

div.sidebar ul li a:hover {
border:0;
color:#410041;
}

div.sidebar ul li.port a, div.sidebar ul li.web a, div.sidebar ul li.print a {
color:#4A004A;;
}
/* this adds padding to left of Web and Print menu items
div.sidebar ul li.web a, div.sidebar ul li.print a {
padding-left:5px;
}*/

div#footer{text-align:left;}

#wrapper  {
width: 900px;
float: left;
margin: 0px;
padding-left: 30px;


}
#Dialog {
margin:10px 0 0 0;
padding:10px;

}
#basecamp-title {
font: normal 1.6em Arial, Helvetica, sans-serif;
color: #553759;
}
.user_name_and_password_login dd {padding:0; margin:0:}


.entry-title {
display: block;
width: 100%;
font: 46px "Arial Rounded MT Bold", Arial, sans-serif;
padding: 0 0 5px 0;
margin: 0 0 10px 0;
border-top:2px dotted #666;
border-bottom: 2px dotted #666;
background:#fff;
letter-spacing: -0.06em;
}
.entry-title a:link, .entry-title a:visited {
display: block;
width: 100%;
background:#fff;
font: 26px "Arial Rounded MT Bold", Arial, sans-serif;
letter-spacing: -.02em;
}

.entry-title a:hover {
border:0;
}

h1.page-title {
display: block;
width: 100%;
font: 46px "Arial Rounded MT Bold", Arial, sans-serif;
padding: 0 0 10px 0;
margin: -5px 0 10px 0;


}

div.hentry h3 {
border-top:2px dotted #666;
}

.entry-meta {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
font-size:90%;
color:#666;
}

.entry-meta a {
}

#comments {
margin-top:15px;
}

.tags {
color: #666;
}

div.read-on {
margin:-10px 0 5px 0;
float:right;
}

.entry-date {
color: #CCCCCC;
margin: 0px;
padding: 0px;
text-decoration: none;
border-style: none;
}
#header {
background: url(images/big-dot.gif) repeat-x bottom;
width: 900px;
height: 115px;
float: left;
margin:0px;
}
#intro {
float: right;

}
.published {border:none;}

.frontpage-text {
font: 22px Arial, Helvetica, sans-serif;
color: #4A4A6F;
}
h1.intro {
font: 26px "Arial Rounded MT Bold", Arial, sans-serif;
color: #410041;
width: 630px;
margin: 0 0 20px 0;
padding: 0 0 10px 0;
background: url(images/big-dot.gif) repeat-x bottom;
}
#footer {

padding-top: 10px;
padding-bottom: 10px;
margin-top: 20px;

}

dl {
margin: 10px 0 0 0;
}

.user_name_and_password_login p {
margin: 10px 0 0 0;
}

dt {
float: left;
width:100px;
font-size: 14px;
line-height: 24px;
}

dd {
float:left;
margin: 0 0 5px 90px;
font-size: 11px;
line-height: 24px;
color: #666;
margin: 0 0 10px 20px;
}

.user_name_and_password_login input {
font-size: 14px;
}

.user_name_and_password_login dd span {
color: #ccc;
}

#CollapsiblePanel1 h4 {
border:0;
font: normal 1.8em "Arial Rounded MT Bold", Arial, sans-serif;
margin:0;
padding:10px 0;
}

#CollapsiblePanel1 form {
margin:0;
}

input#username, input#identity_url {
width: 250px;
}

input#password {
width: 185px;
margin-right: 5px;
}
input#submit {float:right:}
/*.amnesia {float:left:
width:300px;}*/

#CollapsiblePanel1 input {
margin:0 10px 5px 0;
}

.amnesia, .amnesia a {
font-size:90%;
color:#999;
}

.user_name_and_password_login input#emailpassword {
vertical-align: middle;
margin-right: 5px;
}

.user_name_and_password_login div.AlertGood,
.user_name_and_password_login div.AlertBad {
margin: 10px 0 20px 0;
}

.user_name_and_password_login div#Dialog {
border: 10px solid #ccc;
padding: 15px 20px 10px 20px;
text-align: left;
background: #fff;
}

body.user_name_and_password_login div#Dialog h2 {
margin: 0;
padding: 0;
}

body.user_name_and_password_login div.below {
font-size: 10px;
text-align: right;
padding: 5px 0 0 0;
}

body.user_name_and_password_login div.below a:link, body.user_name_and_password_login div.below a:visited {
color: #666;
}

body.user_name_and_password_login div.below a:hover {
color: #fff;
background-color: #666;
}
#footer-container {
background: url(../8creative/images/small-dot.gif) repeat-x top;
text-align:center;
float: right;
width: 630px;
padding:10px 0 10px 0;
font-size:90%;
}

.testimonial {
font-size: 120%;
font-style: italic;
color: #333366;
}

.up {
margin:-10px 0 20px 0;
font-size:95%;
color:#7F7777;
}

.up a {
color:#666;
}

.up a:hover {
color:#000;
}

/*****************************************************************************************************************************************
  SpryCollapsiblePanel.css - Revision: Spry Preview Release 1.4 
******************************************************************************************************************************************/

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
margin: 0px;
padding: 0px;
float: right;
width: 630px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
margin: 0px;
padding: 7px 0px 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-align: center;
background: url(../8creative/images/login-back.gif) no-repeat right;
height: 18px;
color: #FFFFFF;
font: bold 0.7em Arial, Helvetica, sans-serif;
float: right;
width: 183px;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
clear: both;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {

}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {

}
.contact-us {display:block; background:#ccc; border:1px dotted #333; padding: 5px;}