/* CSS Document */

/* Social Media "balloon" icons courtesy of Double-J Design under Creative Commons
/* http://www.doublejdesign.co.uk/2010/04/more-social-media-balloons/
/* 

/* Body & Wrapper */
body, html {
	margin: 0;
	padding: 0;
	
}
body {
	min-width: 750px;
	background-color: #fff; 
	color: #000;
}
#wrapper {
	margin: 0 auto;
	width: 750px;
	font: 70% Verdana, Helvetica, Arial, sans-serif;
	color: #000;
}
img {
	border: none;
}
/* Navigation Bar */
#navbar {
	width: 750px;
	margin: 0 auto;
	padding: 10px 0;
}
#navbar img {
	display: inline;
	border: 0;
	float: left;
}
#nav1 {
	width: 104px;
	float: left;
	display: inline;
	border: 0;
}
#logo-print {
	display: none; /* HIDE FOR SCREEN */
}
/* Social Media */
#socmed {
	text-align: center;
	margin: 0 0 10px 0;
}
#socmed img {
	margin: 5px 10px;
}
/* Main Column */
#main {
	float: left;
	width: 490px;
	padding: 15px 20px 0 0;
	background-image: url(../images/vert-line.gif);
	background-repeat: no-repeat;
	background-position: top right;
	font: 110%/1.7em Verdana, Helvetica, Arial, sans-serif;
}
p, ul, ol {
	line-height: 1.5em;
}
#main h1, #sidebar h1 {
	font: bold 140% "Helvetica Narrow", "Arial Narrow", Verdana, sans-serif;
	margin-bottom: 0;
}
#main h2 {
	font: bold 120% "Helvetica Narrow", "Arial Narrow", Verdana, sans-serif;
	margin-bottom: 0;
}
#main ul {
	margin: 0;
	padding: 6px 0;
}
/* Right Column */
#sidebar {
	float: right;
	width: 240px;
	padding: 15px 0 0 0;
}
/* Subnavigation Bar */
#navcontainer { 
	width: 240px; 
}
#navcontainer ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}
#navcontainer a {
	display: block;
	padding: 3px;
	width: 230px;
	background-color: #036;
	border-bottom: 1px solid #fff !important;
	font-weight: bold;
}
#navcontainer a:link, #navlist a:visited {
	color: #fff !important;
	text-decoration: none;
}
#navcontainer a:hover {
	color: #fff;
}

/* Footer */
#footer {
	font-size: 80%;
	clear: both;
	text-align: center;
	padding: 20px 0 0 0;
}
#footer p {
	padding: 5px;
	margin: 0;
}
#copy {
	font-size: 10px;
	color: #999;
}

/* Sections */
#home, #about, #portfolio, #services, #resources, #contact {
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* Home & Choosing Article */
#home {
	background-image: url(../images/bg-home.gif);
	background-position: top center;
}
#home a:link, #choosing a:link { 
	color: #006EA6; 
}
#home a:visited, #choosing a:visited { 
	color: #000
}
#home a:hover, #home a:active, #choosing a:hover, #choosing a:active {  
	text-decoration: none; 
	color: #469BC6
}
#home h1, #choosing h1 {
	color: #469BC6 ;
}
.first {
	font-weight: bold; 
	color: #469BC6
}
#designer-girl {
	padding: 0 20px 10px 20px;
}
/* Highlight box */
.box {
	text-align: center;
	border: 1px dashed #006EA6;
	padding: 10px 5px;
	/* background-color: #E6E6E6; */
	background-color: #EBF2F4;
}
 #home #sidebar h1 {
	font: bold 140% "Helvetica Narrow", "Arial Narrow", Verdana, sans-serif;
	color: #fff;
	background-color: #469BC6;
	padding: 3px 2px;
	margin-bottom: 0;
	text-align: center;
}
#home #navcontainer a:hover {
	background-color: #8AC2DE !important;
}
#home #navcontainer a {
	background-color: #469BC6 !important;
}
#home #main ul li { 
	list-style-type: none;
	background-image: url(../images/bullet-home.gif);
	background-position: 0 4px;
	background-repeat: no-repeat;
	padding: 0 10px 2px 18px;
}
#home #main ul li li { 
	background-image: url(../images/bullet-home2.gif);
}

/* About  */
#about {
	background-image: url(../images/bg-about.gif);
	background-position: top center;
}
#about a:link { 
	color: #AF274B; 
}
#about a:visited { 
	color: #000
}
#about a:hover, #about a:active {  
	text-decoration: none; 
	color: #AF274B
}
#about h1 {
	color: #AF274B;
}
#about #main ul li { 
	list-style-type: none;
	background-image: url(../images/bullet-about.gif);
	background-position: 0 4px;
	background-repeat: no-repeat;
	padding: 0 10px 2px 18px;
}
#twitter {
	margin: 25px 0 25px 0;
}
#linkedin {
	margin: 25px 0 0 0;
}
#badges {
	text-align: center;
}
#kp {
	margin: 0 0 15px 0;
	border: 3px solid #000;
}


/* Portfolio */
#portfolio {
	background-image: url(../images/bg-portfolio.gif);
	background-position: top right;
} 
#portfolio h1 {
	color: #4F428C;
}
#portfolio a:link { 
	color: #4F428C; 
}
#portfolio a:visited { 
	color: #000
}
#portfolio a:hover, #portfolio a:active {  
	text-decoration: none; 
	color: #4F428C
}
#portfolio .thm {
	float: left;
	padding: 0 12px 8px 0;
}

/* Services */
#services {
	background-image: url(../images/bg-services.gif);
	background-position: top left;
}
#services h1 {
	color: #C97C28 ;
}
#services a:link { 
	color: #C97C28; 
}
#services a:visited { 
	color: #000
}
#services a:hover, #services a:active {  
	text-decoration: none; 
	color: #C97C28
}
#services #main ul li { 
	list-style-type: none;
	background-image: url(../images/bullet-serv.gif);
	background-position: 0 4px;
	background-repeat: no-repeat;
	padding: 0 10px 2px 18px;
}
.emph {
	font-weight: bold;
	color: #333;
}
#services #navcontainer a:hover {
	background-color: #E0A05A !important;
}
#services #navcontainer a {
	background-color: #C97C28 !important;
}
#services .source {
	padding: 0 0 0 15px;
	margin-top: -10px;
	text-transform: uppercase;
	font-size: 90%;
}
#services #cl h1 {	
	padding-bottom: 10px;
}
#services #cl h2 {	
	padding: 0 10px 0 0;
	margin: 0;
	width: 190px;
}
#services #cl ul, #services #cl h2 {
	float: left;
}
#services #cl ul {	
	margin-top: 0;
	padding-top: 0;
	width: 230px;
}
#services #sidetestimonial {
	color: #C97C28;
	font: bold 130% "Helvetica Narrow", "Arial Narrow", Verdana, sans-serif;

}

#services #sidetestimonial .attrib {
	text-align: right;
	font-weight: normal;
	margin-top: -10px;
}
#services #sidetestimonial .more {
	font-size: 90% !important;
	margin-top: -10px;
}

.speaking-test {
	border: 1px dashed #C97C28;
	padding: 5px 10px;
	background-color: #fdf8f3;
	clear: both;
	margin-top: 20px;
}
.speaking-test p {
	padding: 0 0 5px 0;
	margin: 0;
}
.speaking-attrib {
	text-align: right;
	font-weight: bold;
}
.wcpic {
	float: right;
	margin: 10px 5px 10px 10px;
	width: 270px;
	font-size: 80%;
}
.wcpic img {
	border: 3px solid #000;

}


/* Resources */
#resources {
	background-image: url(../images/bg-resources.gif);
	background-position: top left;
} 
#resources h1 {
	color: #2D5CA0 ;
}
#resources a:link { 
	color: #2D5CA0; 
}
#resources a:visited { 
	color: #000
}
#resources a:hover, #resources a:active {  
	text-decoration: none; 
	color: #2D5CA0
}
#resources #main ul li { 
	list-style-type: none;
	background-image: url(../images/bullet-res.gif);
	background-position: 0 4px;
	background-repeat: no-repeat;
	padding: 0 10px 2px 18px;
}
#resources #navcontainer a:hover {
	background-color: #5682C2 !important;
}
#resources #navcontainer a {
	background-color: #2D5CA0 !important;
}

/* Contact */
#contact {
	background-image: url(../images/bg-contact.gif);
	background-position: top center;
}  
#contact h1 {
	color: #44A592 ;
}
#contact a:link { 
	color: #44A592; 
}
#contact a:visited { 
	color: #000
}
#contact a:hover, #contact a:active {  
	text-decoration: none; 
	color: #44A592
}
.contact-lab {
	font-weight: bold;
	color: #333;
}
/* Contact Form */

#main .cssform p, #main #security{
	width: 300px;
	clear: left;
	margin: 0;
	padding: 5px 0 8px 0;
	padding-left: 160px; /*width of left column containing the label elements*/
	height: 1%;
}
#main .cssform p.long {
	width: 450px;
	padding-left: 0;
}

#main .cssform label {
	font-weight: bold;
	float: left;
	margin-left: -160px; /*width of left column*/
	width: 135px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

#main .cssform input[type="text"] { /*width of text boxes. IE6 does not understand this attribute*/
	width: 250px;
}

#main .cssform textarea {
	width: 250px;
	height: 80px;
}

/*.threepxfix class below:
	Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
	to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
	margin-left: 3px;
}

#main input.txt, #main textarea.txt, #main select.txt, #main td .attributeinput, #main .attributeinput input {
	color: #000;
	background-color: #fff;
	border: 1px solid #44A592;
	padding: 3px;
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
}

#main input.txt, #main td .attributeinput {
	width: 250px;
} 
#main input.btn, #main #subscribe {
	background-color: #44A592;
	border: 2px solid #1E7665;
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	padding: 2px;
	color: #fff;
	margin: 0;
}
#main .required {
	color: #1E7665;
	font-weight: bold;
}
#main .thanks {
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
}
#main .error {
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	color: #AF274B;
}

/* PHPList only */
td .attributename {
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	padding-bottom: 10px;
}
#main td .attributeinput, #main .attributeinput input {
	color: #000;
	background-color: #fff;
	border: 1px solid #006EA6;
	padding: 3px;
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
}
    /* no border/bg color around radio buttons */
#main td .attributeinput .attributeinput  {
	border: 0 solid #fff !important;
	padding: 0 !important;
	background: transparent !important;
}
table .required, .newsletter .required {
	color: #006EA6 !important;
	font-weight: bold;
}
/* phpList sidebar signup */
.missing { /* for missing fields */
	background-color: #eaf8ff;
	font: bold 120% Verdana, Helvetica, Arial, sans-serif;
	padding: 5px;
	margin: 10px 0;
}
.sidesignup p {
	width: 98%;
	clear: left;
	margin: 0;
	padding: 5px 0 8px 0;
	padding-left: 80px; /*width of left column containing the label elements*/
	height: 1%;
}
.sidesignup label {
	width: 70px; /*width of labels. Should be smaller than left column to create some right margin*/
	font-weight: bold;
	float: left;
	margin-left: -80px; /*width of left column*/
	color: #006EA6;
}
.sidesignup input {
	width: 150px;
	border: 1px solid #006EA6;
	padding: 3px;
	font-size: 110%;
	background-color: #fff;
}
.sidesignup input.but {
	width: 80px;
	background-color: #006EA6;
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	padding: 2px;
	color: #fff;
	margin-left: 80px;
	/* margin: 0; */
}
.presignup {
	font-weight: bold;
	margin: 5px 0;
	padding: 0;
}
.backpriv { /* back issues & privacy */
	font-size: 90%;
}


/* GENERAL */
.clear {
	clear: both;
}