The ProCSSor you know and love is now available as a native Mac application on the Mac App Store.
ProCSSor
 
@charset "UTF-8"; /*リセット*/ body, p, h1, h2, h3, h4, h5, ul, li, dl, dt, dd, th { margin: 0; padding: 0; font-size: medium; font-weight: normal; } img, a { border: none } li { list-style: none } /* ボディ設定 */ body { background: url(images/bg.jpg) repeat; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } p { line-height: 1.5em; font-size: 0.875em; color: #28030c; } /* リンク設定 */ a { color: #ff500b } a:visited { color: #ff500b } a:hover { color: #ff8d60 } /* 共通クラス */ .clear { clear: both } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1 } /* IE6 */ *:first-child+html .clearfix { zoom: 1 } /* IE7 */ /*マージン*/ .ma_top10 { margin-top: 10px } .ma_top20 { margin-top: 20px } .ma_top30 { margin-top: 30px } .ma_right10 { margin-right: 13px } .ma_right20 { margin-right: 20px } /*フォントカラー*/ .red { color: #a40000 } .none { display: none } /*---------------------------------------*/ /*------*/ div.container { width: 100% } div.container div.wrap { width: 980px; margin: 0 auto; } div.container div.wrap div.main { background: url(../images/main.png) no-repeat top center; width: 700px; height: 705px; margin: 10px auto; z-index: 100; text-align: center; } div.container div.wrap div.main img { margin-top: 480px } div.container div.wrap div.main p { font-size: 1.5em; outline: #FFF solid 5px; } /*.facebook*/ div.facebook { width: 100%; background: url(../images/bg_facebook.gif) repeat-x; height: 280px; padding-top: 20px; } div.facebook iframe { width: 940px; margin: 0 auto; display: block; background: #FFF; } footer { text-align: center; margin: 20px 0; font-size: 12px; } /*--------------------*/ div.container div.wrap div.content { background: url(../images/bg_content_middle.png) repeat-y; width: 780px; margin: 0 auto; } div.top { width: 780px; height: 24px; background: url(../images/bg_content_top.png) no-repeat center top; margin: 20px auto 0 auto; } div.bottom { width: 780px; height: 24px; background: url(../images/bg_content_bottom.png) no-repeat center top; margin: 0 auto; } p, ul li, dt, dd { line-height: 1.5 } /*------*/ p.anchor { text-align: right; font-size: 0.875em; color: #333; margin-top: 20px; padding-right: 20px; font-weight: bold; } article { background: #FFF; width: 730px; padding: 10px 9px; margin: 0 auto; } article p.copy { text-align: center; font-size: 18px; font-weight: bold; color: #cf348a; margin-top: 20px; } /* left_culum */ article section.left_culum { width: 60%; float: left; margin-right: 20px; } article h2 { font-size: 1.2em; color: #ff54b4; text-align: center; margin-bottom: 10px; font-weight: bold; } article section.left_culum a { text-decoration: none; opacity: 1; } article section.left_culum a:hover { opacity: 0.6 } article section.left_culum img { margin: 0 10px } article section.left_culum p { font-size: 0.9em; color: #666; margin-top: 5px; } article section.left_culum p strong, span { color: #ff500b } article section.left_culum small { font-size: 0.65em; color: #666; margin-left: 10px; } /* right_culum */ article section.right_culum { width: 35%; float: left; } article section.right_culum h2.sp { font-size: 1.3em; color: #fff; text-align: center; background-color: #80ce1b; width: 245px; margin-left: 5px; padding-top: 3px; border-radius: 10px; } article section.right_culum p.sp { font-size: 1.0em; color: #80ce1b; margin: 10px 0; text-align: center; font-weight: bold; } article section.right_culum p { font-size: 0.9em; color: #666; margin-top: 5px; }

@charset "UTF-8";
/*リセット*/
body,
p,
h1,
h2,
h3,
h4,
h5,
ul,
li,
dl,
dt,
dd,
th {
    margin: 0;
    padding: 0;
    font-size: medium;
    font-weight: normal;
}
img,
a { border: none }
li { list-style: none }
/*

ボディ設定

*/
body {
    background: url(images/bg.jpg) repeat;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
p {
    line-height: 1.5em;
    font-size: 0.875em;
    color: #28030c;
}
/*

リンク設定

*/
a { color: #ff500b }
a:visited { color: #ff500b }
a:hover { color: #ff8d60 }
/*

共通クラス

*/
.clear { clear: both }
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix { zoom: 1 } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */
/*マージン*/
.ma_top10 { margin-top: 10px }
.ma_top20 { margin-top: 20px }
.ma_top30 { margin-top: 30px }
.ma_right10 { margin-right: 13px }
.ma_right20 { margin-right: 20px }
/*フォントカラー*/
.red { color: #a40000 }
.none { display: none }
/*---------------------------------------*/
/*------*/
div.container { width: 100% }
div.container div.wrap {
    width: 980px;
    margin: 0 auto;
}
div.container div.wrap div.main {
    background: url(../images/main2.png) no-repeat top center;
    width: 700px;
    height:595px;
    margin: 10px auto;
    z-index: 100;
    text-align: center;
}
div.container div.wrap div.main img { margin-top: 490px }
div.container div.wrap div.main p {
    font-size: 1.5em;
    outline: #FFF solid 5px;
}
/*.facebook*/
div.facebook {
    width: 100%;
    background: url(../images/bg_facebook.gif) repeat-x;
    height: 280px;
    padding-top: 20px;
}
div.facebook iframe {
    width: 940px;
    margin: 0 auto;
    display: block;
    background: #FFF;
}
footer {
    text-align: center;
    margin: 20px 0;
    font-size: 12px;
}
/*--------------------*/
div.content {
    background: url(../images/bg_content_middle.png) repeat-y;
    width: 780px;
    margin: 0 auto;
}
div.top {
    width: 780px;
    height: 24px;
    background: url(../images/bg_content_top.png) no-repeat center top;
    margin: 20px auto 0 auto;
}

div.xmas {
    width: 780px; height: 176px;
    background: url(../images/ribbon.png) no-repeat ;
    margin:0 auto -66px auto;
    top:-20px;
    z-index:2;
    position:relative;
    display:block;
}

div.xmas a {
   width: 780px; height: 176px;
   position:relative;
   display:block;
   background: url(../images/ribbon.png) 0 -176px no-repeat;
}

div.bottom {
    width: 780px;
    height: 24px;
    background: url(../images/bg_content_bottom.png) no-repeat center top;
    margin: 0 auto;
}
p,
ul li,
dt,
dd { line-height: 1.5 }
/*------*/
p.anchor {
    text-align: right;
    font-size: 0.875em;
    color: #333;
    margin-top: 20px;
    padding-right: 20px;
    font-weight: bold;
}
article {
    background: #FFF;
    width: 730px;
    padding: 10px 9px;
    margin: 0 auto;
}
article p.copy {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #cf348a;
    margin-top: 20px;
}
/*
left_culum
*/
article section.left_culum {
    width: 60%;
    float: left;
    margin-right: 20px;
}
article h2 {
    font-size: 1.2em;
    color: #ff54b4;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}

article strong {
    font-size: 1.2em;
    color: #F00;
    margin-bottom: 10px;
    font-weight: bold;
}

article section.left_culum a {
    text-decoration: none;
    opacity: 1;
}
article section.left_culum a:hover { opacity: 0.6 }
article section.left_culum img { margin: 0 10px }
article section.left_culum p {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}
article section.left_culum p strong,
span { color: #ff500b }
article section.left_culum small {
    font-size: 0.65em;
    color: #666;
    margin-left: 10px;
}
/*
right_culum
*/
article section.right_culum {
    width: 35%;
    float: left;
}
article section.right_culum h2.sp {
    font-size: 1.3em;
    color: #fff;
    text-align: center;
    background-color: #80ce1b;
    width: 245px;
    margin-left: 5px;
    padding-top: 3px;
    border-radius: 10px;
}
article section.right_culum p.sp {
    font-size: 1.0em;
    color: #80ce1b;
    margin: 10px 0;
    text-align: center;
    font-weight: bold;
}
article section.right_culum p {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

div.movie {
  text-align:center;
  font-size:1.8em;}
  
div.movie img {
  margin-top:20px;}
  
div.movie form {
  margin:30px 0;}
  
div.movie input {
  font-size:1em;}
  
div.movie input.pass {
  width:9em;
  margin-bottom:20px;}

div.movie object {
  width:720px; height:404px;
  margin:20px 0;}
  
© Machinefloor Inc. 2012
315