/*-----------------------------------------------

	Standard stylesheet for key2design.com.au
	by key2design
	
-----------------------------------------------*/

@import url(reset.css);

body {
	color: #777;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}

strong { font-weight: bold; }
em { font-style: italic; }

#container {
/*	background: url(../images/scaffold/grid.png);*/
	margin: 0 auto;
	padding-top: 36px;
	width: 840px;
}

/* css image replacement */
#content h1,
#search label,
#mainnav a,
#projects .nav a,
#project-display .nav a,
#logo a {
	background-repeat: no-repeat;
	height: 18px;
	text-indent: -10000em;
}


/* =Links
----------------------------------------------- */
a {
	text-decoration: none;
	color: #008fd5;
}
a:link {
	color: #008fd5;
}
a:visited {
	color: #4fb8ff;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #444;
}

/* =Structure
----------------------------------------------- */
h1 { 
	font-size: 1em;
	margin-bottom: 1em;
}
h2, h3 {
	font-size: 0.75em;
	line-height: 1.5em;
}
h2 { 
	color: #999;
	font-weight: bold;
	text-transform: uppercase;
}
h3 {
	margin-bottom: 1.5em;
}
p, li, .vcard, #banner a {
	font-size: 0.69em;
	line-height: 1.64em;
}
p, ul, ol, input {
	margin-bottom: 1.64em;
}
fieldset input {
	margin-bottom: 1.35em;
}
li p { 
	font-size: 1em;
}

/* =Tools
------------------------------------------------*/
span.highlight {
	background-color: #bdf6eb;
}

/* =Header
----------------------------------------------- */
#logo {
	margin-bottom: 0;
}
#logo a {
	background-image: url(../images/key2design-logo.gif);
	display: block;
	height: 36px;
	width: 260px;
}
#logo a:hover {
	background-position: left bottom;
}
#banner {
	clear: right;
	height: 270px;
}

/* =Navigation
----------------------------------------------- */
#mainnav {
	float: right;
	height: 54px;
	margin: -1.125em 0 0 0;
}
#mainnav li {
	float: left;
}
#mainnav a {
	background-position: top left;
	display: block;
	height: 23px;
	width: 90px;
}

/* coming-soon */
div.coming-soon {
	font-weight: bold;
}

/* selected item */
#mainnav strong a,
#mainnav a:hover {
	background-position: bottom left;
}

/* sub-navigation */
#mainnav ul {
	left: -10000em;
	height: 45px;
	position: absolute;
	width: 250px; /* extra width to extend mouseout area */
}
#mainnav ul a {
	height: 20px;
}
#mainnav li.selected ul {
	left: auto;
}

/* projects is selected */
#projects-nav.selected strong a,
#mainnav #projects-nav a:hover {
	background-position: left bottom;
}
/* projects child is selected */
#projects-nav.selected a {
	background-position: left center;
}
/* undo effected children */
#projects-nav.selected ul a {
	background-position: left top;
}
#projects-nav.selected ul strong a,
#projects-nav.selected ul a:hover {
	background-position: left bottom;
}

/* image-replaced menu items */
#home-nav a { background-image: url(../images/nav-home.gif); width: 38px; }
#about-nav a { background-image: url(../images/nav-about.gif); width: 50px; }
#projects-nav a { background-image: url(../images/nav-projects.gif); width: 70px; }
#print-nav a { background-image: url(../images/nav-print.gif); width: 42px; }
#web-nav a { background-image: url(../images/nav-web.gif); width: 28px; }
#services-nav a { background-image: url(../images/nav-services.gif); width: 67px; }
#contact-nav a { background-image: url(../images/nav-contact.gif);	width: 57px; }
#login-nav a {	background-image: url(../images/nav-login.gif);	width: 48px; }

/* =Search
----------------------------------------------- */
#search {
	float: right;
	clear: both;
	height: 18px;
	margin: 18px 0;
}
#search label,
#search-keyword,
#search input.go {
	float: left;
}
#search label {
	display: none;
}
#search-keyword {
	border: 1px solid #b7b6b6;
	color: #444;
	height: 14px;
	margin-right: 8px;
	width: 164px;
}
#search-results li {
	list-style: outside decimal 
}

/* =Sitemap
----------------------------------------------- */
#sitemap {
	border-left: 2px solid #ddd;
	margin-left: 0.5em;
	margin-bottom: -0.75em;
}
#sitemap li {
	background: #fff;
	margin: 2px 0em 1em -1em;
	width: 14em;
}
#sitemap li li { 
	font-size: 1.0em;
	padding: 1px 5px;
}
#sitemap li.parent {
}
#sitemap li a {
	border: 2px solid #ddd;
	display: block;
	padding: 5px;
}
#sitemap li li a {
	background: #fff;
	border: 2px solid #ddd;
	margin-bottom: 5px;
	margin-left: -2em;
	width: 16em;
}
#sitemap li ul {
	border-left: 2px solid #ddd;
	margin-left: 4em;
	margin-bottom: -1em;
	padding-top: 8px;
	padding-bottom: 8px;
}
#sitemap li li {
	margin: 0;
}

/* =Content
----------------------------------------------- */
#content {
	clear: both;
	overflow: hidden;
}
#content .panel {
	float: left;
}

/* =Home
----------------------------------------------- */
.home #complementary {
	background-color: #efefef;
/*	margin-top: -10px;*/
	padding: 15px;
	width: 195px;
}
.home #primary {
	margin-right: 20px;
	width: 320px;
}
.home #news {
	margin-right: 15px; 
	width: 260px;
}
.home #featured {
	height: auto;
	margin-bottom: 3px;
	text-indent: 0;
}
/* non-flash banner display */
.home #banner a {
	background-color: #008fd5;
	color: #fff;
	display: block;
	font-weight: normal;
	padding-left: 5px;
	position: relative;
	top: 252px;
}

#news a,
#news em,
#news strong {
	display: block;
}
#news em {
	font-style: normal;
}
#news a {
	color: inherit;
	text-decoration: none;
}
#news a:hover strong,
#news a:hover span.more {
	text-decoration: underline;
}
#news a span.more {
	display: block;
}
#news a span.more {
	color: #008fd5;
}
#news a em,
#news a strong {
	color: #777;
}

/* =Structure: Subpage
----------------------------------------------- */
.subpage #banner {
	background-color: #f2f1f1;
	height: 270px;
}
.subpage #complementary {
	width: 400px;
}
.subpage #primary {
	margin-right: 20px;
	width: 330px;
}
body.projects #complementary {
	width: 400px;
}
body.projects #complementary {
	margin-right: 0;
}
body.projects #primary h1 {
	margin-left: 20px;
}
body.projects #primary {
	width: auto; 
}
#contact-page #complementary {
	width: 420px;
}
#contact-page #primary {
	margin-right: 0;
	width: 419px
}
#download-vcard {
	background: url(../images/vcard.gif) no-repeat;
	font-weight: bold;
	margin-left: 98px;
	padding: 7px 0 10px 45px;
}

#standards-page #primary,
body.condensed #primary {
	float: right;
	margin-right: 0;
	width: 420px
}

/* right aligned condensed content */
body.condensed #complementary {
	float: right;
	margin-right: 20px;
	width: 260px;
}
body.condensed #complementary h1 {
	background-position: top right;
}
body.condensed #complementary p,
body.condensed #complementary li,
body.condensed #complementary h2,
body.condensed #complementary h3 {
	text-align: right;
}

/* single column simplified layout */
body.simplified #primary {
	width: 500px;
}

div.additional {
	position: absolute;
	margin-left: -220px;
	margin-top: 18px;
	text-align: right;
	width: 200px;
}

/* =Structure: Services
----------------------------------------------- */
#services-page #primary {
	float: right;
	margin: 0;
	width: 420px;
}
#services-page #complementary {
	margin-right: 0;
	width: 400px;
}
#services-page div.feature {
	background: #efefef;
	float: left;
	height: 37em;
	margin-right: 20px;
	padding: 20px;
	width: 150px;
}
#services-page div.feature h1 {
	height: 52px;
}

#services-page #key2cms-feature {
	margin-right: 0;
}
#services-page #key2view-feature h1 { background-image: url(../images/key2view-logo-grey.gif); }
#services-page #key2cms-feature h1 { background-image: url(../images/key2cms-logo-grey.gif); }

#services-page div.wrapper {
	overflow: hidden;
}

/* =Banners
----------------------------------------------- */
#about-page #banner { background-image: url(../images/banners/sign.jpg); }
#services-page #banner { background-image: url(../images/banners/window.jpg); }
#contact-page #banner { background-image: url(../images/banners/phone.jpg); }
/* fallback */
#banner { background-image: url(../images/banners/keyboard.jpg); }

#contact-question {
	height: 13.75em;
}

/* =Headings
----------------------------------------------- */
.home #primary h1 {	background-image: url(../images/title-welcome.gif); }
.home #news h1 { background-image: url(../images/title-latestsolutions.gif); }

#standards-page #primary h1 { background-image: url(../images/title-standards.gif); }
#standards-page #complementary h1 { background-image: url(../images/title-resources.gif);}
#privacy-page #primary h1 { background-image: url(../images/title-privacy.gif); }
#sitemap-page #primary h1 { background-image: url(../images/title-sitemap.gif); }
#search-page #primary h1 { background-image: url(../images/title-search.gif); }

#about-page #primary h1 { background-image: url(../images/title-about.gif); }
#about-page #complementary h1 { background-image: url(../images/title-ourstaff.gif); }
#services-page #primary h1 { background-image: url(../images/title-services.gif); }
#login-page #primary h1 { background-image: url(../images/title-login.gif); }
#projects-page #primary h1 { background-image: url(../images/title-latestsolutions.gif); }
#projects-page #complementary h1 { background-image: url(../images/title-projects.gif); }
#projects-print-page #primary h1 { background-image: url(../images/title-otherprint.gif); }
#projects-print-page #complementary h1 { background-image: url(../images/title-print.gif); }
#projects-web-page #primary h1 { background-image: url(../images/title-otherweb.gif); }
#projects-web-page #complementary h1 { background-image: url(../images/title-web.gif); }
#contact-page #content h1 { background-image: url(../images/title-contact.gif); }

/* =Footer
----------------------------------------------- */
#footer {
	border-top: 1px solid #008fd5;
	clear: both;
	margin-top: 40px;
}
/* validation and rss services */
#badges p,
#badges li,
#badges ul,
#copyright,
#utilities {
	margin-bottom: 0;
}
#badges li,
#rss {
	float: left;
	margin-top: -23px;
	margin-right: 3px;
}
/* for safari negative floating */
#xhtml-badge,
#css-badge, 
#wai-badge {
	position: absolute;
}
#css-badge { margin-left: 53px }
#wai-badge { margin-left: 106px;}
#badges p {
	clear: left;
	float: left;
}
#copyright,
#utilities {
	color: #bbb; 
}
#utilities {
	clear: right;
}
#utilities a {
	color: #bbb;
}
#utilities #copyright {
	border: none;
	text-align: right;
	width: 400px;
}
#rss {
	float: right;
	display: block;
	padding-top: 1px;
	text-align: right;
	width: 52px;
}
#utilities {
	float: right;
}
#utilities li {
	border-left: 1px solid #bbb;
	float: left;
	line-height: 1em;
	margin: 2px 0 0 0.4em;
	padding: 3px 0 1px 5px;
}
/* vCard */
.vcard {
	clear: both;
	color: #bbb;
	line-height: 18px;
	padding: 0 0 30px 0;
	text-align: right;
	white-space:nowrap;
}
.vcard .org, .vcard .country-name {
	display: none;
}
.vcard .tel {
	display: inline;
	text-align: right;
}
.vcard abbr {
	border: medium none;
}
.vcard .tel span span {
	color: #0099CC;
}

/* =Forms
----------------------------------------------- */
fieldset label,
fieldset input,
fieldset dt,
fieldset dd {
	display: block;
	float: left;
}
fieldset label,
fieldset dt {
	margin-right: 10px;
	width: 8em;
}
fieldset label em,
fieldset dt em {
	color: #f80f0f;
	font-style: normal;
	font-weight: bold;
}
fieldset li {
	clear: left;
}
fieldset input,
fieldset textarea,
form .actions input {
	border: 1px solid #B7B6B6;
	padding: 0;
}
form .actions,
form label.checkable {
	margin-left: 98px;
}
form .actions input {
	border-color: #ccc #999 #999 #ccc;
	color: #333;
	font-size: 0.8em;
	cursor: pointer;
	padding: 3px 7px;
}
form .actions input:active,
form .actions input.focused {
	border-color: #999 #ccc #ccc #999;
	color: #008fd5;
}

/* validation errors */
form li.invalid input,
form li.invalid select,
form li.invalid textarea {
	border-color: #C40000;
}
form li.invalid p {
	color: #C40000;
	font-weight: bold;
	margin-left: 98px;
	margin-bottom: 0;
}

form label.checkable {
	display: block;
	padding: 4px 0;
	width: auto;
}
form label.checkable input {
	margin-right: 10px;
}

/* google map */
#key2map {
	height: 398px;
}
#key2map p {
	line-height: 1.2em;
	margin-bottom: 0;
}
#key2map strong.key2design {
	color: #999;
}
#key2map strong.key2design span {
	color: #00a6e3;
	display: inline;
}
#key2map span {
	display: block;
}
#maptextbox {
	height: 100px;
}
#key2reports-advert li {
    color: #038bcf;
    list-style: outside square;
    margin-left: 20px;
}
#key2reports-advert li span {
    color: #777777;
}
#key2reports-advert ul {
    margin-bottom: 0.35em;
}
#key2reports-advert li,
#key2reports-advert p {
/*    font-size: 0.8em;*/
}
#key2reports-advert p {
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
}
#key2reports-advert a {
    color: #038bcf;
}