/* ===================================================================== 

CSS Information

Site URL:    http://www.personal-media.co.jp/
File name:   main.css
Summary:     common styles
Created:     2009-08-04
Last update: 2009-08-04 by kubo
Auther:      KUBO Hiroshi
Copyright:   (c) 2009 Personal Media Corp.

Order of description

__default_style_clear
__wrap     (div#wrap)
__header   (div#header)
__contents (div#contetns)
__footer   (div#footer)
__clearfix (.clearfix)
__misc
__topicpath (ul#topicpath)

===================================================================== */


/* ===================================================================== 
  __Default_style_clear
===================================================================== */

@import url('reset-min.css');
@import url('fonts-min.css');
@import url('base-min.css');

h1{
    margin: 0px 0px 24px 0px;
    padding: 5px 0px 5px 15px;
    font-size: 197%; /* 26 px */
    font-weight: bold;
    border-left: 7px solid #808080;
}

h2{
    margin: 20px 0px 10px 0px;
    padding: 5px 5px 3px 10px;
    border-bottom: solid 1px #303030;
    background-color: #ddd;
    font-size: 116%; /* 15px */
    line-height: 133%;
    font-weight: bold;
}

h3{
    font-weight: bold;
    padding: 5px;
    margin-bottom: 5px;
    background-color:#eee;
    border-bottom:#a0a0a0 1px solid;
}


img.btn,
img.pdf {
	vertical-align: top;
        position:relative;
        top:-1ex;
}

/* ===================================================================== 
  __wrap
===================================================================== */

div#wrap{
    width: 700px;
}


/* ===================================================================== 
  __header
===================================================================== */

div#header{
    top:75px;
    width:700px;
    height:35px;
    position:absolute;
}



div#header ul {
    top:54px;
    left:0px;
    margin:0px;
}

div#header ul li{
    display:inline;
}

/* ===================================================================== 
  __contents
===================================================================== */



div#contents_top,
div#contents{
    width:700px;
    margin-bottom:2ex;
    padding-top:130px;
    background: #ffffff url("../img/webshopkey.gif") no-repeat left top;
}

div#contents_top{
    padding-top:70px;
}

#contents ul{
  margin-top:10px;
  padding-left:3ex;
}

#contents_top ul
{
  margin-top:10px;
  padding-left:100px;
}

#contents_top ul li,
#contents ul li{
  background: url("../img/arrow.gif") left 5px no-repeat;
  padding-left: 12px;
  padding-bottom: 10px;
}

#contents ul li ol li{
  background: none;
  padding-left: 0px;
  padding-bottom: 10px;
}

#contents_top ul,
#contents dl,
#contents ul{
  margin:1ex 0px 3ex 2ex;
}

#contents table {
  margin:1ex 0px 3ex 4ex;
}

#contents table,
#contents table tr,
#contents table td {
  border:#a0a0a0 1px solid;
}

#contents p{
  margin:0px 0px 2ex 2em;
}

.prodboxR,
.prodboxL{
    float:left;
    width:340px;
    margin:10px 0px;
    padding:0px;
    position:relative;
    overflow:hidden;
}

.prodboxR{
    margin-left:9px;
}
.prodboxL{
    margin-right:9px;
}

div#contents div.prodboxR p,
div#contents div.prodboxL p{
    padding-left:10px;
    margin-left:0px;
    margin:0px;
}

div#contents div.prodboxR ul,
div#contents div.prodboxL ul{
    margin:0px;
    padding:0px 0px 0px 10px;
    bottom:5px;
    right:10px;
    text-align:right;
}

div#contents div.prodboxR ul li,
div#contents div.prodboxL ul li{
    margin:0px;
    padding:0px 0px 0px 10px;
    display:inline;
}


.prodbox3CR a,
.prodbox3R a,
.prodbox3L a,
.prodbox3C a{
    background-color:#ffffff;
}

.prodbox3C{
    float:left;
    width:218px;
    height:60px;
    margin:10px 20px;
    padding:0px;
/*    border:#a0a0a0 1px solid; */
    position:relative;
    overflow:hidden;
}

.prodbox3R,
.prodbox3L{
    float:left;
    width:218px;
    height:60px;
    margin:10px 0px;
    padding:0px;
/*    border:#a0a0a0 1px solid; */
    position:relative;
    overflow:hidden;
}

.prodbox3CR{
    float:left;
    width:458px;
    height:60px;
    margin:10px 0px 10px 20px;
    padding:0px;
/*    border:#a0a0a0 1px solid; */
    position:relative;
    overflow:hidden;
}

div#contents div.prodbox3CR p,
div#contents div.prodbox3C p,
div#contents div.prodbox3R p,
div#contents div.prodbox3L p{
    padding-left:10px;
    margin-left:0px;
    margin:0px;
}

div#contents div.prodbox3CR h3,
div#contents div.prodbox3L h3,
div#contents div.prodbox3C h3,
div#contents div.prodbox3R h3{
    margin-top:0px;
}


div#contents div.prodbox3C ul,
div#contents div.prodbox3R ul,
div#contents div.prodbox3L ul{
    margin:0px;
    padding:0px 0px 0px 10px;
    position:absolute;
    bottom:5px;
    right:10px;
}

div#contents div.prodbox3CR ul{
    margin:10px 0px 0px 0px;
}

div#contents div.prodbox3CR ul li{
    margin:0px 5px 5px 0px;
    padding:0px 0px 0px 10px;
}

div#contents div.prodbox3C ul li,
div#contents div.prodbox3R ul li,
div#contents div.prodbox3L ul li{
    margin:0px;
    padding:0px 0px 0px 10px;
}


.fixframe{
    height:250px;
    border:1px #cccccc solid;
}

.fixframe2{
    height:300px;
    border:1px #cccccc solid;
}

.fixframe2 h3{
    height:5ex;
    border:1px #cccccc solid;
    margin-top:0px;
    border-top:none;
    border-left:none;
    border-right:none;
}

.fixframe2  img{
    margin-left:6px;
}

.top_sep{
    margin-top:100px;
}

.right{
    text-align:right;
}

div#contents  p.lefttop{
    margin-left: 0px;
    margin-top: 20px;
}

object{
    margin-top:20px;
    margin-bottom:20px;
    margin-left:80px;
    *margin-left:150px;
}

ul.flat{
    text-align:right;
    padding-right:2em;
}

ul.flat li{
    display:inline;
}

/* ===================================================================== 
  __footer
===================================================================== */

div#footer{
    width:700px;
    height:35px;
    border: #d0d0d0 1px solid;
}

p#footitem{
    top: 10px;
    right: 10px;
}

p#copy{
	padding: 10px 0px 10px 10px;
}

/* ===================================================================== 
  __clearfix
===================================================================== */


.clearfix:after{
    content: ".";
    display: block;
    height: 0px;
    clear:both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/* ===================================================================== 
  __misc
===================================================================== */


a.url{
    font-family: Courier, Monospaced;
}

p.quote,
div.quote,
div#company{
    margin: 20px 0px 20px 30px; 
    border-left:15px solid #d0d0d0;
    padding:10px 0px 10px 10px;
}

p#company_name{
    font-size: 120%;
    font-weight: bold;
    margin-bottom:2ex;
    margin-left:0px;
}



dl.float dt{
    float: left;
    clear:both;
    width:10em;
    margin: 0px  0px  0px  20px;
}

dl.float dd{
   margin-left: 10em;
   margin-bottom: 12px;
}


dt{
    font-weight: bold;
    margin-top: 4ex;
    margin-bottom: 1ex;
}

dd{
   margin-left: 1em;
}



.caution{
    border:#ffc0c0 1px solid;
    padding: 3px;
    background-color:#ffe0e0;
}

span.caution{
    border:none;
    color:#c00000;
    text-weight: bold;
}


/* ===================================================================== 
  __topicpath
===================================================================== */


div#topicpath ul{
    position:absolute;
    left: 10px;
    top: 110px;
}

div#topicpath ul li{
    display:inline;
    list-style-type:none;
    background-image: none;
    padding-right: 5px;
}

div#topicpath ul li a{
    padding-right: 20px;
    background: url('../img/topicpath.gif') no-repeat right center;
}