<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ozer/pen/ckwyd?limit=all&page=3&q=mac" />
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'><link rel='stylesheet prefetch' href='https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'>
<style class="cp-pen-styles">body {
background: url('http://9to5mac.files.wordpress.com/2014/04/7994444846_c8d232aee7_o.jpg') 50% no-repeat fixed;
background-size: cover;
}
.window {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 4px 12px rgba(0,0,0,.5);
-webkit-box-shadow: 0 4px 12px rgba(0,0,0,.5);
box-shadow: 0 4px 12px rgba(0,0,0,.5);
width: 800px;
margin:auto;
margin-top:20px;
overflow:hidden;
border:1px solid #C1C2C2;
}
.inside {
background:#fff;
overflow:hidden;
padding:10px;
}
.inside .blok {
width:32%;float:left;margin-right:1.5%;
height:50px;
background:#efefef;
}
.top {
padding:7px 0;
position:relative;
background: #f1f1f1;
background: -moz-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: -webkit-gradient(left top, left bottom,color-stop(3%, #E9E9E9), color-stop(100%, #d8d8d8));
background: -webkit-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: -o-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: -ms-linear-gradient(top, #E9E9E9 3%, #d8d8d8 100%);
background: linear-gradient(to bottom, #E9E9E9 3%, #d8d8d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d8d8d8', GradientType=0 );
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.76);
overflow:hidden;
border-bottom:2px solid #BDBCC1;
}
.top > div {
float:left;
}
.panel {
padding-left:9px;
padding-top:2px;
}
.panel > span {
display:inline-block;
float:left;
width:12px;
height:12px;
margin-right:7px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor:pointer;
}
.panel span.first {
background:#FF5F4F;
}
.panel span.second {
background:#F9C206;
}
.panel span.third {
background:#19CC32;
}
.nav {
overflow:hidden;
}
.nav > span {
display:inline-block;
float:left;
background:#FBFBFB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height:23px;
padding:0 8px;
cursor:pointer;
color:#B4B4B4;
border-bottom:1px solid #CECECE;
}
.nav > span:hover {
background:#f2f2f2;
color:#666;
}
.nav > span i.fa {
font-size:23px;
}
.nav span.active {
color:#707070;
}
.nav span.prev {
margin-right:1px;
margin-left:7px;
}
.nav span.next {
margin-right:7px;
}
.nav span.set i {
font-size:14px;
position:relative;
top:3px;
}
.nav span.address {
width:400px;
margin-left:75px;
display:inline-block;
background:#fff;
line-height:23px;
padding:0;
text-align:center;
position:relative;
}
.nav span.address > input {
font-size:12px;
color:#505050;
border:none;
background:none;
text-align:center;
position:relative;
width:300px;
}
.nav span.address > input:focus {
outline:none;
}
.nav span.address > input.class {
text-align:left;
}
.nav span.address > i.fa {
position:absolute;
right:5px;
top:7px;
font-size:11px;
color:#010101;
}
.nav.right {
float:right !important;
margin-right:35px;
}
.nav span.share {
margin-right:7px;
}
.nav span.share > i.fa {
font-size:11px;
position:relative;
top:2px;
}
.nav span.tabs {
position:relative;
width:26px;
padding:0;
}
.nav span.tabs span {
height:7px;
width:7px;
border:1px solid #B4B4B4;
display:inline-block;
position:absolute;
background:#FBFBFB;
}
.nav span.tabs span.front {
top:8px;
left:6px;
z-index:6;
}
.nav span.tabs span.behind {
top:6px;
left:8px;
z-index:5;
}
.nav span.tabs:hover span {
border:1px solid #666;
}
span.new {
cursor:pointer;
position:absolute;
right:0;
bottom:0;
background:#CACACA;
width:23px;
height:23px;
text-align:center;
line-height:23px;
border-top:1px solid #C1C2C2;
border-left:1px solid #C1C2C2;
}
span.new:hover {
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
}
span.new .plus {
position:absolute;
background:#b0b0b0;
display:inline-block;
}
span.new .plus.x {
height:1px;
width:14px;
top:12px;
right:0;
left:0;
margin:auto;
}
span.new .plus.y {
height:14px;
width:1px;
bottom:0;
top:0;
margin:auto;
} </style></head><body>
<div class="window">
<div class="top">
<div class="panel">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</div>
<div class="nav">
<span class="prev active"><i class="fa fa-angle-left"></i></span>
<span class="next"><i class="fa fa-angle-right"></i></span>
<span class="set"><i class="fa fa-list-alt"></i></span>
<span class="address">
<input type="text" value="ozergul.net" class="address"/ editable="true">
<i class="fa fa-refresh"></i>
</span>
</div>
<div class="nav right">
<span class="share"><i class="fa fa-share-alt"></i></span>
<span class="tabs">
<span class="square front"></span>
<span class="square behind"></span>
</span>
</div>
<span class="new">
<span class="plus x"></span>
<span class="plus y"></span>
</span>
</div>
<div class="inside">
<div class="blok">
</div>
<div class="blok">
</div>
<div class="blok" style="margin:0;">
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$( ".window" ).draggable({ cancel: ".inside,input,textarea" });
$("input.address").focus(function(){
$(".fa-refresh").hide(500);
this.select();
}).focusout(function(){
$(".fa-refresh").show(500);
});
//# sourceURL=pen.js
</script>
</body></html>
