|
|
| Line 10: |
Line 10: |
| | height: 20px; | | height: 20px; |
| | background-color: #ffffff; | | background-color: #ffffff; |
| | + | border:none; |
| | } | | } |
| | | | |
| Line 59: |
Line 60: |
| | } | | } |
| | | | |
| - | #wrapper {
| |
| - | overflow:visible;
| |
| - | width: 800px;
| |
| - | height: 500px;
| |
| - | position: relative;
| |
| - | top: 50%;
| |
| - | margin:100px 50px 50px 110px;
| |
| - |
| |
| - | }
| |
| | | | |
| | #content { | | #content { |
| Line 277: |
Line 269: |
| | height:auto; | | height:auto; |
| | } | | } |
| - |
| |
| - | .tabs {
| |
| - | position: relative;
| |
| - | margin: 10px;
| |
| - | margin-left: 20px;
| |
| - | width: 1200px;
| |
| - | }
| |
| - |
| |
| - | .tabs input {
| |
| - | position: absolute;
| |
| - | z-index: 1000;
| |
| - | width: 120px;
| |
| - | height: 40px;
| |
| - | left: 0px;
| |
| - | top: 0px;
| |
| - | opacity: 0;
| |
| - | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
| |
| - | filter: alpha(opacity=0);
| |
| - | cursor: pointer;
| |
| - | }
| |
| - | .tabs input#tab-2{
| |
| - | left: 120px;
| |
| - | }
| |
| - | .tabs input#tab-3{
| |
| - | left: 240px;
| |
| - | }
| |
| - | .tabs input#tab-4{
| |
| - | left: 360px;
| |
| - | }
| |
| - |
| |
| - | .tabs label {
| |
| - | background: #B09CC9;
| |
| - | background: -moz-linear-gradient(top, #B09CC 0%, #7380AE 100%);
| |
| - | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B09CC), color-stop(100%,#7380AE));
| |
| - | background: -webkit-linear-gradient(top, #B09CC 0%,#7380AE 100%);
| |
| - | background: -o-linear-gradient(top, #B09CC 0%,#7380AE 100%);
| |
| - | background: -ms-linear-gradient(top,#B09CC 0%,#7380AE 100%);
| |
| - | background: linear-gradient(top, #B09CC 0%,#7380AE 100%);
| |
| - | font-size: 15px;
| |
| - | line-height: 40px;
| |
| - | height: 40px;
| |
| - | position: relative;
| |
| - | padding: 0 20px;
| |
| - | float: left;
| |
| - | display: block;
| |
| - | width: 80px;
| |
| - | color: #7380AE;
| |
| - | letter-spacing: 1px;
| |
| - | text-transform: uppercase;
| |
| - | font-weight: bold;
| |
| - | text-align: center;
| |
| - | text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
| |
| - | border-radius: 3px 3px 0 0;
| |
| - | box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
| |
| - | }
| |
| - |
| |
| - | .tabs label:after {
| |
| - | content: '';
| |
| - | background: #fff;
| |
| - | position: absolute;
| |
| - | bottom: -2px;
| |
| - | left: 0;
| |
| - | width: 100%;
| |
| - | height: 2px;
| |
| - | display: block;
| |
| - | }
| |
| - |
| |
| - | .tabs input:hover + label {
| |
| - | background: #B09CC9;
| |
| - | }
| |
| - |
| |
| - | .tabs label:first-of-type {
| |
| - | z-index: 4;
| |
| - | box-shadow: 2px 0 2px rgba(0,0,0,0.1);
| |
| - | }
| |
| - |
| |
| - | .tab-label-2 {
| |
| - | z-index: 3;
| |
| - | }
| |
| - |
| |
| - | .tab-label-3 {
| |
| - | z-index: 2;
| |
| - | }
| |
| - |
| |
| - | .tab-label-4 {
| |
| - | z-index: 1;
| |
| - | }
| |
| - |
| |
| - | .tabs input:checked + label {
| |
| - | background: #fff;
| |
| - | z-index: 6;
| |
| - | }
| |
| - |
| |
| - | .clear-shadow {
| |
| - | clear: both;
| |
| - | }
| |
| - |
| |
| - | .content2 {
| |
| - | background: #fff;
| |
| - | position: relative;
| |
| - | width: 900px;
| |
| - | height: auto;
| |
| - | box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
| |
| - | border-radius: 0 3px 3px 3px;
| |
| - | }
| |
| - |
| |
| - | .content2 div {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | padding: 10px 40px;
| |
| - | z-index: 1;
| |
| - | opacity: 0;
| |
| - |
| |
| - | -webkit-transition: opacity linear 0.1s;
| |
| - | -moz-transition: opacity linear 0.1s;
| |
| - | -o-transition: opacity linear 0.1s;
| |
| - | -ms-transition: opacity linear 0.1s;
| |
| - | transition: opacity linear 0.1s;
| |
| - | }
| |
| - |
| |
| - | .tabs input.tab-selector-1:checked ~ .content2 .content-1,
| |
| - | .tabs input.tab-selector-2:checked ~ .content2 .content-2,
| |
| - | .tabs input.tab-selector-3:checked ~ .content2 .content-3,
| |
| - | .tabs input.tab-selector-4:checked ~ .content2 .content-4 {
| |
| - | z-index: 100;
| |
| - | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
| |
| - | filter: alpha(opacity=100);
| |
| - | opacity: 1;
| |
| - |
| |
| - | -webkit-transition: opacity ease-out 0.2s 0.1s;
| |
| - | -moz-transition: opacity ease-out 0.2s 0.1s;
| |
| - | -o-transition: opacity ease-out 0.2s 0.1s;
| |
| - | -ms-transition: opacity ease-out 0.2s 0.1s;
| |
| - | transition: opacity ease-out 0.2s 0.1s;
| |
| - | }
| |
| - | .content2 div p {
| |
| - |
| |
| - | text-align: left;
| |
| - | margin-left: 0;
| |
| - | padding-left: 0;
| |
| - | border-left: 8px solid rgba(63,148,148, 0.1);
| |
| - | }
| |
| - | .container2{
| |
| - | width: 100%;
| |
| - | position: relative;
| |
| - | }
| |
| - | .clr{
| |
| - | clear: both;
| |
| - | padding: 0;
| |
| - | height: 0;
| |
| - | margin: 0;
| |
| - | }
| |
| - | .container2 > header{
| |
| - | margin: 10px;
| |
| - | position: relative;
| |
| - | display: block;
| |
| - | text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | /* Header Style */
| |
| - | .codrops-top{
| |
| - | line-height: 24px;
| |
| - | font-size: 11px;
| |
| - | background: #fff;
| |
| - | background: rgba(255, 255, 255, 0.6);
| |
| - | text-transform: uppercase;
| |
| - | position: relative;
| |
| - | font-family: Cambria, Georgia, serif;
| |
| - | box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
| |
| - | }
| |
| - | .codrops-top a{
| |
| - | padding: 0px 10px;
| |
| - | letter-spacing: 1px;
| |
| - | color: #B09CC9;
| |
| - | display: inline-block;
| |
| - | }
| |
| - | .codrops-top a:hover{
| |
| - | background: rgba(255,255,255,0.3);
| |
| - | }
| |
| - |
| |
| - | .codrops-top span.right a{
| |
| - | display: block;
| |
| - | }
| |
| | | | |
| | </style> | | </style> |
"
