|
|
/******************************* Standard Example *******************************/
/* font */ @font-face { font-family: 'Neutraface'; src: url("fonts/neutraface-book.otf") format('opentype') ; font-weight: normal; font-style: normal; } @font-face { font-family: 'Neutraface Bold'; src: url("fonts/neutraface-bold.otf") format('opentype') ; font-weight: normal; font-style: normal; }
body#example { font-family: "Neutraface", "Helvetica Neue", "Arial", sans-serif; background-color: #FCFCFC; padding-bottom: 150px; }
/* links */ a { color: #009FDA; text-decoration: none; } a:hover { color: #00BAFF; }
#example h1, #example h2, #example h3, #example h4, #example h5, #example a, #example .ui { font-family: "Neutraface Bold", "Helvetica Neue", "Arial", sans-serif; }
/* text and headers */ #example h1 { margin: 20px 0px 20px; } #example h2 { margin: 40px 0px 20px; } #example h3 { font-size: 20px; margin: 40px 0px 15px; } #example h4 { font-size: 16px; color: #555555; } #example pre { background-color: #F0F0F0; } #example p { margin: 10px 0px; }
/* lists */ #example ol { list-style-position: inside; margin: 10px 0px 40px; padding: 0px; } #example ol li { list-style-type: decimal; margin: 0px 0px 10px; } #example .list { list-style-position: inside; margin: 10px 0px 40px; padding: 0px; } #example .list li { list-style-type: disc; margin: 0px 0px 10px; }
/* content */ #example .container { width: 700px; margin: 0px auto; }
#example .shortcuts { float: right; clear: both; }
/******************************* Shapes Example *******************************/
#example .demo.shape {
}
#example .demo.shape .side { width: 250px; height: 250px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
background-color: #E6E6E6;
color: #FFFFFF;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }
#example .demo.shape .side img { display: block; margin: 0px auto; max-width: 100%; }
#example .demo.shape .side b { display: block; position: absolute; top: 50%; width: 100%; font-size: 80px; margin-top: -48px; text-align: center; }
#example .demo.rectangle.shape .side { width: 350px; }
|