/* 
    Document   : style
    Created on : Jul 21, 2010, 6:22:54 PM
    Author     : Takeshi
    Description:
        HOORA style 
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root {display: block;}
html{height: 100%;}
body{
   margin: 0;
   padding: 0;
   background-color: #f4f2f2;
   height: 100%;
   font-size: 9pt;
   font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
a{
   outline: none;
}
img {
   border:0;
}
.p-height{
   padding-top: 5px;
   margin: 0;
}

#container{
   width: 850px;
   margin: 0 auto 0 auto;
   padding: 0 25px 0 25px;
   position: relative;
}
/* Header dotted_box */
#top img{
   vertical-align: top;
}
/*menubar*/
#area_menu{
   height: 15px;
}
#area_menu a{
   color: gray;
   text-decoration: none;
}
#area_menu a:hover{
   color: #004600;
}
#menu_logo{
   margin-right: 10px;
}
#menubar_left, #menubar_right, #menubar_home{
   list-style:none;
   padding: 0;
   margin: 0;
   font-size: 8pt;
}
#menubar_home{
   color: gray;
   float: right;
   line-height: 1em;
}
#menubar_home li{
   float: right;
   margin-right: 0;
   padding-right: 10px;
   border-right: 4px double #dddbdb;
   line-height: 1em;
}
#menubar_left li h2{
   text-decoration: none;
   line-height: 1em;
   font-size: 8pt;
   font-weight: normal;
   margin: 0;
   padding: 0;
   display: inline;
}
#menubar_left li{
   color: gray;
   float: left;
   margin-right:10px;
   padding-right: 10px;
   line-height: 1em;
}
#menubar_right li{
   float: right;
   margin-left: 10px;
   padding-right: 10px;
   border-right: 1px solid #dddbdb;
   line-height: 1em;
}

/*logo title*/
#title_left h1{
   display: block;
   text-indent: -9999px;
   height: 90px;
   width: 150px;
   padding: 0;
   margin: 0;
   background-image: url('images/title.jpg');
}

#title_left h1 a{
   display: block;
   height: 90px;
   width: 150px;
}
#title_right h2{
   display:block;
   text-indent: -9999px;
   height: 90px;
   width: 140px;
   padding: 0;
   margin: 0;
   background-image: url('images/slogan.jpg');
}
#area_title{
   margin-top: 50px;
   height: 130px;
   overflow: hidden;
}

#title_left{
   float: left;
   height: 90px;
   width: 150px;
}
#title_right{
   float: left;
   margin-left: 50px;
   width: 650px;
}

/**/
#area_hoorademusica{
   margin: 20px 0 20px 0;
   height: 423px;
   background-image:url('images/pic_02.jpg');
}
#title_frame{
   float: left;
   height: 55px;
   width: 151px;
}
#title_frame h1{
   display: block;
   text-indent: -9999px;
   height: 55px;
   width: 151px;
   padding: 0;
   margin: 75px 0 0 27px;
   background-image: url('images/title_index.png');
}
#title_frame h1 a{
   display: block;
   height: 55px;
   width: 151px;
}
/**/
#area_map{
   height: 320px;
}
#hoorademusica_quote{
   width: 150px;
   float: left;
}
/****changes everytime************************/
#pic_1_quote{
   margin-top: 120px;
   font-size: 7pt;
   text-align: right;
   color: #838383;
}
#pic_1_quote a{
   color: gray;
}
#pic_1_quote a:hover{
   color: black;
}
/*********************************************/
#pic_margin{
   margin: 6px 0 0 9px;
}
#hoorademusica_pic{
   width: 650px;
   margin-left: 50px;
   float: left;
   background-image: url('images/logodemusica.gif');
}



/**/
#area_portfolio{
   margin-top: 20px;
   height: 90px;

}
.left_area{
   float: left;
   width: 150px;
}
.left_area h3{
   margin: 0;
   padding: 0;
   font-size: 10pt;
   font-weight: bold;
}
.right_area{
   float: left;
   margin-left: 50px;
   width: 650px;
}

/* submenu area*/
.right_bottoms{
   padding-bottom: 20px;
   border-bottom: 1px dotted gray;
}
.icon_button{
   background-image: url('images/icon_bg.jpg');
   background-repeat: no-repeat;
   padding: 0;
   margin: 0;
   vertical-align: top;
}
.icon_button_not{
   background-image: url('images/icon_bg_not.jpg');
   background-repeat: no-repeat;
   width: 28px;
   height: 28px;
   padding: 0;
   margin: 0;
   vertical-align: top;
}

.submenu_words{
   padding-left: 10px;
   width: 280px;
   vertical-align: top;
}


/*Area concept*/
#area_concept{
   margin-top: 40px;
   height: 75px;
}

h4{
   padding: 0;
   margin: 0;
   font-size: 9pt;
}

.box_space{
   float: left;
   margin-right: 5px;
}

/*Area members*/
#area_members{
   margin-top: 20px;
   height: 300px;
}

.member{
   height: 90px;
   margin-bottom: 10px;
}

.member_name{
   font-weight: normal;
   margin-left: 10px;
}
/* Footer dotted box */
#footer ul{
   list-style:none;
   padding: 0;
   margin: 0;
   font-size: 8pt;
}
.footer_menu_leftfloat{
   color: gray;
   float: left;
}
.footer_menu_rightfloat{
   display: block;
   font-weight: bold;
   float: right;
   width: 40px;
   text-align: center;
   background-color: #909090;
     -webkit-border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -moz-border-radius: 3px;
}
.footer_menu_rightfloat a{
   color: white;
   text-decoration: none;
}
#footer{
   clear:both;
   position: relative;
   bottom: 0;
}
#footer img{
   vertical-align: bottom;
}

/*client page templates*/

.wrapper{
   min-height: 800px;
   height: auto !important;
   height: 800px;
}
.sidebar{
   float: left;
   height: 100%;
   width: 150px;
   text-align: right;
}
.main_window{
   float: left;
   height: 100%;
   margin-left: 50px;
   margin-top: 10px;
   width: 650px;
}
.sidebar h3{
   padding:0;
   margin: 0;
   font-size: 12pt;
   border-bottom: 1px dotted gray;
   vertical-align: top;
}
.sidebar h4{
   padding-top:18px;
   margin: 0;
   clear:both;
}
.sidebar_message{
   font-size: 8pt;
}

.main_window h4{
   line-height: 1.2em;
   border-bottom: 1px dotted gray;
}

.client_pic{
   vertical-align: top;
   width: 250px;
}
.client_message{
   vertical-align: top;
}
.box_space2{
   float: left;
   margin-right: 5px;
   vertical-align: bottom;
}

/* labs*/
.hoora_project_spacing{
   padding-bottom: 40px;
   clear:both;
}

.sanka{
   font-size: 8pt;
   color: #484747;
}
.project_width_i{
   width: 400px;
}
.project_width{
   width: 225px;
   font-size: 8pt;
}

/*mail*/

.mail h4{
   font-weight: normal;
   color: gray;
}
.mail h4 a{
   text-decoration: none;
}

.notready{
   color:silver;
}