Aalerts

by marakoss

HTML

<div id="acenter"> 
    <div id="aalert"> 
        <div class="title"> 
            <b class="left">Chyba!</b> 
            <a href="" class="right"><span>X</span></a> 
        </div> 
        <div class="desc clear"> 
 
            <p> 
                Došlo k neočekávané chybě
            </p> 
            <a href="" class="button left">potvrdit</a> 
            <a href="" class="button left">zavřít</a> 
        </div> 
    </div> 
</div>

CSS

* {
            margin: 0;
            padding: 0;
        }
 
        html {
            /*height: 100%;*/
        }
 
        body {
            background: #000 url('test.jpg');
            height: 100%;
        }
 
        
        #acenter {
            display: table;
            margin: 0 auto;
            vertical-align: middle;
            position: relative;
            top: 47%;
        }
 
        .clear:after {
            content: ".";
            display: block;
            width: 1px;
            height: 0;
            clear: both;
            visibility: hidden;
        }
 
        #aalert {
                width: auto;
                height: auto;
 
            /*Border*/
            border: 1px solid #bbb;
            -moz-border-radius: 6px;
            border-radius: 6px;
 
            /*Shadow*/
            -moz-box-shadow: 0 0 14px #222;
            -webkit-box-shadow: 0 0 14px #222;
            box-shadow: 0 0 14px #222;
 
            /*Transparent border effect*/
            margin: 0 auto;
            padding: 4px 3px 4px 3px;
 
            /*Background & Transparency*/
            background: rgba(220,220,220,0.4);
 
            /*Text color*/
            color: #00000;
 
        }
 
        #aalert .title {
 
            padding: 0px;
            margin: 0px 0px 2px 0px;
        }
 
        #aalert .title b{
 
            color: #fefefe;
 
            /*Text shadow*/
            text-shadow: #111 0 0 4px;
 
        }
 
        #aalert .title a {
                width: 14px;
                height: 18px;
        
                padding: 0px 2px 0px 0px;
                margin: 0px;
        
            color: #f0f0f0;
 
            font-family: Verdana;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
            text-align: right;
 
            /*Text shadow*/
            text-shadow: #111 0 0 4px;
        }
 
        #aalert .title a:hover {
            color: #fff;
            
        ...