|
|
Line 166: |
Line 166: |
| text-align:left; | | text-align:left; |
| } | | } |
- | h1,h2,h3,h4,h5,h6 {
| + | |
- | font-size:100%;
| + | |
- | font-weight:normal;
| + | |
- | }
| + | |
| q:before,q:after { | | q:before,q:after { |
| content:''; | | content:''; |
Line 194: |
Line 191: |
| clear: both; | | clear: both; |
| } | | } |
- | h1{
| |
- | font-size: 24px;
| |
- | position:relative;
| |
- | font-weight: 400;
| |
- | padding: 30px 5px 10px 5px;
| |
- | margin: 0px 15px;
| |
- | color: rgba(153,157,181,0.6);
| |
- | text-shadow: 0px 1px 1px #fff;
| |
- | border-bottom: 1px solid rgba(17,17,22,0.1);
| |
- | }
| |
- | /* Header Style */
| |
- | .header{
| |
- | font-family:'Arial Narrow', Arial, sans-serif;
| |
- | line-height: 24px;
| |
- | font-size: 11px;
| |
- | background: #000;
| |
- | opacity: 0.9;
| |
- | z-index: 9999;
| |
- | position: relative;
| |
- | -moz-box-shadow: 1px 0px 2px #000;
| |
- | -webkit-box-shadow: 1px 0px 2px #000;
| |
- | box-shadow: 1px 0px 2px #000;
| |
- | }
| |
- | .header a{
| |
- | padding: 0px 10px;
| |
- | letter-spacing: 1px;
| |
- | color: #ddd;
| |
- | display: block;
| |
- | float: left;
| |
- | }
| |
- | .header a:hover{
| |
- | color: #fff;
| |
- | }
| |
- | .header span.right{
| |
- | float: right;
| |
- | }
| |
- | .header span.right a{
| |
- | float: none;
| |
- | display: inline;
| |
- | }
| |
- | .demos{
| |
- | position:relative;
| |
- | z-index: 1000;
| |
- | text-align:center;
| |
- | float: right;
| |
- | padding: 10px;
| |
- | }
| |
- | .demos a{
| |
- | display: inline-block;
| |
- | padding: 4px 6px;
| |
- | background: #000;
| |
- | color: #fff;
| |
| | | |
- | font-family: Arial;
| |
- | font-size: 11px;
| |
- | -webkit-font-smoothing:antialiased;
| |
- | box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
| |
- | -webkit-transition: all 0.2s linear;
| |
- | -moz-transition: all 0.2s linear;
| |
- | -o-transition: all 0.2s linear;
| |
- | -ms-transition: all 0.2s linear;
| |
- | transition: all 0.2s linear;
| |
- | }
| |
- | .demos a:hover{
| |
- | color: #fff;
| |
- | background: #c90047;
| |
- | }
| |
- | .demos a.current-demo,
| |
- | .demos a.current-demo:hover{
| |
- | font-weight: bold;
| |
- | background: #c90047;
| |
- | color: #fff;
| |
- | cursor: default;
| |
- | }
| |
| </style> | | </style> |
| <style type="text/css"> | | <style type="text/css"> |
- | h2.ss-subtitle{
| |
- | padding: 10px 164px 40px;
| |
- | font-size: 52px;
| |
| | | |
- | color: rgba(0,0,0,0.8);
| |
- | position: relative;
| |
- | text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
| |
- | }
| |
- | h2.ss-subtitle:before{
| |
- | width: 4px;
| |
- | height: 40px;
| |
- | background: rgba(17,17,22,0.8);
| |
- | content: '';
| |
- | position: absolute;
| |
- | right: 75%;
| |
- | margin-right: -4px;
| |
- | bottom: -4px;
| |
- | -moz-border-radius: 2px 2px 0px 0px;
| |
- | -webkit-border-radius: 2px 2px 0px 0px;
| |
- | border-radius: 2px 2px 0px 0px;
| |
- | }
| |
- | h2.ss-subtitle:after{
| |
- | width: 25%;
| |
- | height: 0px;
| |
- | border-bottom: 4px dotted rgba(17,17,22,0.8);
| |
- | content: '';
| |
- | position: absolute;
| |
- | right: 50%;
| |
- | margin-right: -1px;
| |
- | bottom: -4px;
| |
- | }
| |
| .ss-links{ | | .ss-links{ |
| position: fixed; | | position: fixed; |
Line 372: |
Line 266: |
| float: left; | | float: left; |
| padding-right: 2%; | | padding-right: 2%; |
- | }
| |
- | .ss-circle{
| |
- | border-radius: 50%;
| |
- | overflow: hidden;
| |
- | display: block;
| |
- | text-indent: -9000px;
| |
- | text-align: left;
| |
- | -webkit-box-shadow:
| |
- | 0px 2px 5px rgba(0,0,0,0.7) inset,
| |
- | 0px 0px 0px 12px rgba(61,64,85,0.3);
| |
- | -moz-box-shadow:
| |
- | 0px 2px 5px rgba(0,0,0,0.7) inset,
| |
- | 0px 0px 0px 12px rgba(61,64,85,0.3);
| |
- | box-shadow:
| |
- | 0px 2px 5px rgba(0,0,0,0.7) inset,
| |
- | 0px 0px 0px 12px rgba(61,64,85,0.3);
| |
- | background-size: cover;
| |
- | background-color: #f0f0f0;
| |
- | background-repeat: no-repeat;
| |
- | background-position: center center;
| |
- | position: static;
| |
- | }
| |
- | .ss-small .ss-circle{
| |
- | width: 100px;
| |
- | height: 100px;
| |
- | }
| |
- | .ss-medium .ss-circle{
| |
- | width: 200px;
| |
- | height: 200px;
| |
- | }
| |
- | .ss-large .ss-circle{
| |
- | width: 300px;
| |
- | height: 300px;
| |
- | }
| |
- | .ss-circle-deco:before{
| |
- | width: 29%;
| |
- | height: 0px;
| |
- | border-bottom: 5px dotted #ddd;
| |
- | border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
| |
- | -webkit-box-shadow: 0px 1px 1px #fff;
| |
- | -moz-box-shadow: 0px 1px 1px #fff;
| |
- | box-shadow: 0px 1px 1px #fff;
| |
- | position: absolute;
| |
- | top: 50%;
| |
- | content: '';
| |
- | margin-top: -3px;
| |
- | }
| |
- | .ss-circle-deco:after{
| |
- | width: 0px;
| |
- | height: 0px;
| |
- | border-top: 10px solid transparent;
| |
- | border-bottom: 10px solid transparent;
| |
- | content: '';
| |
- | position: absolute;
| |
- | top: 50%;
| |
- | margin-top: -10px;
| |
- | }
| |
- | .ss-left .ss-circle-deco:before{
| |
- | right: 2%;
| |
- | }
| |
- | .ss-right .ss-circle-deco:before{
| |
- | left: 2%;
| |
- | }
| |
- | .ss-left .ss-circle-deco:after{
| |
- | right: 0;
| |
- | border-right: 10px solid rgba(17,17,22,0.8);
| |
- | }
| |
- | .ss-right .ss-circle-deco:after{
| |
- | left: 0;
| |
- | border-left: 10px solid rgba(17,17,22,0.8);
| |
- | }
| |
- | .ss-left .ss-circle{
| |
- | float: right;
| |
- | margin-right: 30%;
| |
- | }
| |
- | .ss-right .ss-circle{
| |
- | float: left;
| |
- | margin-left: 30%;
| |
- | }
| |
- | .ss-container h3{
| |
- | margin-top: 34px;
| |
- | padding: 10px 15px;
| |
- | background: rgba(26, 27, 33, 0.6);
| |
- | text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)
| |
| } | | } |
| .ss-container .ss-medium h3{ | | .ss-container .ss-medium h3{ |
Line 468: |
Line 278: |
| .ss-container .ss-right h3{ | | .ss-container .ss-right h3{ |
| border-left: 5px solid rgba(164,166,181,0.8); | | border-left: 5px solid rgba(164,166,181,0.8); |
- | }
| |
- | .ss-container h3 span{
| |
- | color: rgba(255,255,255,0.8);
| |
- | font-size: 13px;
| |
- | display: block;
| |
- | padding-bottom: 5px;
| |
- | }
| |
- | .ss-container h3 a{
| |
- | font-size: 28px;
| |
- | color: rgba(255,255,255,0.9);
| |
- | display: block;
| |
- | }
| |
- | .ss-container h3 a:hover{
| |
- | color: rgba(255,255,255,1);
| |
| } | | } |
| | | |