Skip to content

Instantly share code, notes, and snippets.

@riix

riix/base.css

Created December 10, 2012 08:56
Show Gist options
  • Save riix/4249435 to your computer and use it in GitHub Desktop.
Save riix/4249435 to your computer and use it in GitHub Desktop.
Download ZIP
base.css
Raw
base.css
@charset "utf-8";
@import url('../css/guide.css');
/* Normalize ------------------------------------------------ */
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, body { margin: 0px; padding: 0px; }
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {-webkit-text-size-adjust: 100%; }
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block; }
em, address { font-style: normal; }
form { margin: 0px; padding: 0px; }
table { border-collapse : collapse; }
textarea { overflow: auto; } /* Remove Scrollbar in IE */
img { border: 0px; -ms-interpolation-mode: bicubic; }
img, img.preloader { display: block; background: url('../img/common/preloader.gif') no-repeat 50% 50%; }
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; }
button::-moz-focus-inner, a::-moz-focus-inner { margin: 0px; padding: 0px; } /* firefox focus padding reset */
button, input[type=submit], input[type=reset], input[type=button] { cursor: pointer; overflow: visible; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; } /* Remove Webkit Outline */
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
svg:not(:root) { overflow: hidden; }
.reset, .reset li { margin: 0px; padding: 0px; list-style: none; } /* reset */
/* Accessibility ---------------------------------------- */
/* Skip to Content */
#skipToContent { position: relative; }
#skipToContent a { display: block; height:1px; width:1px; margin-bottom: -1px; overflow: hidden; text-align: center; color:#000; white-space: nowrap; }
#skipToContent a:focus,
#skipToContent a:active { height: auto; width: 100%; padding: 5px; margin-bottom: 10px; }
/* Hiding */
.blind { position: absolute; left: -1000%; top: 0; width: 1px; heght: 1px; font-size:0 ; line-height: 0; overflow: hidden; }
.invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.invisible.focusable:active,
.invisible.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Image Replacement */
.ir { position: relative; display: inline-block; overflow: hidden; text-decoration: none; background-repeat: no-repeat; background-position: center center; }
.ir span { position: absolute; z-index: -1; visibility: hidden; }
/* Page Break */
.page-break { page-break-before: always; }
/* Preloader */
div.preloader { position: absolute; z-index: 1100; top: 50%; left: 50%; }
div.preloader span { display: block; width: 100px; border: solid 1px #ccc; text-align: center; }
div.preloaderbg { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; }
/* Typhography ------------------------------------------ */
body, input, textarea, select, option, button { font-family: '나눔고딕', '맑은 고딕', nanumGothic, malgunGothic, AppleGothic, dotum, gulim, '돋움', '돋움체', '굴림', '굴림체', Arial, Helvetica, Sans-Serif; }
body { font-size: 13px; }
.gothic { font-family: '나눔고딕', '맑은 고딕', nanumGothic, malgunGothic, appleGothic, dotum, gulim, '돋움', '돋움체', '굴림', '굴림체'; }
textarea.textarea { font-size: 12px; }
small { font-size: 11px; }
i, .ico { font-style: normal; font-weight: normal; }
.strike { text-decoration: line-through; }
.nowrap { white-space: nowrap; }
.pre, .break-all {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
/* Anchor ----------------------------------------------- */
a:link { text-decoration: none; color: #666; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; color: #666; }
a:active { text-decoration: none; color: #666; }
a[href^="http://"], a.external { padding-right: 20px; background: url('../img/common/ico_external.gif') no-repeat center right; }
a[href^="mailto:"] { padding-right: 20px; background: url('../img/common/ico_email.png') no-repeat center right; }
a[href$=".pdf"] { padding-right: 20px; background: url('../img/common/ico_pdf.png') no-repeat center right; }
a.outline:focus, input.outline:focus, button.outline:focus, textarea.outline:focus {
outline: 3px solid #D7F07F;
}
/* CSS Transform Hover Anchor */
a.scale {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
/* Button ----------------------------------------------- */
div.section-button { clear: both; margin-top: 10px; text-align: right; }
/*
.button-a { position: relative; display: inline-block; margin: 2px; vertical-align: top; }
.button-a * { display: inline-block; padding: 0 8px; font-size: 12px; height: 24px; line-height: 22px; margin: 0; font-weight: bold !important; color: #fff; text-decoration: none !important; border: 1px solid; cursor: pointer; overflow: visible; border-radius: 3px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #666; text-shadow: 0 -1px 0 #333; zoom: 1; }
.button-a a { height: 22px; }
.button-a a,
.button-a button,
.button-a input { border-color: #ccc; color: #333; background: #eee -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#ddd)); background: #eee -moz-linear-gradient(top,#fff,#ddd); background-color: #eee; text-shadow: 1px 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#dddddd); }
.button-a a.submit,
.button-a input[type=submit],
.button-a button[type=submit] { border-color: #666; background: #333 -webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#777),color-stop(0.5,#333),color-stop(0.5,#000)); background: #333 -moz-linear-gradient(top,#777,#000); background-color: #333; color: #ffc; filter: progid: DXImageTransform.Microsoft.gradient(startColorStr=#777777, endColorStr=#333333); text-shadow: 1px 1px 0 #000; }
*/
/* Form ----------------------------------------------- */
/* align */
label input { vertical-align: middle; }
html.firefox label input[type="radio"] { margin-top: -2px; }
html.firefox label input[type="checkbox"] { margin-top: 1px; }
/* form */
input.txt { padding: 0px 5px; width: 120px; height: 18px; line-height: 18px; font-size: 12px; border: solid 1px #D4DAE8; }
input.short { width: 80px; }
input.long { width: 90%; }
/*
select.select { padding: 0px; border: solid 1px #D4DAE8; }
select.select,
select.select option { height: 18px; font-size: 12px; }
*/
/* Clear Fix ----------------------------------------------- */
.clearfix { display: inline-block; }
.clearfix:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; font-size: 0; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.clear-after { *zoom: 1;}
.clear-after:after { content: ''; clear: both; display: block; height: 0px; line-height: 0px; }
/* Display ----------------------------------------------- */
.show { display: block; }
.hide { display: none; }
.block { display: block; }
.fleft { float: left; }
.fright { float: right; }
.relative { position: relative; z-index: 2; }
.absolute { position: absolute; z-index: 3; }
.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.vtop { vertical-align: top; }
.vmiddle { vertical-align: middle; }
/* Table List ----------------------------------------------- */
dl.table { margin: 0px; padding: 0px; }
dl.table dt { clear: left; float: left; margin: 0px; padding: 0px; }
dl.table dt img { vertical-align: middle; }
dl.table dd { margin: 0px 0px 0px 100px; padding: 0px; height: 20px; }
/* Cheat Sheet ------------------------------------------------ */
/* Cross Browser Minimum Height */
.min-height {
min-height: 500px;
height: auto !important; /* except ie6 will respect the !important flag */
height: 500px;
}
/* Opacity */
.opacity {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}
/* Round */
.round {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
/* Fixed_footer */
.fixed_footer {
position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999;
}
/* Fixed footer for IE 6 */
* html .fixed_footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
/* Fix double margin bug */
ul.test li {
float: right;
margin-right: 10px;
*display: inline; /* IE7 and bellow*/
}
/* Vertical Center */
.test {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
/* Photo Background */
.pagebg {
width: 100% !important;
height: 100% !important;
position: fixed !important;
background-size: cover !important;
background-position: center center !important;
}
/* Cheat Sheet ------------------------------------------------ */
@riix
Copy link
Author

riix commented Dec 10, 2012

PMS 에 쓰인 base.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment