/*----------- A B C - G A L L E R Y - E X A M P L E (welcome-by-abc-css.css) */
@font-face {
    font-family: 'open_sans';
    src: url('fonts/opensans-regular/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-size: 10px;
}
body {    
    font-family: 'open_sans';
    background: #999999; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #999999 29%, #dddddd 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  #999999 29%,#dddddd 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  #999999 29%,#dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#dddddd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
* {
    padding: 0px;
    margin: 0px;
    /* IF YOU USE 'border-box', this NOT influence the styles of gallery,
    because these use default box-sizing value --> 'content-box' */
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
}
#content {
    text-align: center;
}
.container {
    width: 600px;
    height: auto;
    padding: 10px 0px 50px 0px;
    background: #fff;
    color: rgb(124,124,124);
    margin: 0 auto;
/*    overflow: auto;*/
}
.container h2{
    padding: 20px 50px 10px 50px;
    line-height: 1.5em;
    font-size: 1.6em;
}
div.abc-gallery-div {
    margin: 0 auto;
    width: 560px;
    text-align: center;
}
ul.abc-ul-gallery{
    margin: 0px 0px 0px 20px;
    *margin: 0 auto;
    list-style: none;
    text-align: center;
}
.abc-ul-gallery li {
    float: left;
    width: 110px;
    margin: 10px;
    text-align: center;
}
.abc-ul-gallery img {
    border: 2px solid #aaa;
    padding: 5px;
    width: 103px;
    height: 103px;
}
.abc-ul-gallery li a {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80); /* IE 5-7 */
    -moz-opacity: 0.8; /* Netscape */
    -khtml-opacity: 0.8; /* Safari 1.x */
    opacity: 0.8; /* Good browsers */
}
.abc-ul-gallery li a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100); /* IE 5-7 */
    -moz-opacity: 1; /* Netscape */
    -khtml-opacity: 1; /* Safari 1.x */
    opacity: 1; /* Good browsers */
}

/* T E X T - C O N T E N T */
/* T E X T - C O N T E N T */
/* T E X T - C O N T E N T */

#content h1 {
    font-size: 1.6em;
    padding: 1.2em 2em 0 2em;
    letter-spacing: 0.03em;
    font-weight: 500;
}
#content h2 {
    font-size: 1.2em;
    color: #FFF;
    background: #00509B;
    margin: 2.2em auto 3.2em auto;
    padding: 20px 0 26px 0;
}
div.link-text {
    margin: 2em auto 44px auto;
}
.link-text a {
    font-size: 1.9em;
    color: #00509B;
    text-decoration: none;
    border: none;
}
.link-text a:hover {
    color: #00509B;
    text-decoration: underline;
    border: none;
    letter-spacing: 0.015em;
}
.instruction {
    margin: 0 auto 40px auto;
    padding: 0 1em;
}
.instruction-title {
    line-height: 2em;
    background: #7C7C7C;
    color: #FFF;
    letter-spacing: 0.1em;
    margin: 30px auto 0px auto;
}
div.steps {
    margin: 0px auto 0px auto;
    padding: 28px 0 30px 0;
    border-bottom: 2px solid #7C7C7C;
}
div.steps.last {
    border-bottom: 0px;
    padding: 28px 0 30px 0;
}
.instruction p {
    line-height: 1.6em;
    font-size: 1.1em;
    color: #333;
    letter-spacing: none;
    padding-bottom: 20px;
    text-align: left;
}
.editor-look {
    background: #000;
    margin: 0px auto;
    padding: 20px 15px 14px 15px;
    font-size: 0.8em;
/*    overflow: auto;
    white-space: nowrap;*/
}
.editor-look p{
    color: #bbb;
    padding-bottom: 10px;
}
span.orange-text {
    color: #EF8B00;
}
span.notice {
    color: #00509B;
    font-weight: 500;
}
div.link-text.last {
    margin: 0px auto 3.6em auto;
}
div.text-center p{
    text-align: center;
    padding-bottom: 0px;
}
div.site {
    padding-top: 10px;
}
.site a {
    color: #00509B;
    font-size: 1.2em;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.site a:hover {
    letter-spacing: 0.095em;
}
/* ----------------------------------------------------------------- */
/* S T Y L E S   F O R   N E W   B R O W S E R S */
/* ----------------------------------------------------------------- */
@media (min-width: 10px) { 
/* ----------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 600px;
    overflow: auto;
}
div.abc-gallery-div {
    width: 100%;
    max-width: 560px;
}
ul.abc-ul-gallery{
    margin: 0 auto;
}
.abc-ul-gallery li {
    width: 21%;
    margin: 2%;
}
.abc-ul-gallery img {
    padding: 7%;
    width: 100%;
    height: auto;
}
.editor-look {
    overflow: auto;
    white-space: nowrap;
}
/* ----------------------------------------------------------------- */
}
/* ----------------------------------------------------------------- */
@media (min-width: 460px) { 
/* ----------------------------------------------------------------- */
.site a {
    letter-spacing: 0.4em;
    font-size: 1.2em;
}
.site a:hover {
    letter-spacing: 0.45em;
}
/* ----------------------------------------------------------------- */
}
/* ----------------------------------------------------------------- */