/* 
Theme Name: Blue-Ribbon
Theme URL: http://www.j3studio.net/portfolio/
Description: Blue-Ribbon is a theme created for Blue Ribbon Fish Co. Graphics by <a href="http://www.j3studio.net/about/" title="Scott Garber">Scott Garber</a>, Coded &amp; developed by <a href="http://www.j3studio.net/about/" title="Jarot Syahputro">Jarot Syahputro</a>
Author: Jarot Syahputro
Author URI: http://www.djarot.com
Version: 1.0

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

Changelog:
  v1.0 - 08.02.09 : First Release of Blue-Ribbon theme.
*/

body {
  margin:0;
  color: #FFF;
  font-size: 12px;
  font-family: Arial;
}
.bdhome { background:#21005f url(images/bd.gif) 0 0 repeat-x;}
.bd { background:#21005f url(images/bd.gif) 0 -38px repeat-x;}

#wrap, #wrapp, #h3ad, #home, #home h1, #content, #footer, #f00ter {width:900px;}
#wrap, #wrapp, #hdr h1, #h3ad, #home, #content, #footer, #f00ter {margin:0 auto;}
#wrap { background:url(images/bd_fish.jpg) 0 0 no-repeat; padding:0;}
#wrapp { background:url(images/bd_fish.jpg) 0 66px no-repeat; padding:0;}

/************************
  GLOBAL
************************/
.clear, #subs, #page-links, .fValidator-msg {clear:both;}
br {line-height:1px;}
#navh a, #nav a, #hdr h1 a, #header h1 a, #home h1, #fram3 h2 a, #repo p.clear, 
#main-title, #mreport h1, #mreport p.clear, #main .ttl-mrpo {text-indent:-9000px; }
#navh li, #nav li,  #hdr h1, #header h1, #fram3 h2, #main div.mrpo {overflow:hidden;}
h1, h2, h3, h4, h5 {margin:0; padding:0;}
.aright {float:right;}
.aleft {float:left;}
.acenter {text-align:center;}

/************************
  HYPERLINKS & COLORS
************************/
a, #repo span a:hover { color:#FFF; }
a:hover, #sidebar a:hover, #sidebar li a.thisp, #page-links, #sidec0nt, #sidec0nt input.sbmt { color:#21005f; } /* Dark Purple */
#navh li ul li a, #nav li ul li a, #sidebar a {color:#9f001c;}
a, #footer a:hover, #f00ter a:hover {text-decoration:none;}
#sidebar li a.this, #sidebar h2 a.this {text-decoration:underline; font-style:italic;}

#repo a.more-link, .pr0d a.more-link {color:#f5ff1f; margin:0; border-bottom:2px solid #55404d;}
#repo a.more-link:hover {border:none;}

#mreport a.more-link, #page-links a, .fValidator-msg, #sidebar li a.thisp:hover {color:#9f0022; margin:0; } /* Dark Red */
a.more-link, .pr0d a.more-link {border-bottom:2px solid #a5b2d4;}
a.more-link:hover {border:none;}
.rd {color:#9f0022;}
.gr {color:#6C3;}


/************************
  HEADER
************************/
#hdr, #header { width:100%; margin:0;}
#hdr {
  background:url(images/hdrl.gif) 0 0 no-repeat;
  height:207px;
}
#header {
  background:url(images/hdrl.gif) 0 -38px no-repeat;
  height:142px;
}
#h3ad {/*position:relative;*/}

#hdr h1, #hdr h1 a { text-align:center; height:207px; background:url(images/hdr.gif) center 54px no-repeat; padding:0; }
#hdr h1 a, #header h1, #header h1 a {float:left;}
#header h1, #header h1 a {width:253px; height:142px; background:url(images/hdr2.gif) 0 0 no-repeat; padding:0; margin:0; }
#hdr span, #header span {float:right; width:22px; }
#hdr span {height:207px; background:url(images/hdrr.gif) 0 0 no-repeat;}
#header span {height:142px; background:url(images/hdrr.gif) 0 -38px no-repeat;}

/* NAV */
#hdr h1, #hdr h1 a, #he4d {margin:0 auto; width:519px; }

#navh, #nav {
  width:519px;
  height:38px;
  padding:0;
  position:absolute;
  text-align:center;
}
#navh {
  margin:0 auto 16px;
  background: url(images/nav.gif) 0 0 no-repeat;
}
#nav {
  margin:64px 54px 0 327px;
  background: url(images/nav.gif) 0 0 no-repeat;
}
#navh li, #navh a, #nav li, #nav a { display:block; text-align:center; vertical-align:center;}
#navh li, #nav li { float:left; list-style:none; display:inline; margin:0; }
#navh li a, #nav li a { padding:10px 0; }


#hom a {width:43px; }
#pro a {width:80px; }
#rep a {width:111px; }
#dis a {width:94px; }
#abo a {width:76px; }
#for a {width:55px; }
#con a {width:60px; }
#hom a:hover, #hom a.this { background:url(images/nav.gif) 0 -38px no-repeat; }
#pro a:hover, #pro a.this { background:url(images/nav.gif) -43px -38px no-repeat;}
#rep a:hover, #rep a.this { background:url(images/nav.gif) -123px -38px no-repeat;}
#dis a:hover, #dis a.this { background:url(images/nav.gif) -234px -38px no-repeat;}
#abo a:hover, #abo a.this { background:url(images/nav.gif) -328px -38px no-repeat;}
#for a:hover, #for a.this { background:url(images/nav.gif) -404px -38px no-repeat;}
#con a:hover, #con a.this { background:url(images/nav.gif) -459px -38px no-repeat;}
#navh li ul, #nav li ul { margin:0; padding:0 0 30px 0; list-style-type:none; background:url(images/navul.png) 0 bottom repeat-x;}
#navh li ul li, #nav li ul li { margin:0; padding:0; float:none; text-transform:uppercase; font-size:10px; font-family:Tahoma; font-weight:bold;}
#navh li ul li a, #nav li ul li a { display:block; background-image:none; padding:5px 0; text-indent:1px;}
#navh li ul li a:hover, #nav li ul li a:hover, #navh li ul li a.this, #nav li ul li a.this { color:#21005f; background-image:none;}

/************************
  CONTENT
************************/
#home {padding:0;}
#home h1 {float:left; height:95px; margin:0 0 35px 0; padding:0; background:url(images/homeh1.gif) center 0 no-repeat;}
#repo {
  float:left; 
  width:180px; 
  height:230px; 
  margin:0; 
  padding:90px 0 0 44px; 
  background:url(images/ttl-repo.gif) 35px 0 no-repeat; 
}
#repo, #subs input, #mreport {font: normal 10px Verdana;}
#repo span, #mreport span {float:right; color:#9f0022; }

#repo p.clear, #mreport p.clear {margin:0;padding:0; float:left;}
#fram3 { float:right; width:658px;}
#fram3 div {
  width:658px; 
  height:265px; 
  z-index:100;
  background:url(images/fram3.png) 0 0 no-repeat;
}
#fram3 h2, #fram3 h2 a {float:left; width:190px; height:260px;}
#fram3 h2 {margin:0 0 0 22px; padding:0;}
#dist, #shel, #seaf {
  position:relative;
  float:right;
  height:186px; 
  margin:42px 0 0 0; 
  padding:0; 
  /*border:1px solid #F00;
  overflow:hidden;*/
}
#dist { width:218px; }
#shel { width:200px; }
#seaf { width:208px; }
#box1, #box2, #box3, #fram3 div { position:absolute; }
#dist img, #shel img, #seaf img {
  position:absolute;
  display:block;
  border:none;
}
#dist img, #shel img {width:180px; height:180px;}

#subs {background:url(images/subs.png) 0 10px no-repeat; margin:0 0 0 0; padding:28px 0 0 3px; height:30px; }
#subs input {float:left; background:transparent; border:none;}
#subs input#em {width:150px;  }
#subs input#sbmt {width:25px; height:20px; vertical-align:middle; }
#content {padding:0;}
#main {float:left; width:580px; margin:0; padding:0 0 0 25px; }
#main h1 {margin-bottom:10px;}

#main div.pr0d {padding: 0 0 0 80px; }
#main div.pr0d p {font-size:14px; line-height:20px; text-align:justify;}

#main div.mrpo {
  background:url(images/mrpo.jpg) 0 0 no-repeat;
  width:407px;
  height:274px;
  margin:124px 0 0 67px;
  padding:5px 20px 20px;
  color:#9f0022;
  font-family:Verdana;
  font-size:11px;
  line-height:12px;
  position:relative;
  overflow:visible;
}
#main .date {color:#21005f; font-weight:bold;}
#main .entry .date {color:#a5b2d4; font-weight:bold;}

#main .ttl-mrpo {
  position:absolute; 
  width:124px; 
  height:73px; 
  background:url(images/ttl-mrpo.jpg) 0 0 no-repeat; 
  font-size:10px;
  top:-66px; left:-32px;
}
#page-links { float:right;}
#main div.entry {padding:0; margin:40px 55px 20px 27px; font-size:18px; text-align:justify; line-height: 20px;}
.entry h1 {font-size:16px;}

/* TITLE PAGES */
#main-title {height:45px; margin:0 0 20px 0;}
.tproducts {background:url(images/title_products.gif) 0 0 no-repeat;  }
.tdistrib {background:url(images/title_distrib.gif) 0 0 no-repeat; }
.tcontact {background:url(images/title_contact.gif) 0 0 no-repeat; }
.tabout {background:url(images/title_about.gif) 0 0 no-repeat; }
.tforms {background:url(images/title_forms.gif) 0 0 no-repeat; }
.thistory {background:url(images/title_history.gif) 0 0 no-repeat; }
.tmission {background:url(images/title_mission.gif) 0 0 no-repeat; }
.tfmarket {background:url(images/title_fmarket.gif) 0 0 no-repeat; }
.tdirmap {background:url(images/title_dirmap.gif) 0 0 no-repeat; }
.theadsup {background:url(images/title_headsup.gif) 0 0 no-repeat; }
.tspecials {background:url(images/title_specials.gif) 0 0 no-repeat; }
.t404 {background:url(images/title_404.gif) 0 0 no-repeat; }

.tricols {
  float:left; 
  width:145px; 
  margin:10px 0 0 0; 
  padding:0;
  font-size:14px;
  list-style:none;
}
.tricols li {padding:5px 0;}

/************************
  SIDEBAR
************************/
#sidebar {
  float:left;
  width:254px;
  min-height:629px;
  background:url(images/side.gif) 0 0 no-repeat;
  margin:0;
  padding:0;
  position:relative;
  color:#21005f;
  /*border:1px solid #F00;*/
}
#sidebar h2 {font-size:16px; text-transform:uppercase; color:#9f0022; margin:0; padding:0;}
#sidebar ul {padding:0;}
#sidebar li {list-style:none; margin:0;}

#sidebar ul.prod { margin:15px 15px 0 45px; }
#sidebar ul.prod li { padding:0 0 10px 0; margin:0; font-size:14px; font-weight:bold; text-transform:uppercase;}

#sidebar ul.prod li ul { margin:5px 15px 0 25px;}
#sidebar ul.prod li ul li { padding:0 0 5px 0; margin:0; font-size:12px; font-weight:bold; text-transform:uppercase;}


#sidebar ul.mrpoul {margin:5px 20px 0 25px; }
#sidebar ul.mrpoul li { padding:15px 0; margin:0; font-size:11px; border-bottom:1px solid #a5b2d4;}

#sidebar h2.ab0ut {margin:20px 15px 0 25px; padding:0;}
#sidebar ul.ab0ut, #sidebar ul.f0rms {margin:5px 20px 0 25px; }
#sidebar ul.ab0ut li { padding:15px 0 15px 20px; margin:0; font-size:14px; font-weight:bold; text-transform:uppercase;}
#sidebar ul.f0rms li { padding:5px 0 5px 25px; margin:0; font-size:14px; }

#sidebar div.c0nt {margin:0 15px 0 25px;}

#mreport { 
  position:absolute; 
  bottom:0; 
  width:196px; 
  height:246px;
  margin:0 0 18px 23px;
  padding:0 10px;
  
  /*border:1px solid #F00;*/
  background:url(images/repm.png) 0 bottom no-repeat;
}
#mreport h1 {width:134px; height:83px; background:url(images/repm-h1.png) 0 0 no-repeat; font-size:10px; padding:0; margin:0;}
#mreport #subs {background:url(images/subs2.png) 0 10px no-repeat; margin:0 0 0 8px; padding:28px 0 0 3px; height:30px; }

/************************
  FOOTER
************************/
#footer, #f00ter {
  text-align:center;
  font: normal 11px Arial;
  line-height:20px;
  height:120px;
}
#f00ter p {float:right; width:647px;}
#footer a:hover, #f00ter a:hover {color:#f5ff1f;}


/* FORM */

#commentblock {margin:0; padding:0 0 20px 20px; }
#commentblock label {width:150px; float:left; margin-top:10px;}
#commentblock input, #commentblock textarea {
  background:#FFF; 
  border:0; 
  margin:10px 5px 3px; 
  padding:5px;
 	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
  width:260px;
}
#commentblock input#security_code {width:90px; margin:16px 10px 6px 3px; font-size:22px; font-weight:bold; padding:6px 3px; }
#commentblock input.sbmt {width:96px; font-weight:bold; margin-top:10px; cursor:pointer; }
#commentblock label.b {padding:6px 0 6px 2px; cursor:crosshair; background:url(images/captcha.gif) 0 4px no-repeat;}
#commentblock div.fValidator-msg {font-size:11px; text-align:left; vertical-align:top; clear:both; line-height:13px; padding:0 0 0 154px; }
#commentblock div.c0de {padding:0 0 0 154px;color:#f5ff1f; width:271px; font-size:11px; line-height:13px;}
.f0rm { /*background:url(images/bd_fish.jpg) 0 0 no-repeat; */font-size:14px; text-align:justify; line-height: 20px; color:#FFF; border:1px solid #21005f;}

#sidec0nt {font-size:11px; margin:5px 15px 0 25px; border:0;}
#sidec0nt label {width:90px; float:left; }
#sidec0nt input, #sidec0nt textarea {
  border:1px solid #a5b2d4; 
  margin:1px 1px 1px; 
  padding:2px;
 	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
  width:106px;
  font-size:11px;
  font-family:Arial;
}
#sidec0nt input.sbmt {
  width:104px; 
  margin-top:10px; 
  font-weight:bold; 
  cursor:pointer; 
  background:#FFF; 
 	-moz-border-radius: 12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}
#sidec0nt form#exA div.fValidator-msg {display:none;}
/************************
  MEDIABOX
************************/
#mbOverlay {
	position: absolute;
	z-index: 9998;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}

#mbOverlay.mbOverlayFF { background: transparent url(images/80.png) repeat;}
#mbOverlay.mbOverlayIE { background: transparent url(images/50.gif) repeat;}

#mbCenter, #mbBottomContainer {
	position: absolute;
	z-index: 9999;
	left: 50%;
	overflow: hidden;
	background-color: #dfe8ff;
   	-moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;

}

.mbLoading { background: url(images/WhiteLoading.gif) no-repeat center; }

#mbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #dfe8ff;
	background-repeat: no-repeat;
/* Sets the style for inline content, if no style is given	*/
	font-family: Arial;
	line-height: 19px;
	font-size: 12px;
	color: #000;
	text-align: left;
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-khtml-border-top-left-radius: 7px;
	-khtml-border-top-right-radius: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;

}


#mbImage a, #mbImage a:link, #mbImage a:visited { color: #ddd; } /*	Sets the style for inline content, if no style is given	*/
#mbImage a:hover, #mbImage a:active { color: #fff; } /*	Sets the style for inline content, if no style is given	*/

#mbBottom {
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;
	font-size: 12px;
	color: #666;
	text-align: left;
	border: 10px solid #dfe8ff;
	border-top-style: none;
	-moz-border-radius: 0 0 7px 7px;
	-webkit-border-bottom-left-radius: 7px;
	-webkit-border-bottom-right-radius: 7px;
	-khtml-border-bottom-left-radius: 7px;
	-khtml-border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

#mbTitle {
	display: inline;
	color: #000;
	font-weight: bold;
	line-height: 20px;
	font-size: 12px;
}

#mbNumber {
	display: inline;
	color: #666;
	line-height: 14px;
	font-size: 10px;
}

#mbCaption {
	display: block;
	color: #666;
	line-height: 14px;
	font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
	display: block;
	float: right;
	height: 20px;
	width: 65px;
	background: transparent url(images/WhiteClose.gif) no-repeat center;
	margin: 0;
	outline: none;
}

#mbPrevLink { width: 83px; background: transparent url(images/WhitePrevious.gif) no-repeat center; }
#mbNextLink { width: 54px; background: transparent url(images/WhiteNext.gif) no-repeat center; }
#mbCloseLink { width: 65px; background: transparent url(images/WhiteClose.gif) no-repeat center; }

#mbError {
	position: relative;
	top: 30%;
	font-family: Arial;
	line-height: 19px;
	font-size: 12px;
	color: #000;
	text-align: center;
	border: 10px solid #700;
	padding: 20px 10px 30px;
	margin: auto;
}