/*
///////////////////////////////////////////////////////////////////////////
// GLOBAL STYLES
///////////////////////////////////////////////////////////////////////////
*/

.clear {
	clear:both;
}

h1, h2, h3, h4, h5, .highlights {
	color: #F09838;
}

p {
	line-height: 150%;
	margin: 1em 2em 0 0;
	/*text-align: justify; This looks awful on short paragraphs that don't fill the width of the page. --jsb*/
	text-align: left;
}

ximg, xdiv { behavior: url(/css/iepngfix.htc) } /*transparent PNGs in IE */

a:link {
	color: #224c88;
}

a:hover {
	color: #224c88;
}


a:visited {
	color: #512a88;
}

a:active {
	color: #F09838;
}

.highlights {
	font-weight: bold;
	line-height: 130%;
	font-size: 120%
}

.quotes {
	color: #666;
}

label {
	color: gray;
	font-weight: bold;
	font-size: 80%;
}

.errorMessage {
	color: #FF0000;
	line-height: 130%;
	font-weight: bold;
}

.splash {
	text-align: center;
}
.center {
	text-align:center;
}

pre {
	width:95%;
	overflow: auto;
	background-color: #CCC;
	padding: .5em;
	text-align: left;
	white-space: pre;
	margin-bottom: 1em;
}

/*
light yellow : #F09838;
*/
div#wrapper {
	background: transparent url(/images/bg_gradient.jpg) top left repeat-x;
}

body {
	background: #333 url(/images/bg_solid.jpg) top left repeat;
}

#doc2 {
	background-color: white;
	border: 1px solid #333;
	border-width: 0 1px;
}

h1 {
	margin-top: 1em;
	font: bold 165% Myriad Pro, trebuchet ms, arial, helvetica, Verdana, sans-serif;
	letter-spacing: 1px;
}

h2 {
	margin-top: 1em;
	font: bold 160% Myriad Pro, trebuchet ms, arial, helvetica, Verdana, sans-serif;
	letter-spacing: 1px;
}

h3 {
	margin-top: 1em;
	font: bold 120% Myriad Pro, trebuchet ms, arial, helvetica, Verdana, sans-serif;
	letter-spacing: 2px;
}

b1 {
	font: bold 100% arial, helvetica, Verdana, sans-serif;
	color: #000000;
	text-align: center;
}

#header {
	margin-bottom: 1em;
}

/*
///////////////////////////////////////////////////////////////////////////
// NAVIGATION
///////////////////////////////////////////////////////////////////////////
*/

#navbar {
	font: 130%   Myriad Pro, trebuchet ms, arial, helvetica, Verdana, sans-serif;
	list-style: none;
	margin: auto;
	clear:none;
}

#navbar li {
	float: left;
	padding: 0 23px 0 13px;
	margin-right: 5px;
	background: url( /images/diamond-black.gif ) 100% 66% no-repeat;
}

#navbar li a {
	display: block;
	padding: 0.75em 0 0.25em;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
}
#quicksearch {
	margin: 1em;
}

#navbar #contact {
	background: none;
}

#navbar a:hover {
	color: #A41;
}

.info #navbar #info a,
	.services #navbar #services a,
	.products #navbar #products a,
	.developers #navbar #developers a,
	.contact #navbar #contact a,
	.company #navbar #company a
{
	/*
	// FIX!
	background: url( /images/navbarlinkbg.gif ) bottom left repeat-x;
	*/
	color: #F09838;
}

/*
///////////////////////////////////////////////////////////////////////////
// SUBNAV
///////////////////////////////////////////////////////////////////////////
*/

#subnav ul li {
	list-style: none;
	display:block;
	margin: 0;
	padding: 0;
}

#subnav ul li.divider {
	padding: 0 1em;
}

#subnav ul a {
	display: block;
	color:black;
	width:90%;
	font-size: 110%;
	font-weight: bold;
	line-height: 150%;
	padding: .5em;
	text-decoration: none;
}

#navcontainer>ul#navlist li a { width: auto; }


#subnav ul a:hover {
}

.section_info, .section_services, .section_products, .section_developers, .section_contact, .section_company {
	display: none;
}

.info .section_info,
	.services .section_services,
	.products .section_products,
	.developers .section_developers,
	.contact .section_contact,
	.company .section_company{
	display: block;
}


.development .development a,.why360 .why360 a,.filemaker .filemaker a,.php .php a,
.java .java a,.java .java a,.estimate .estimate a,.productlist .productlist a,.portfolio .portfolio a, .supercontainer .supercontainer a,
.adminanywhere .adminanywhere a,.scriptmaster .scriptmaster a,.divider .divider a,.woof .woof a,.credit-card-plugin .credit-card-plugin a,
.email-plugin .email-plugin a,.textractor .textractor a,.diff .diff a,.currency-exchange .currency-exchange a,.quickerpicker .quickerpicker a,
.remotescripter .remotescripter a,.url-plugin .url-plugin a,.regular-expressions-plugin .regular-expressions-plugin a,.jdbc-plugin .jdbc-plugin a,
.ftp-plugin .ftp-plugin a,.charts .charts a,.articles .articles a,.news .news a,.references .references a,.casestudies .casestudies a,
.staff .staff a,.addresses .addresses a,.infobox .infobox a,.proposal .proposal a, .filemaker-developers-group .filemaker-developers-group a,
.filemaker-web-services-movie .filemaker-web-services-movie a, .webservices .webservices a, .bio .bio a, .contact .contact a, .upload .upload a,
.web-services-manager .web-services-manager a, .tools .tools a, .testimonials .testimonials a, .filemaker-offsite-backup .filemaker-offsite-backup a,
.autoupdate .autoupdate a

{
	background-color: gray;
	color: white !important;
}

/*
///////////////////////////////////////////////////////////////////////////
// FOOTER
///////////////////////////////////////////////////////////////////////////
*/
#ft {
	border-top: 1px solid gray;
	padding: 1em;
	margin-top: 2em;
	font-size: 90%;
}

#ft p {
	text-align: center;
}

/*
///////////////////////////////////////////////////////////////////////////
// TOC
///////////////////////////////////////////////////////////////////////////
*/
.toc {
	background-color: #EAECEE;
	border:1px dotted #DADCDE;
	width: 20em;
	padding: 10px;
	margin: 1em 0 1em 5em;
}

.toc h3 {
	display: none;
}

.toc a {
	color: #006;
}

#doc2 {
}

div.content {
	min-height:800px;
}

div.content ul, div.content ol {
	margin: 0 0 0 2em;
}

div.content li {
	display: list-item;
	margin: .2em 0;
}

div.content img {
	margin: 12px;
}

div.content img.nomargin {
	margin: 0;
}

#estimate_button {
	text-align: center;
}

#customerlogin {
    position: relative;
    left: 700px;
    top: 30px;
}

#buybutton {
    position: relative;
    left: 500px;
    bottom: 200px;
    margin: 0;
    height: 43px;
    width: 134px;
}



/*
///////////////////////////////////////////////////////////////////////////
// MAILER FORM
///////////////////////////////////////////////////////////////////////////
*/
#mailer {
	padding: .5em;
	margin-bottom: 2em;
}

#mailer label {
	display: block;
	margin-top: 1em;
}

#mailer #from, #mailer #body {
	width: 25em;
}

/* hide the 'get estimate' button on the estimate request page*/
body.estimate #estimate_button {
	display: none;
}

/*
///////////////////////////////////////////////////////////////////////////
//  BANNERS
///////////////////////////////////////////////////////////////////////////
*/
div#banner {
	background: #000000 url( /images/blue_background.jpg ) top right no-repeat;
	height: 140px;
	margin-bottom: 2.5em;
}

div#banner h1 {
	display: table-cell;
	/*vertical-align: middle;*/
	color: white;
	font-size: 240%;
	width: 400px;
	padding: 0.8em 0 0 0.6em;
	margin: 0;
	letter-spacing: normal;
}

div#banner h2 {
	color: #FFFFFF;
	padding-left: 1em;
	font-size: 150%;
	font-weight: normal;
	margin: 0;
	letter-spacing: 0;
	width: 400px;
	/*text-align: center;
	display: table-cell;
	vertical-align: middle;
	font-size: 200%;

	height: 140px; */
	/*Commented out because was making lines cut off instead of wrap on banners --jsb : line-height:140px;*/
}

div#bannersm h1 {
	display: table-cell;
	/*vertical-align: middle;*/
	color: #595b9b;
	font-size: 240%;
	width: 400px;
	padding: 0.8em 0 0 0.6em;
	margin: 0;
	letter-spacing: normal;
}

div#bannersm h2 {
	color: #595b9b;
	padding-left: 1em;
	font-size: 150%;
	font-weight: normal;
	margin: 0;
	letter-spacing: 0;
	width: 400px;
	/*text-align: center;
	display: table-cell;
	vertical-align: middle;
	font-size: 200%;

	height: 140px; */
	/*Commented out because was making lines cut off instead of wrap on banners --jsb : line-height:140px;*/
}


body.services div#banner {
	/*background: #000005 url( /images/blue_background.jpg ) top right no-repeat;*/
	background: #ffffff url( /images/banner_home.jpg ) top right no-repeat;
	height: 200px;
}

body.products div#banner {
	background: #610f07 url( /images/lightbulb.jpg ) top right no-repeat;
}

body.products div#bannersm {
	background: #610f07 url( /images/sm4_background.jpg ) top right no-repeat;
    height:143px;
}

body.supercontainer div#banner {
	/*background: #000005 url( /images/blue_background.jpg ) top right no-repeat;*/
    background: #000005 url( /images/blue_background_cropped.jpg ) top right no-repeat;
    height: 280px;
}

body.web-services-manager div#banner {
	/*background: #000005 url( /images/blue_background.jpg ) top right no-repeat;*/
    background: #000005 url( /images/blue_background_cropped.jpg ) top right no-repeat;
    height: 280px;
}
body.filemaker-offsite-backup div#banner {
	/*background: #000005 url( /images/blue_background.jpg ) top right no-repeat;*/
    background: #000005 url( /images/blue_background_cropped.jpg ) top right no-repeat;
    height: 280px;
}

body.articles div#banner {
	background: #000 url( /images/speaker_grille.png ) top right no-repeat;
}
body.contact div#banner {
	background: #0B0026 url( /images/earth.jpg ) top right no-repeat;
}


body.portfolio div#banner {
  background-image: url( /portfolio/images/portfolio.png );  
}

body.tools div#banner {
	background: #073161 url( /images/toolsbar.jpg ) top right no-repeat;
}

/*
///////////////////////////////////////////////////////////////////////////
//  TABLES
///////////////////////////////////////////////////////////////////////////
*/

th {
	text-align: center;
	font-weight: bold;
}

/*
///////////////////////////////////////////////////////////////////////////
// ARTICLES
///////////////////////////////////////////////////////////////////////////
*/
.articleOverview, .articleBody {
	margin: 1em 1em 0 0;
}

.articleOverview h4, .articleOverview h2 {
	font-weight:bold;
	margin: 0;
}
.articleOverview .description {
	margin-top: .3em;
	margin-left: 1em;
}
.articleOverview p {
	margin: 0;
}
.articleOverview .readMore {
	text-transform:uppercase;
	font-size:70%;
	text-decoration:none;
	color:#888;
}
h1 a, h2 a, h3 a, h4 a, span.highlights a {
	text-decoration:none;
}
.articleOverview .readMore:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, span.highlights a:hover {
	text-decoration:underline;
}

.commentList {
	border:1px solid #aaa;
	margin: 1em 1em 1em 0;
	padding: 1em;
	background-color:#ccc;
}
.commentList .comment {
	margin: 1em 0;
	padding-bottom: 1em;
	border-bottom: 1px dotted #989;
}

/*
///////////////////////////////////////////////////////////////////////////
// NEWS
///////////////////////////////////////////////////////////////////////////
*/
.newsOverview {
	margin: 1em 1em 0 0;
	padding-bottom: .6em;
	border-bottom: 1px dotted #ccc;
}
.newsOverview h4 {
	margin: 0;
	font-weight:bold;
}

p.readAll {
	margin: 0;
	padding: 0;
}
/*
///////////////////////////////////////////////////////////////////////////
// FORMS
///////////////////////////////////////////////////////////////////////////
*/
div.field {
	clear:both;
}
div.field label {
	display:block;
	margin-top: .5em;
	font-size:90%;
	color:gray;
	font-weight:bold;
	text-transform:uppercase;
}
div.field label.required {
	font-weight:bold;
}
.action {
	clear:both;
	margin: 1em 10em;
	padding: 1em;
}

/*
///////////////////////////////////////////////////////////////////////////
// FEEDBACK
///////////////////////////////////////////////////////////////////////////
*/
li.feedbackPanelINFO {
	list-style:none;
	color: #063;
	font-weight:bold;
}
li.feedbackPanelERROR {
	list-style:none;
	color:red;
	font-weight: bold;
}
/*
///////////////////////////////////////////////////////////////////////////
// TESTIMONIALS
///////////////////////////////////////////////////////////////////////////
*/
/*commented out to fix formatting on current testimonials page.  Was this orginally put in for an older page? */

/*.testimonials div {
	margin: 2em 1em;
}
.testimonials blockquote {
	font-size:120%;
	margin: .4em 5em .4em 0;
}

.testimonials address {
	color:gray;
}
*/

/*
///////////////////////////////////////////////////////////////////////////
// Updates
///////////////////////////////////////////////////////////////////////////
*/

#update {
    padding: 2em 1em 2em;
}

#update div {
    float:left;
    /*margin: 2em 1.2em 0 0;*/
    padding: 1em .8em;
    text-align: left;
    height: 12em;
    /*width:28.4%;*/
	width: 19.4em;
	font-size: 85%;
}

#update div h3 {
    letter-spacing: 0;
    color: #FFFFFF;
    margin-top: 0;
}

#update div h4 {
    color:#224c88;
}


#update div p{
    margin: 1em 0;
    text-align: left;
}

#update div a {
    font-weight: bold;
    text-decoration: none;
    color: #48A5DF;
}

#update div a:hover{
    border-bottom: 1px dotted;
}

/*
///////////////////////////////////////////////////////////////////////////
// Transparent Backgrounds
///////////////////////////////////////////////////////////////////////////
*/

#updateSC1 {
	behavior: url(/css/iepngfix.htc);
	background: transparent url(/images/opacity/white-015.png) no-repeat;
    color: #ffffff;

}

#updateSC2 {
	behavior: url(/css/iepngfix.htc);
	background: transparent url(/images/opacity/white-015.png) no-repeat;
    color: #ffffff;
	margin: 0 1.2em;
}

#updateSC3 {
	behavior: url(/css/iepngfix.htc);
	background: transparent url(/images/opacity/white-015.png) no-repeat;
    color: #ffffff;
}

/*
///////////////////////////////////////////////////////////////////////////
// Home Page Featured Section
///////////////////////////////////////////////////////////////////////////
*/

#featured {

}

#featured1 {
	behavior: url(/css/iepngfix.htc);
	background: transparent url(/images/opacity/black-045.png) no-repeat;
    color: #555555;

}

#featured2 {
	behavior: url(/css/iepngfix.htc);
	background: transparent url(/images/opacity/black-045.png) no-repeat;
    color: #555555;
	margin: 0 1.2em;
}

#featured3 {
	behavior: url(/css/iepngfix.htc);
	background: transparent url(/images/opacity/black-045.png) no-repeat;
    color: #555555;
}
/*
///////////////////////////////////////////////////////////////////////////
// Product Summary
///////////////////////////////////////////////////////////////////////////
*/

#summary {
    margin-bottom: 2em;
	width: 33em;
}

#summary p {
    text-align: left;
    font-size: 1.62em;
    margin: 0;
    line-height: 1.6em;
}

#summary img {
	float:left;
	margin: 0 0.5em 0 0;
}


/*
///////////////////////////////////////////////////////////////////////////
// Product Links
///////////////////////////////////////////////////////////////////////////
*/

.productLinks{
    float: right;
	margin: .6em .5em 1em 1.5em;
}

.productLinks img{
    margin: 0;
    width: 230px;
}

.productLinks div{
    padding-right: 1.1em;
    text-align:right;
}

.productLinks div.textLink{
    margin-bottom: 1em;
    text-decoration: none;
    color: #000000;
    font-size: 85%;
	text-align: center;
}

.productLinks a.sc {
    font-weight: bold;
    text-decoration: underline;
    color: #000000;
}

.productLinks a.sc:hover{
    border-bottom: 1px solid;
}


/*
///////////////////////////////////////////////////////////////////////////
// Boxed Sections
///////////////////////////////////////////////////////////////////////////
*/

#contentWrapper {
	padding-left: 1em ;
}

.box {
    float: left;
    padding: 0 1em 1em 0;
    text-align: left;
    width: 31%;
    /*height: 400px;*/
    /*border: 1px solid red;*/
    /*padding:0 0.8em;*/
}

.box p{
    margin: 1em 0;
    text-align: left;
	padding-right: .5em;
}

.box ul{
    margin: 1em 0 0 1.2em;
}

.box h3 {
    letter-spacing: 0;
    font-size: 100%;
}

.box h4 {
    font-weight: bold;
    font-size: 110%;
}

/*
///////////////////////////////////////////////////////////////////////////
// Video Sections
///////////////////////////////////////////////////////////////////////////
*/

#video {

}

.video{
    float: left;
    padding-right:.8em;
	margin-bottom: 1.5em;
	width:360px;
}

.video img.video {
    width: 350px;
    margin: 1em 0 1em;
}

.video .description{
    font-size: 85%;
    font-weight: bold;
    margin: 1em 0;
}

body.supercontainer h4 {
    letter-spacing: 0;
    font-weight: bold;
    font-size: 110%;
	margin: 1em 0;
}

body.web-services-manager h4 {
    letter-spacing: 0;
    font-weight: bold;
    font-size: 110%;
	margin: 1em 0;
}

#contentWrapper {
	padding-left: 1em ;
}


.quoteopen {
	background: url( /images/quote_open2.png ) no-repeat;
	padding-left:70px;
	padding-right:60px;
	margin-right:10px;
	margin-top: 30px;
}

.quotebody{
	font-size:95%;
	padding: 0 10px 10px;
	
}

.quoteclose{
	background: url( /images/quote_close2.png ) no-repeat top right;
	margin-right:40px;
	height: 50px;
	text-align: right;
	padding-right: 80px;
	padding-top:15px;
}