/* Ethiopian Coffee Network: Screen CSS */

/******* PAGE LAYOUTS *******/

/* ----- Container ----- */
html, body {margin:0; padding:6px 0; background-color:#222; color:#111; font:9pt Verdana, Arial, Helvetica, sans-serif; line-height:14pt; text-align:center;}
#container {position:relative; width:750px; margin:0 auto; padding:5px; background-color:#FFF; border:1px solid #000; text-align:left;}

/* ----- Header ----- */
#header {position:relative; height:75px; width:100%; background-color:#3D0000; margin-bottom:3px;}
#t-header {position:absolute; top:15px; left:12px; height:60px; width:380px; background:transparent url("../images/header_title.jpg") no-repeat;}
#l-header {position:absolute; top:14px; left:490px; height:48px; width:234px; background:transparent url("../images/header_logo.jpg") no-repeat;}
#header h1, #header h2 {margin:0;}

/* ----- Navigation ----- */
#nav {position:relative; height:30px; width:100%; background-color:#674C2D;}
#nav ul {margin:0; padding:4px 0 0 10px; list-style:none;}
#nav li {margin-right:15px; display:inline;}
#nav img {border:0;}

/* ----- Navigation - About ----- */
#nav_about {position:relative; margin-top:20px;}
#nav_about ul {margin:0; padding:0;}
#nav_about li {margin-left:16px; list-style:square;}
#nav_about a {color:#222;}

/* ----- Navigation - Licensing ----- */
#nav_licensing {position:relative; margin-top:20px;}
#nav_licensing ul {margin:0; padding:0;}
#nav_licensing li {margin-left:16px; list-style:square;}
#nav_licensing a {color:#222;}

/* ----- Navigation - Media ----- */
#nav_media {position:relative; margin-top:20px;}
#nav_media ul {margin:0; padding:0;}
#nav_media li {margin-left:16px; list-style:square;}
#nav_media a {color:#222;}

/* ----- Navigation - Sources ----- */
#nav_sources {position:relative; margin-top:20px;}
#nav_sources ul {margin:0; padding:0;}
#nav_sources li {margin-left:16px; list-style:square;}
#nav_sources a {color:#222;}

/* ----- Introduction ----- */
#intro {position:relative; width:100%; margin-bottom:20px;}
#introtext {position:absolute; top:30px; left:360px; width:350px;}
#intro h3 {margin:0;}
h3#i-home {background:transparent url("../images/home_intro.jpg") no-repeat; height:85px;}
h3#i-about {background:transparent url("../images/about_intro.jpg") no-repeat; height:55px;}
h3#i-licensing {background:transparent url("../images/licensing_intro.jpg") no-repeat; height:30px;}
h3#i-faq {background:transparent url("../images/faq_intro.jpg") no-repeat; height:55px;}
h3#i-media {background:transparent url("../images/media_intro.jpg") no-repeat; height:55px;}
h3#i-sources {background:transparent url("../images/sources_intro.jpg") no-repeat; height:55px;}

/* ----- Content ----- */
#content {position:relative;}
.c-narrow {width:550px; margin:0 100px;}
.c-normal {width:650px; margin:0 50px;}
.c-wide {width:720px; margin:0 15px;}
#content h3 {margin:0;}
h3#c-home {background:transparent url("../images/home_content.jpg") no-repeat; height:40px;}
h3#c-about {background:transparent url("../images/about_content.jpg") no-repeat; height:25px;}
h3#c-about2 {background:transparent url("../images/about2_content.jpg") no-repeat; height:25px;}
h3#c-about3 {background:transparent url("../images/about3_content.jpg") no-repeat; height:25px;}
h3#c-about4 {background:transparent url("../images/about4_content.jpg") no-repeat; height:25px;}
h3#c-about5 {background:transparent url("../images/about5_content.jpg") no-repeat; height:25px;}
h3#c-about6 {background:transparent url("../images/about6_content.jpg") no-repeat; height:25px;}
h3#c-about7 {background:transparent url("../images/about7_content.jpg") no-repeat; height:25px;}
h3#c-about8 {background:transparent url("../images/about8_content.jpg") no-repeat; height:25px;}
h3#c-about8-a {background:transparent url("../images/about8_content_a.jpg") no-repeat; height:40px; margin-top:10px;}
h3#c-licensing {background:transparent url("../images/licensing_content.jpg") no-repeat; height:40px;}
h3#c-licensing2 {background:transparent url("../images/licensing2_content.jpg") no-repeat; height:25px;}
h3#c-licensing3 {background:transparent url("../images/licensing3_content.jpg") no-repeat; height:25px;}
h3#c-licensing4 {background:transparent url("../images/licensing4_content.jpg") no-repeat; height:25px;}
h3#c-profile {background:transparent url("../images/licensing_profile.jpg") no-repeat; height:25px; border-bottom:1px solid #6D0000; padding-bottom:6px;}
h3#c-faq {background:transparent url("../images/faq_content.jpg") no-repeat; height:25px;}
h3#c-media {background:transparent url("../images/media_content.jpg") no-repeat; height:25px;}
h3#c-media-a {background:transparent url("../images/media_content_a.jpg") no-repeat; height:40px; margin-top:20px;}
h3#c-media-b {background:transparent url("../images/media_content_b.jpg") no-repeat; height:40px; margin-top:20px;}
h3#c-media2 {background:transparent url("../images/media2_content.jpg") no-repeat; height:25px;}
h3#c-media3 {background:transparent url("../images/media3_content.jpg") no-repeat; height:25px;}
h3#c-media4 {background:transparent url("../images/media4_content.jpg") no-repeat; height:25px;}
h3#c-contacts {background:transparent url("../images/contacts_content.jpg") no-repeat; height:25px;}
h3#c-sources {background:transparent url("../images/sources_content.jpg") no-repeat; height:25px;}

/* ----- Footer ----- */
#footer {position:relative; width:100%; margin-top:50px; border-top:2px solid #3D0000;}
#footer p {font-size:8pt; text-align:center; margin:5px 0;}
#footer a {color:#3D0000;}

/******* STYLES AND BOXES *******/

/* ----- Heading image replacement ----- */
h1.swap span {display:none;}
h2.swap span {display:none;}
h3.swap span {display:none;}
h4.swap span {display:none;}
h4 {color:#222;}
a.swap span {display:none}

/* ----- Important note ----- */
/* .redbox {border:1px solid #BF0000; padding:2px 6px; font-size:8pt; color:#BF0000;} */
.redbox {border-top:1px solid #BF0000; border-bottom:1px solid #BF0000; padding:2px 4px; font-size:8pt; color:#BF0000;}

/* ----- Link styles ----- */
a:link, a:visited {text-decoration:none; color:#9D0000;}
a:active, a:hover {text-decoration:underline;}
a.red {color:#9D0000; text-decoration:underline;}
a img {border:0;}

/* ----- Page links ----- */
.right {text-align:right;}
.center {text-align:center;}

/* ----- About ----- */
table#tmstatus th {padding:2px 5px; background-color:#444; color:#FFF;}
table#tmstatus td {width:120px; padding:3px 5px; border-bottom:1px solid #666;}

table#scmembers th {padding:2px 5px; background-color:#444; color:#FFF;}
table#scmembers td {padding:3px 5px; border-bottom:1px solid #666; vertical-align:top;}
table#scmembers td#col1 {width:320px;}
table#scmembers td#col2 {width:230px;}

.quote {padding:5px 0; border-top:1px dotted #222; border-bottom:1px dotted #222;}
.quote strong {color:#222;}
.quote p {margin:6px 0;}

table#support {margin-top:10px;}
table#support td {vertical-align:top; padding:10px 0;}
table#support td#col1 {width:150px; padding-top:15px;}
table#support td#col2 {border-bottom:1px dotted #222;}

/* ----- Licensing ----- */
.agreements {position:relative; margin:10px 0 10px 50px;}
.agreements img {position:absolute; top:0; left:-50px;}
.agreements a {color:#9D0000;}
.sep {margin-left:50px;}

table#profiles th {padding:2px 5px; background-color:#444; color:#FFF;}
table#profiles td {padding:2px 5px; border-bottom:1px solid #666; vertical-align:top;}
table#profiles td#col1 {width:120px;}
table#profiles td#col2 {width:400px;}

img#profile {float:left; margin:15px 25px 10px 0;}

/* ----- FAQ's ----- */
.faq {position:relative; margin:10px 0 20px 30px;}
.faq img {position:absolute; top:0; left:-30px;}
.faq a {color:#9D0000;}
.answer {display:block;}
.answer {margin-top:-2px; line-height:13pt;}
#showhide {position:absolute; top:1px; left:530px;}
#showhide a {color:#222;}

/* ----- In the media ----- */
.voices {padding:5px 0; border-bottom:1px dotted #222;}
.voices strong {color:#222;}
.voices p {margin:6px 0;}

.media {padding:5px 0; border-bottom:1px dotted #222;}
.media strong {color:#222;}
.media p {margin:6px 0;}

/* ----- Press releases ----- */
.press {position:relative; margin:10px 0 10px 50px;}
.press img {position:absolute; top:0; left:-50px;}
.press a {color:#9D0000;}
.sep {margin-left:50px;}