@charset "UTF-8";
@import url(common.css);

/*  */
h2 { margin: 0; }
ul.desc { margin-bottom: 10px; }

div.cssopt-copy {
font-size: 16px;
margin-bottom: 20px;
border: 1px dashed #483D8B;
padding: 6px;
}

/* URL入力フォーム */
form.cssopt {
margin: 0 0 20px 0;
background-color: #eee;
padding: 6px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: gray;
}
input.text { font-size: 24px; width: 500px; vertical-align: middle; }
input.submit { width: 200px; }

/* 解析中メッセージ */
div#update-msg {
margin-bottom: 10px;
display: none;
}
div#update-msg span.msg {
margin-right: 20px;
padding: 4px;
background-color: #ffa500;
}

/**
 * 解析結果 概要
 */

h3, h4, h5 {
margin: 0 0 6px 0;
padding: 4px;
}
/* キャプション(2重枠) */
h3.caption-big, h4.caption-big {
border: 4px double #483D8B;
font-size: 16px;
font-weight: normal;
}
/* キャプション(紫背景) */
h4.caption-middle {
background-color: #E6E6FA;
border-width: 0 2px 1px 0;
border-style: solid;
border-color: #483D8B;
font-weight: normal;
}
/* キャプション(グレー背景) */
h5.caption-small {
background-color: #eee;
}

/* 解析結果(左インデント) */
div.result {
margin: 0 0 0 20px;
clear: both;
}
/* 解析結果(下にマージン) */
div.result div.result-body {
margin-bottom: 10px;
clear: both;
}

table.summary-table { }
table.summary-table th { width: 140px; background-color: #eee; }
table.summary-table td.number { text-align: right; }
/* スコア */
span.score { font-size: 30px; vertical-align: middle; }
span.score-html { color: #0000CD; }
span.score-css { color: #DC143C; }
span.score-all { color: #8B008B; }

/* タグ(出現頻度) */
span.tag { margin: 0 10px 0 0; padding: 2px; }
span.freq3 { font-size: 20px; font-weight: bold; background-color: #fcc; }
span.freq2 { font-size: 16px; font-weight: bold; background-color: #ff9; }
span.freq1 { font-weight: bold; background-color: #eee; }

/* 解析結果(2列) */
div.cssopt-result { float: left; width: 350px; margin: 0 20px 10px 0; }
div.result-positive { border: 1px solid green; background-color: #efe; padding: 6px; }
div.result-negative { border: 1px solid red; background-color: #fee; padding: 6px; }