/*

Theme Name: Hi-Fai 
Theme URI: http://www.hi-fai.com/
Description: Hi-Fai Interactive - Web Design + Development
Author: Joshua Lee
Author URI: http://www.hi-fai.com/
Tags: hi-fai, web design, oakland 

*/



html { height:100%; font-size:100.01%; }

body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size:14px;
	 background:#242629 url(images/bg/bg_main.gif) left top repeat-x;
	 overflow: -moz-scrollbars-vertical;
	 font-style:normal;
	 font-variant:normal;
	 font-weight:normal;
	 color:#7b7d82;
	 margin:0 35px 0 0;
	 padding:0;
	 }

td, body, div { vertical-align:top; }
img { border:0; display:block; }
td, form { padding:0; margin:0; }
table { border-collapse:collapse; }

p { padding:0; margin:0 0 9px 0; line-height:1.5em; }
.content p { line-height:22px; padding:0 0 3px 0px; display:block; width:525px;  }

h1 a { text-decoration:none; color:#FFF; font-size:24px; font-style:normal; }
h1 span { font-size:11px; letter-spacing: 0em; padding:0 0 0 3px; }

h2 { margin:0; padding:0 0 22px 0; color:#f3f3f3; font-weight:normal; font-size:28px; letter-spacing: -0.04em; }
.containercontent h2 { width:544px; color:#8ca21e; border-bottom:1px solid #aebe61; display:block; letter-spacing:-1px;  margin:0 0 22px 0; padding:10px 0 14px 0; }
.promo h2 {  width:280px; line-height:34px; margin-bottom:0px; padding-bottom:0px; color:white;  }
.containercenter h2 {margin:0; padding: 0 0 17px 0; font-weight: normal; font-size: 26px; letter-spacing: -0.04em; text-decoration:none; border-bottom:none;}
.content h2 a {text-decoration:none; color:#8ca21e; padding-top:2px;}

h3 { font-size:16px; padding:5px 0 10px 0; margin:0; color:#ebedef; font-weight:bold; }
.entry h3, .content h3 { color:#990000; font-size:14px; text-transform:uppercase; margin: 18px 0 10px 0; padding:0;    }
.containercenter h3 { padding:0; margin:17px 0 6px 0;  }

.content .archivepost h3 { font-size:23px; text-transform:none; font-weight:normal; letter-spacing: -1px; padding:0 120px 0 0; margin:0 0 6px 0; }
.content .archivepost h3 a { color:#595b60; text-decoration:none  }
.content .archivepost h3 a:hover { color:#595b60; text-decoration:underline }


h4 { font-size:26px; padding:14px 0 14px 0; margin:0 0 0 -0.07em; color:#76d0ff; font-weight:normal; letter-spacing: -0.04em; }
.sidebar h4, .sidebar2 h4 { color:#8ca21e; }
.containercenter h4 { padding:0; margin:0px 0 17px 0;  }

h5 {	color:#585a60;	font-size:16px;	font-weight:bold;	margin:0;	padding:5px 10px 5px 0;	}
h5 a { color:#585a60; text-decoration:none;}
h5 a:hover { text-decoration:underline;}
h5.sidetitle { color:#8ca21e; font-size:18px; font-weight:bold; border-bottom:1px solid #a8b75b; padding:20px 0 14px 0; margin: 0 13px 0 4px; position:relative; }



.cat {	margin:0;	padding:5px 0 5px 18px;	background:url(images/ico_cat.gif) 0 8px no-repeat;	}
.clear { clear:both;  font-size: 0;  line-height: 0; }
.clearboth { clear:both;  }
.block { display:block;  }

.fl { float:left;}
.fl2 {float:left;  clear:both; width:544px; padding: 0px 0 19px 0px; margin:0; }
.fl2 a {padding: 0 0 0 7px; color:#2895ce }
.fr { float:right;}


/* Headings
----------------------------------------------- */

#header { background:#242629 url(images/bg/bg_header.jpg) 140px top no-repeat; height:110px; }

#logo { width:160px; height:75px; padding:0; background: url(images/logo.png) no-repeat; position:absolute; margin:21px 0 0 32px; }
#logo h1 { text-indent:-9999px; color:#FFF; padding:0; margin:0; }
#logo h1 a { margin:0; padding:0; width:150px; height:75px; display:block;  background:url(images/logo.png) 0 0 no-repeat  }
#logo h1 a:hover { background-position:0 -75px;}
#logo h1 a span { position:relative; z-index:-1 }


/* Menu
----------------------------------------------- */

#menu { width:160px;  padding:5px 0 0 0; margin:0; }
#menu ul { padding:0; margin:0;  }
#menu ul li { padding:0 0 0 7px; margin:0; list-style-type:none; border-bottom:1px dotted #616365; }
#menu ul li.last {  border-bottom:none; }
#menu ul li a { padding:0 0 0 24px; line-height:52px; margin:0; font-size:17px; text-decoration:none; color:#c4c5c6; display:block; background:url(images/bull.gif) 0 18px no-repeat;}
#menu li a:hover { background:url(images/bull.gif) -250px 18px no-repeat; color:#76D0FF; text-decoration:underline;}
#menu li.active a, #menu li.active a:hover {  background:url(images/bull2.jpg) left 50% no-repeat; color:#FFF; }

/* Divs
----------------------------------------------- */


#wrapper { margin: 0 auto;  width: 950px;   } 
#layout1 { height: auto !important; min-height:100%; height:100%; margin:0 auto 0 0; background:url(images/bg/bg_layout1.gif) left top repeat-y; width:950px; }

.containercontent { float:left; width:950px; margin:0; padding:0 0px 0px 0; background: url(images/bg/bg-content.jpg) right top repeat-y; min-height:705px; }


.containerleft { float:left; width:150px; margin:0; padding:0 0 0 30px; }
.containerleft img { margin:0 0 31px 20px; padding:0; }
.containercenter { float:left; width:320px; height:802px; margin:0px 0 0 0px; padding:0; background-image:url(images/bg/bg_layout1.gif); background-color:#2F3134;  }
.containerright { float:left; height:802px; width:450px; margin:0px 0 0 0; padding:0; background-color:#242629; }
.containerright p { padding-bottom:0; margin-bottom:18px;}
.promo { height:460px; background: url(images/promo.jpg) 0 0 no-repeat; padding: 23px 0 0 25px;  }


#stuff { border-top:1px solid #444649; font-size:11px;  margin: 25px 0 0 0;  width:250px; }
#footer { margin: 0 auto;  width:950px; background:url(images/bg/bg_footer.jpg) repeat-y; height:110px;  }


#thanks { color:#979798; width:260px;  float:left; line-height:23px; font-size:11px; padding: 10px 0 0 0; margin: 0 0 0 202px;   }

#links1 { float:right; width:410px; padding: 35px 0 0 0;  }
#links1 a { color:#979798; text-decoration:none; padding: 0 7px 0 8px; }
#links1 a:hover {color:#FFF; }


.blogpost { color:#8f8f91; font-size:12px; margin:0 0 0 0px; padding: 0 20px 0 0; }
.lbluelink a { color:#76d0ff; text-decoration:none; border-bottom:1px dotted #76d0ff; }
.lbluelink a:hover { border-bottom:none; }

#tags {   padding:13px 0 12px 16px; margin:50px 0 0 -22px; font-size:13px; width:500px; }
#tags a { padding: 0 4px;  color:#BBB; text-transform:lowercase;  }

.content { float:left; width:480px; padding:20px 0 37px 32px; background: #F7F7F7; height:100%; border-left:6px solid #E9E9E9; min-height:726px; }
.content .work {  margin:0 0 7px -2px;  padding:2px; border:4px solid #E5E5E5; background:#fff; clear:both; }
.content .pic { float:left; margin:0 20px 0px 0px; padding:5px; border-top:1px solid #dfdfdf; border-left:1px solid #dfdfdf; border-right:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; background:#fff; }
.content li { margin:0; padding:4px 0 4px 6px; font-size:13px; }
.content ul { margin:0; padding:5px 0 25px 19px; }

.sidebar { float:right; width:170px; padding:30px 0 0px 0px; position:relative; }
.sidebar ul { list-style-type:none; padding:0; margin:0 0 40px 0; font-size:12px; }
.sidemenu { min-height:267px; }
.sidebar2 { position:relative; font-size:12px; }
ul.sidebar3 { padding:0px 10px 0 0; }

.menu2 li { margin:0 0 15px 6px; color:#3a3c3f; }
.opinion { background:url(images/quote.gif) left 3px no-repeat; padding:0 16px 0 17px; }


/* Comments
----------------------------------------------- */

.comments { padding:18px 0 0 0; margin:0; }
.comments li { list-style:none; margin:0 0 15px 0; }
.comments li a { display:block; margin:0 0 0 0.6em; }
.wp27comments { list-style-type:none; margin:0; padding:16px 0 0 0; }
.wp27comments img.avatar { display:inline; float:left; margin:0 10px 0 0; }
.wp27comments .fn a, .wp27comments .fn { color:#585a60; font-size:13px; text-decoration:none; font-weight:bold; padding: 20px 0 0 0; }
.wp27comments .comment-meta a, .wp27comments .comment-meta { font-size:9px; padding:1px 0 1px 0; text-decoration:none; color:#585A60; }
.wp27comments .comment-meta a:hover { text-decoration:underline; }
.wp27comments p { margin:0; padding:5px 0 0 0; clear:both; font-size:13px; line-height:1.5em; }
.wp27comments .children { border-left:1px solid #D9D9D9; list-style-type:none; margin:15px 0 0 15px; padding:0 0 0 15px; }
.wp27comments p img { display:inline; border:none; margin:0; padding:0; float:none; }
.wp27comments .depth-1 { border-bottom:1px dotted #D9D9D9; margin:0 0 15px 0; padding:0 0 15px 0; }
.wp27comments .reply { font-size:12px; line-height:1.5em; clear:both; }


/* Comment Form
----------------------------------------------- */

#commentform {}
#commentform input, #commentform textarea { border-top:1px solid #c0c0c0; border-bottom:1px solid #e7e7e7; border-left:1px solid #cacaca; border-right:1px solid #cacaca; background:#FFF url(images/bg/bg_input.gif) top left repeat-x; color:#666; font-size:16px; font-family:arial,sans-serif; padding:3px; }
#commentform #submit { font-size:12px; border:0; background:#5F6A31; color:#EAF2CA; margin:0; padding:5px 10px; }
#commentform #submit:hover { background:#71812C; color:#FFF; cursor:pointer; } 
#commentform textarea { width:473px; margin-bottom:13px;;  }
#commentform p { padding:0; margin:0; }
#commentform p.w230 { padding:0 0 5px 0; }
#commentform p.w230 input { width:230px; }
label { font-size:9px; color:#585A60; display:block; padding:0; margin:0; height:22px; }


/* Search Field
----------------------------------------------- */

#searchform { position:absolute; top:37px; left:759px; font-size:12px; display:none; }
.searchfield { background:#333538 url(images/bg/bg_search.gif) left top no-repeat; border-top:1px solid #171819; border-left:none; border-right:1px solid #212224; border-bottom:1px solid #4d4f51; padding:4px 0 0 21px; height:17px; width:150px; color:#a7a7a7; font-family:"Lucida Grande",Arial,"Bitstream Vera Sans",sans-serif; }
.sbutt { border:none; background:none; color:#FFF; margin:0; padding:0; }


/* Text & Colors
----------------------------------------------- */
.white { color:#ebecec;}
.lblue { color:#76d0ff;}
.gray { color:#585A60;}

.norm { font-style:normal; font-weight:normal;}
.bold { font-weight:bold;}
.italic { font-style:italic;}
.upp { text-transform: uppercase;}
.upp2 { text-transform: uppercase; height:13px; margin:0; padding:0;}
.low { text-transform:lowercase;}

.lh1 { line-height:1em;}
.lh11 { line-height:1.1em;}
.lh13 { line-height:1.3em;}
.lh15 { line-height:1.5em;}
.lh20p { line-height:20px}
.lh25p { line-height:25px; }

/* 9 - 14, 16, 18, 24, 36, 60, 65
----------------------------------------------- */

.f9 { font-size:9px; } .f10 { font-size:10px;} .f11 { font-size:11px;} .f12 { font-size:12px;} .f13 { font-size:13px;} .f14 { font-size:14px;} 
.f16 { font-size:16px;} .f18 { font-size:18px;} .f24 { font-size:24px;} .f36 { font-size:36px;} .f48 { font-size:48px;} .f60 { font-size:60px;} .f65 { font-size:65px;}

.txtnone { text-decoration:none;} 
.txtnone:hover { text-decoration:underline;}
.let03 { letter-spacing: -0.15em; margin:0 0.3em 0 0;}


/* Paddin & Margin
----------------------------------------------- */
.pt35 { padding:35px 0 10px 0;}
.pt15 { padding:15px 0 0 0;}
.pt12 { padding:12px 0 0 0;}
.pt10 { padding:10px 0 0 9px;}
.pt8 { padding:8px 0 0 0;}
.pt7 { padding:7px 0 0 0;}
.pt6 { padding:6px 0 0 0;}
.pt5 { padding:5px 0 0 0;}
.pt4 { padding:4px 0 0 0;}

.pb60 { padding:0 0 60px 0;}
.pb50 { padding:0 0 50px 0;}
.pb40 { padding:0 0 40px 0;}
.pb30 { padding:0 0 30px 0;}
.pb20 { padding:0 0 20px 0;}
.pb15 { padding:0 0 15px 0;}
.pb10 { padding:0 0 10px 0;}
.pb5 { padding:0 0 5px 0;}


.pbt10 { padding: 10px 0 10px 0; }

.pl30 { padding:0 0 0 30px;}
.pl35 { padding:0 0 0 35px;}
.pl20-pr20-pb40 { padding:0 20px 30px 23px;}
.pl20 { padding:0 0 0 20px;}
.pl3 { padding: 0 0 0 3px;}

.pr25 { padding:0 25px 0 0;}
.pr20 { padding:0 20px 0 0;}
.p0 { padding:0;}

.mt20 { margin:20px 0 0 0;}
.mt15 { margin:15px 0 0 0;}
.mt10 { margin:10px 0 0 0;}
.mt5 { margin:5px 0 0 0;}
.mt3 { margin:3px 0 0 0;}


.mb40 { margin:0 0 40px 0;}
.mb30 { margin:0 0 30px 0;}
.mb20 { margin:0 0 20px 0;}
.mb15 { margin:0 0 15px 0;}
.mb12 { margin:0 0 12px 0;}
.mb10 { margin:0 0 10px 0;}
.mb5 { margin:0 0 5px 0;}
.mb3 { margin:0 0 3px 0;}

.ml70 { margin:0 0 0 0px;}
.ml5 { margin:0 0 0 5px;}

.mc { margin:0 auto;}

.m0 { margin:0;}



/* Height & Width
----------------------------------------------- */
.h0 { height:0px;}
.h5 { height:5px;}
.h10 { height:10px;}
.h20 { height:20px;}
.h25 { height:25px;}
.h30 { height:30px;}
.h40 { height:40px;}
.h50 { height:50px;}
.w220 { width:220px;}
.w230 { width:230px;}
.w280 { width:280px; }
.w410 { width:410px;}


/* Borders
----------------------------------------------- */
.b3lgray { border:3px solid #eaeaea;}
.b3dark { border:3px solid #444649;}
.b3 { border:3px solid #d2d2d2;}

.bt1lgray { border-top:1px solid #d9d9d9;}
.bt1dark { border-top:1px solid #444649; padding:6px 0 0 0; margin:16px 0 0 0;}
.bt1dark2 { border-top:1px solid #444649; padding:15px 0 0 20px;}

.br1lgray { border-right:1px solid #d9d9d9;}

.bb1 { border-bottom:1px solid #7f7f7f;}
.bb1dot { border-bottom:1px dotted #505154;}
.bb1dotlgray { border-bottom:1px dotted #d9d9d9;}
.bb1lgray { border-bottom:1px solid #d9d9d9;}
.bbdouble { border-bottom:3px double #b2b2b2;}



/* Align
----------------------------------------------- */
.vtop { vertical-align:top;}
.vmid { vertical-align:middle;}


/* Links
----------------------------------------------- */

a { color:#56AEDE; text-decoration:underline; outline:none; }
a:hover { text-decoration:none; }
.invert { text-decoration:none;}
.invert:hover { text-decoration:underline;}
.rss { color:#FFF; font-size:12px; text-decoration:none; background:url(images/rss.gif) right 50% no-repeat; padding:4px 22px 3px 9px; position:absolute; top:38px; left:695px; font-family:"Lucida Grande",Arial,"Bitstream Vera Sans",sans-serif; display:none; }

.linkgreen { color:#eaf2ca; padding:4px 10px 7px 10px; margin: 0 7px 0 0 ; font-size:12px; background:#5f6a31;   }
.linkgreen:hover { text-decoration:underline; background:#71812c; }

.linkgrey { color:#e3e3e3; padding:4px 10px 7px 10px; margin: 0 7px 0 0 ; font-size:12px; background:#2F3134;   }
.linkgrey:hover { text-decoration:underline; background:#666; }



/* Archive page
----------------------------------------------- */

ul.archive, ul.menu2 { padding:15px 0 0 12px; }
ul.archive li { padding:0 0 7px 0; }


/* Archive page
----------------------------------------------- */

.archivepost {  }
.resplink { position:absolute; text-align:right; width:150px; padding:3px 0 10px 0; margin:0 0 0 330px; }
.resplink2 { position:absolute; text-align:right; width:150px; padding:10px 0 10px 0; margin:0 0 0 330px; }
.archivepost p { padding:0 30px 0 0px; margin:0 0 15px 0; }
.archivepost .info { padding:5px 10px 5px 0; margin:0 10px 0 0; }


/* Misc
----------------------------------------------- */

.absolute { position:absolute; }
.right {  text-align:right; }
.center { text-align:center; }
.both { clear:both; }

blockquote { color:#595b60; font-size:17px; font-style:italic; float:right; width:230px; padding:1px 0 10px 33px; margin:0 0 0 15px; background:url(images/quote2.gif) 1px 6px no-repeat; }
.content  blockquote p { width:230px;  }

.portfolio { float:left; width:580px; padding:20px 0 67px 32px; background: #F7F7F7; height:100%; border-left:6px solid #E9E9E9; min-height:706px; }

.boxgrid { width: 255px; height: 174px; margin:0 18px 15px 0;   float:left;	padding:1px 1px 0px 1px; overflow: hidden; position: relative; }
.boxgrid h3 { margin: 5px 10px 0 10px; padding:0; color:#FFF; font:14pt Arial, sans-serif;   }
.boxgrid a { color:#C8DCE5; }
.boxgrid img { position: absolute; top: 2; left: 2; border: 0;  }
.boxgrid p { padding: 0 10px; color:#afafaf; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif; }
.boxgrid a:hover { padding-top:4px; text-decoration:none; }
.boxcaption { position: absolute; background: #000;	margin-left:4px; height: 74px; width: 249px; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.captionfull .boxcaption {top: 256px; left: 0px; }
.caption .boxcaption { top: 200px; left: 0px; }

.slideshow { height:281px; overflow:hidden; margin-bottom:2px; background:#3A3C3F; }

.sig { line-height:22px; width:350px; border-top:1px solid #999999; margin-top:30px; padding: 20px 0 0 0; } 

.alignleft { float:left; padding:2px; border:1px solid #999999; margin: 0 12px 0 0; }

/* Pagenavi
----------------------------------------------- */

.wp-pagenavi { margin: 20px 0 40px 0; text-align: left;  }
.wp-pagenavi a { margin-left:4px;   }
.wp-pagenavi a:link,
.wp-pagenavi a:visited { display: inline; text-decoration: none; background: #efefef;color: #777; padding: 4px 8px; border:1px solid #ccc; }
.wp-pagenavi .current, 
.wp-pagenavi .on,
.wp-pagenavi a:hover { padding: 4px 8px; background: #ddd; color:#777; text-shadow: #fff 0px 1px 0px; border:1px solid #ccc;  }
.wp-pagenavi .extend, 
.wp-pagenavi span.pages { margin-right:4px; background: #efefef;color: #777; padding: 4px 8px; text-shadow: #fff 0px 1px 0px; border:1px solid #ccc;}


/* Misc
----------------------------------------------- */

a:active { outline: none; }
a:focus { -moz-outline-style: none; }