@charset "utf-8";
/* 52framework General StyleSheet - contains styles for all the HTML elements this framework supports */

body {
background:#fff url("../i/com_hd_base.png");
background-repeat:repeat-x;
background-position:top reft;
color:#333;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size:13px;
line-height:1.8em;
position:relative;
}

/* ** ** Common Addative Classes ** ** */
.left, .float_left  { float:left}
.right, .float_right { float:right}
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
.hide  { display:none} .block {display:block !important;} .inline {display:inline !important;}

.align_right    { text-align:right;  }
.align_left     { text-align:left;  }
.align_center   { text-align:center;  }
.align_justify  { text-align:justify; }

.bold {font-weight:600;}
.italic {font-style:italic;}

a {color:#525252;}
a:hover, a:focus { text-decoration:underline;}
a:active, a:visited { }

blockquote {
margin:5px; 
padding:10px;
font-size:1.52em; 
color:#999; 
font-style:italic; 
line-height:1.3em; 
width:100%; 
quotes:none;
}
blockquote.left {border-right:1px dashed #ccc; width:35%;} /* float blockquote left, and set width */
blockquote.right {border-left:1px dashed #ccc; width:35%;} /* float blockquote right and set a width */

/* ** ** Header Styles ** ** */
h1, h2, h3, h4, h5 {margin:0 0 0.5em; line-height:1.1em;}
h1 {font-size:1.1em; font-weight:black;} 
h2 {font-size:0.8em;} 
h3 {font-size:1.652em;} 
h4 {font-size:1.452em;} 
h5 {font-size:1.252em;} 
h6 {font-size:1.52em;}

/* ** ** ul li's ** ** */
ul{
  list-style:outside disc;
}
ul,ol{
  margin:0 0 1.5em 1.5em;
  padding:0;
}
li ul,li ol{
  padding:0;
  margin:0 0 1.5em 1.5em;
}


/* ** ** custom select color ** ** */
::selection {
background: #525252; /* Safari */
}
::-moz-selection {
background: #525252; /* Firefox */
color:#fff;
}
/* ** ** paragraph styling ** ** */
p {margin:0 0 1.52em;}
p img.left {float:left;margin:1.52em 1.52em 1.52em 0;padding:0;}
p img.right {float:right;margin:1.52em 0 1.52em 1.52em;}

strong   {font-weight:600;}
em, dfn  {font-style:italic;}
dfn  {   font-weight:600;}
sup, sub {   line-height:0;}
abbr, acronym   {border-bottom:1px dashed #ccc;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code, tt   {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5; display:block;}
code {background-color:#eee; display:inline; padding:0px 2px 1px 2px; line-height:1.1em;}
pre {margin:1.5em 0;white-space:pre;}


/* ** ** header styling ** ** */
header {height:105px; padding-top:7px;}
header .logo {margin:8px 0;}
header nav ul li {float:left; margin-top:9px;}
header nav ul li a {color:#000; display:block; padding:3px 15px; text-decoration:none;}
header nav ul li a:hover {background-color:#eee; text-decoration:none; border: solid 0px #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
header nav ul li.last a {border-right:none;}
header nav#ui{font-size:0.85em; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}

/* ** ** MAIN UI styling ** ** */
html#news header nav ul li#ns a{color:#f90;}
html#portfolio header nav ul li#pf a{color:#f90;}
html#howto header nav ul li#how a{color:#f90;}
html#profile header nav ul li#prof a{color:#f90;}
html#contact header nav ul li#cont a{color:#f90;}

/* ** ** footer styling ** ** */
footer {text-align:right; color:#666; font-size:0.5em; padding:4px 0px;}


#css3 div > div {margin:0px 0px 50px 0px; padding:6px; border:1px solid #eee;}
#grid div {text-align:center;  }
#grid div > .col {border-bottom:1px solid #ccc; padding:10px 0px; outline:1px solid #eee;}
.documentation {display:block; background-color:#eee; padding:6px 13px; color:#666; text-align:right; text-shadow:-1px -1px 0px #fff;}

.imganc img {border:5px solid #fff;width:90px; margin:0px 7px;}
.imganc li {float:left; list-style:none;}
.imganc a {display:block; }
.imganc a:hover img {border:5px solid #f90; }