/An-Anonymous-Pen.markdown

## An-Anonymous-Pen.markdown

      
    Raw
  

              An-Anonymous-Pen.markdown
            
          
    An Anonymous Pen

A Pen by Anonasaurus Rex on CodePen.
License.

  
## index.html

<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/bio.css" rel="stylesheet" type="text/css" media="all">

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script language="JavaScript" type="text/javascript">
var reloaded = false;
var loc=""+document.location;
loc = loc.indexOf("?reloaded=")!=-1?loc.substring(loc.indexOf("?reloaded=")+10,loc.length):"";
loc = loc.indexOf("&")!=-1?loc.substring(0,loc.indexOf("&")):loc;
reloaded = loc!=""?(loc=="true"):reloaded;


function reloadOnceOnly() {
    if (!reloaded)
        window.location.replace(window.location+"?reloaded=true");

	/*	if ($.browser.mozilla || $.browser.msie)
		{
			$('footer').css("position" , "absolute");
			$('footer').css("width" , "82%");
			$('footer').css("right" , "34px");
		}*/

}

//You can call this via the body tag if desired
reloadOnceOnly();


</script>

<script type="text/javascript">
function change_bg(event){

	 var target = event.target ? event.target : event.srcElement;
		var imgsrc = target.src;
		 var gal = imgsrc.replace("images", "gallery");
		 {
		 	$(document.body).css("background-image", "url("+gal+")");
		 }

}
</script>
<script type="text/javascript">
var g=1;
function nextImage()
{
	 if(g == 11)
	 {
		 g=1;
		 var img = $("#gallery :nth-child("+g+")").attr("src");
		  var gal = img.replace("images", "gallery");
		 $(document.body).css("background-image", "url("+gal+")");

	 }
	 else
	 {
		 var img = $("#gallery :nth-child("+g+")").attr("src");
		  var gal = img.replace("images", "gallery");
		 $(document.body).css("background-image", "url("+gal+")");
		 ++g;
	 }

}

function prevImage()
{
	 if(g == 1)
	 {
		 g=10;
		 var img = $("#gallery :nth-child("+g+")").attr("src");
		  var gal = img.replace("images", "gallery");
		 $(document.body).css("background-image", "url("+gal+")");

	 }
	 else
	 {
		 --g;
		 var img = $("#gallery :nth-child("+g+")").attr("src");
		  var gal = img.replace("images", "gallery");
		 $(document.body).css("background-image", "url("+gal+")");
	 }

}

function firstImage()
{

		 var img = $("#gallery :nth-child(1)").attr("src");
		  var gal = img.replace("images", "gallery");
		 $(document.body).css("background-image", "url("+gal+")");

}

function lastImage()
{

		 var img = $("#gallery :nth-child(10)").attr("src");
		  var gal = img.replace("images", "gallery");
		 $(document.body).css("background-image", "url("+gal+")");

}

</script>


</head>


<body onLoad="reloadOnceOnly();">

<div id="wrapper">
	<header>

   		<div id="logo">

        </div> <!-- end logo -->
    </header> <!-- end header -->

    <div id="body">

    	 <div id="menu">
            <ul>
                <li><a href="#" class="active">HOME</a></li>
                <li><a href="offer1.html">PONUDA</a></li>
                <li><a href="#">REFERENCE</a></li>
                <li><a href="about_us.html">O NAMA</a></li>
                <li><a href="contact.html">KONTAKT</a></li>
            </ul>
        </div> <!-- end menu -->

   	 	<div id="images">

            &nbsp;&nbsp;
        	<img src="images/first.jpg" alt="first image" title="Go the first image" onClick="firstImage();" />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <img src="images/prev.jpg" alt="next image" title="Go the prev image" onClick="prevImage();"/>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <img src="images/next.jpg" alt="next image" title="Go the next image" onClick="nextImage();"/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          	<img src="images/last.jpg" alt="last image" title="Go the last image"  onClick="lastImage();" />


		</div> <!-- end images -->

    </div> <!-- end sidebar -->

    <div class="clear"></div>
    <footer>

        <div id="gallery">
        	<img src="images/pic01.jpg" onClick="change_bg(event);" class=".sp"/>
            <img src="images/pic02.jpg" onClick="change_bg(event);" class=".sp"/>
            <img src="images/pic03.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic04.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic05.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic06.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic07.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic08.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic09.jpg" onClick="change_bg(event);" class=".sp" />
            <img src="images/pic10.jpg" onClick="change_bg(event);" class=".sp" />
        </div> <!-- end gallery -->

	</footer> <!-- end footer -->

</div>
</body>
</html>

## style.css
/* ------ background ------ */

	*{
	}
	html{
	}

	body {
		background:url(../images/background-home.jpg)  no-repeat center center;
		background-size: cover ;
		margin: 0px;
		padding: 0px;
		width:100%;
		height: 100%;
		min-height:768px;
		position: relative;
		font-family:"Times New Roman", Times, serif;

	}

	@font-face {
		font-family:OpenSans-Bold;
		src:url(../fonts/OpenSans/OpenSans-Bold.ttf);
	}

	@font-face {
		font-family:OpenSans-Regular;
		src:url(../fonts/OpenSans/OpenSans-Regular.ttf);
	}

	@font-face {
		font-family: OpenSans-Semibold;
		src:url(../fonts/OpenSans/OpenSans-Semibold.ttf);
	}

	#wrapper {
		position: relative;

	}

	/* ------ header ------*/
	header {
		background:url(../images/grey1.jpg) repeat-y;
		width: 235px;
		height: 181px;
		opacity: 0.8;
		position:relative;
	}

	#logo {
		position:absolute;
		background:url(../images/logo.jpg) no-repeat;
		width: 86px;
		height: 109px;
		top: 30px;
		left: 58px;
	}

	/* ------ left content ------ */
	#body {
		float:left;
		position:relative;
		height:600px;
		margin-bottom: -100px;
		background-color: #a9a9a9;
		width:204px;
		opacity: 0.8;
		z-index: 2;
	}

	#menu
	{
		font-size:0.95em;
		width:150px;
		padding-top: 27px;
	}

	#menu ul { margin:0; padding:0; }
	#menu li { list-style: none; }

	#menu a {
	 color: #000;
	 cursor: pointer;
	 display:block;
	 height:35px;
	 line-height: 25px;
	 text-indent: 70px;
	 text-decoration:none;
	 width:100%;
	 font-family:MuseoSans_500;
	}

	#menu li a:hover{
	 text-decoration:underline;
	}

	#menu li a.active{
		text-decoration: underline;
		color: #005213;
	}

	#images{
		cursor:pointer;
		position:absolute;
		bottom: 25px;
	}

	/* ------ right content ------ */
	#content {
		margin: 0 0 0 204px;
		background:url(../images/contack-cont-back.jpg) repeat-x;
		position:relative;
		height: 600px;
		opacity: 0.8;
		z-index: 2;
	}

	#content2 {
		margin: 0 0 0 204px;
		background:url(../images/contack-cont-back2.jpg) repeat-x;
		height: 600px;
		opacity: 0.8;
		z-index: 2;
	}

	#content2 ul{
		list-style-type: none;
		width: 663px;
		margin-top:-15px;
	}

	#content2 ul li{
		float:left;
	}

	#content2 ul li a {
	display: block;
	line-height: 20px;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	font-family:OpenSans-Semibold;
	border-right: 1px solid grey;
	color: #4f534f;
	font-family:OpenSans-Semibold;
	}

	#mainnav
	{
		font-size:0.95em;
		width:150px;
		padding-top: 0;
	}

	#mainnav ul { margin:0; padding:0; float:left; }
	#mainnav li {
	list-style: none;
	 color: #000;
	 cursor: pointer;
	 display:block;
	 height:35px;
	 line-height: 5px;
	 text-indent: 30px;
	 text-decoration:none;
	 width:100%;
	 font-family:OpenSans-Semibold;
	 }


	#wrap_gallery{
		margin: 0 0 0 33%;
		height: 600px;
		opacity: 0.8;
		z-index: 2;
	}

	#content h1{
		font-family: Avenir;
		position: absolute;
		padding-top:350px;
	}

	#info h3{
		position:absolute;
		margin-left: 50px;
		margin-top: 10px;
		font-family:OpenSans-Regular;
		color:#333333;
	}

	#info p{
		line-height: 1.75em;
		position:absolute;
		margin-left: 50px;
		margin-top: 60px;
		font-family: OpenSans-Semibold;
		color:#5c5f5c;
	}

	#pic01{
		cursor: pointer;
		position:absolute;
		padding-left: 56px;
		width: 150px;
	}

	#pic01 p{
		margin-top: 0px;
		color:#666;
		text-align:center;
		font-family:OpenSans-Semibold;
	}


	#pic02{
		cursor: pointer;
		position:absolute;
		padding-left: 276px;
		width: 150px;
	}

	#pic02 p{
		margin-top: 0px;
		color:#666;
		text-align:center;
		font-family:OpenSans-Semibold;
	}

	#pic03{
		cursor: pointer;
		position:absolute;
		padding-left: 494px;
		width: 150px;
	}

	#pic03 p{
		margin-top: 0px;
		color:#666;
		text-align:center;
		font-family:OpenSans-Semibold;
	}


	#map{
	}

	#form{
		position:absolute;
		padding-left: 500px;
		padding-top: 30px;
		width: 300px;
	}

	#form label{
		float: left;
		width: 25%;
		text-align: right;
		margin-right: 0.5em;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		font-family: OpenSans-Bold;

	}

	#form input{
		display: block;
		padding: 0 4px 0 10px;
		background:url(../images/input1.jpg) no-repeat;
		border:none;
		width:200px;
		 height: 30px;
	}

	#form .input{
	  display: block;
		padding: 0 4px 0 10px;
		background:url(../images/textarea.jpg) no-repeat;
		border:none;
		width:200px;
		 height: 100px;

	}

	#form .submit{
		cursor:pointer;
		padding: 0 4px 0 10px;
		background:url(../images/button.jpg);
		border:none;
		width:110px;
		 height: 30px;
		 border:none;

	}

	.clear{
		clear:both;
	}

	/* ------ foooter ------ */
	footer{
		background: rgb(148, 148, 148) center center;
		margin: 0 0 0 204px;
		bottom:0;
		position:relative;
		height: 100px;
		opacity: 0.8;
		z-index: 2;
		overflow:auto;
	}

	footer #gallery
	{
		cursor:pointer;
		position: absolute;
		top:10px;
		left: 20px;
	}

	.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 90%;
		position: relative;
		margin: 40px 10px 10px 40px;
		padding: 0;
		height:90%;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }

	<html>
	<head>
	<meta charset="utf-8">
	<title>Home Page</title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link href="css/bio.css" rel="stylesheet" type="text/css" media="all">

	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
	<script language="JavaScript" type="text/javascript">
	var reloaded = false;
	var loc=""+document.location;
	loc = loc.indexOf("?reloaded=")!=-1?loc.substring(loc.indexOf("?reloaded=")+10,loc.length):"";
	loc = loc.indexOf("&")!=-1?loc.substring(0,loc.indexOf("&")):loc;
	reloaded = loc!=""?(loc=="true"):reloaded;


	function reloadOnceOnly() {
	if (!reloaded)
	window.location.replace(window.location+"?reloaded=true");

	/* if ($.browser.mozilla \|\| $.browser.msie)
	{
	$('footer').css("position" , "absolute");
	$('footer').css("width" , "82%");
	$('footer').css("right" , "34px");
	}*/

	}

	//You can call this via the body tag if desired
	reloadOnceOnly();


	</script>

	<script type="text/javascript">
	function change_bg(event){

	var target = event.target ? event.target : event.srcElement;
	var imgsrc = target.src;
	var gal = imgsrc.replace("images", "gallery");
	{
	$(document.body).css("background-image", "url("+gal+")");
	}

	}
	</script>
	<script type="text/javascript">
	var g=1;
	function nextImage()
	{
	if(g == 11)
	{
	g=1;
	var img = $("#gallery :nth-child("+g+")").attr("src");
	var gal = img.replace("images", "gallery");
	$(document.body).css("background-image", "url("+gal+")");

	}
	else
	{
	var img = $("#gallery :nth-child("+g+")").attr("src");
	var gal = img.replace("images", "gallery");
	$(document.body).css("background-image", "url("+gal+")");
	++g;
	}

	}

	function prevImage()
	{
	if(g == 1)
	{
	g=10;
	var img = $("#gallery :nth-child("+g+")").attr("src");
	var gal = img.replace("images", "gallery");
	$(document.body).css("background-image", "url("+gal+")");

	}
	else
	{
	--g;
	var img = $("#gallery :nth-child("+g+")").attr("src");
	var gal = img.replace("images", "gallery");
	$(document.body).css("background-image", "url("+gal+")");
	}

	}

	function firstImage()
	{

	var img = $("#gallery :nth-child(1)").attr("src");
	var gal = img.replace("images", "gallery");
	$(document.body).css("background-image", "url("+gal+")");

	}

	function lastImage()
	{

	var img = $("#gallery :nth-child(10)").attr("src");
	var gal = img.replace("images", "gallery");
	$(document.body).css("background-image", "url("+gal+")");

	}

	</script>


	</head>



	<body onLoad="reloadOnceOnly();">

	<div id="wrapper">
	<header>

	<div id="logo">

	</div> <!-- end logo -->
	</header> <!-- end header -->

	<div id="body">

	<div id="menu">
	<ul>
	<li><a href="#" class="active">HOME</a></li>
	<li><a href="offer1.html">PONUDA</a></li>
	<li><a href="#">REFERENCE</a></li>
	<li><a href="about_us.html">O NAMA</a></li>
	<li><a href="contact.html">KONTAKT</a></li>
	</ul>
	</div> <!-- end menu -->

	<div id="images">


	<img src="images/first.jpg" alt="first image" title="Go the first image" onClick="firstImage();" />

	<img src="images/prev.jpg" alt="next image" title="Go the prev image" onClick="prevImage();"/>

	<img src="images/next.jpg" alt="next image" title="Go the next image" onClick="nextImage();"/>

	<img src="images/last.jpg" alt="last image" title="Go the last image" onClick="lastImage();" />


	</div> <!-- end images -->

	</div> <!-- end sidebar -->

	<div class="clear"></div>
	<footer>

	<div id="gallery">
	<img src="images/pic01.jpg" onClick="change_bg(event);" class=".sp"/>
	<img src="images/pic02.jpg" onClick="change_bg(event);" class=".sp"/>
	<img src="images/pic03.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic04.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic05.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic06.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic07.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic08.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic09.jpg" onClick="change_bg(event);" class=".sp" />
	<img src="images/pic10.jpg" onClick="change_bg(event);" class=".sp" />
	</div> <!-- end gallery -->

	</footer> <!-- end footer -->

	</div>
	</body>
	</html>
	/* ------ background ------ */

	*{
	}
	html{
	}

	body {
	background:url(../images/background-home.jpg) no-repeat center center;
	background-size: cover ;
	margin: 0px;
	padding: 0px;
	width:100%;
	height: 100%;
	min-height:768px;
	position: relative;
	font-family:"Times New Roman", Times, serif;

	}

	@font-face {
	font-family:OpenSans-Bold;
	src:url(../fonts/OpenSans/OpenSans-Bold.ttf);
	}

	@font-face {
	font-family:OpenSans-Regular;
	src:url(../fonts/OpenSans/OpenSans-Regular.ttf);
	}

	@font-face {
	font-family: OpenSans-Semibold;
	src:url(../fonts/OpenSans/OpenSans-Semibold.ttf);
	}

	#wrapper {
	position: relative;

	}

	/* ------ header ------*/
	header {
	background:url(../images/grey1.jpg) repeat-y;
	width: 235px;
	height: 181px;
	opacity: 0.8;
	position:relative;
	}

	#logo {
	position:absolute;
	background:url(../images/logo.jpg) no-repeat;
	width: 86px;
	height: 109px;
	top: 30px;
	left: 58px;
	}

	/* ------ left content ------ */
	#body {
	float:left;
	position:relative;
	height:600px;
	margin-bottom: -100px;
	background-color: #a9a9a9;
	width:204px;
	opacity: 0.8;
	z-index: 2;
	}

	#menu
	{
	font-size:0.95em;
	width:150px;
	padding-top: 27px;
	}

	#menu ul { margin:0; padding:0; }
	#menu li { list-style: none; }

	#menu a {
	color: #000;
	cursor: pointer;
	display:block;
	height:35px;
	line-height: 25px;
	text-indent: 70px;
	text-decoration:none;
	width:100%;
	font-family:MuseoSans_500;
	}

	#menu li a:hover{
	text-decoration:underline;
	}

	#menu li a.active{
	text-decoration: underline;
	color: #005213;
	}

	#images{
	cursor:pointer;
	position:absolute;
	bottom: 25px;
	}

	/* ------ right content ------ */
	#content {
	margin: 0 0 0 204px;
	background:url(../images/contack-cont-back.jpg) repeat-x;
	position:relative;
	height: 600px;
	opacity: 0.8;
	z-index: 2;
	}

	#content2 {
	margin: 0 0 0 204px;
	background:url(../images/contack-cont-back2.jpg) repeat-x;
	height: 600px;
	opacity: 0.8;
	z-index: 2;
	}

	#content2 ul{
	list-style-type: none;
	width: 663px;
	margin-top:-15px;
	}

	#content2 ul li{
	float:left;
	}

	#content2 ul li a {
	display: block;
	line-height: 20px;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	font-family:OpenSans-Semibold;
	border-right: 1px solid grey;
	color: #4f534f;
	font-family:OpenSans-Semibold;
	}

	#mainnav
	{
	font-size:0.95em;
	width:150px;
	padding-top: 0;
	}

	#mainnav ul { margin:0; padding:0; float:left; }
	#mainnav li {
	list-style: none;
	color: #000;
	cursor: pointer;
	display:block;
	height:35px;
	line-height: 5px;
	text-indent: 30px;
	text-decoration:none;
	width:100%;
	font-family:OpenSans-Semibold;
	}


	#wrap_gallery{
	margin: 0 0 0 33%;
	height: 600px;
	opacity: 0.8;
	z-index: 2;
	}

	#content h1{
	font-family: Avenir;
	position: absolute;
	padding-top:350px;
	}

	#info h3{
	position:absolute;
	margin-left: 50px;
	margin-top: 10px;
	font-family:OpenSans-Regular;
	color:#333333;
	}

	#info p{
	line-height: 1.75em;
	position:absolute;
	margin-left: 50px;
	margin-top: 60px;
	font-family: OpenSans-Semibold;
	color:#5c5f5c;
	}

	#pic01{
	cursor: pointer;
	position:absolute;
	padding-left: 56px;
	width: 150px;
	}

	#pic01 p{
	margin-top: 0px;
	color:#666;
	text-align:center;
	font-family:OpenSans-Semibold;
	}



	#pic02{
	cursor: pointer;
	position:absolute;
	padding-left: 276px;
	width: 150px;
	}

	#pic02 p{
	margin-top: 0px;
	color:#666;
	text-align:center;
	font-family:OpenSans-Semibold;
	}

	#pic03{
	cursor: pointer;
	position:absolute;
	padding-left: 494px;
	width: 150px;
	}

	#pic03 p{
	margin-top: 0px;
	color:#666;
	text-align:center;
	font-family:OpenSans-Semibold;
	}


	#map{
	}

	#form{
	position:absolute;
	padding-left: 500px;
	padding-top: 30px;
	width: 300px;
	}

	#form label{
	float: left;
	width: 25%;
	text-align: right;
	margin-right: 0.5em;
	color: #333333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	font-family: OpenSans-Bold;

	}

	#form input{
	display: block;
	padding: 0 4px 0 10px;
	background:url(../images/input1.jpg) no-repeat;
	border:none;
	width:200px;
	height: 30px;
	}

	#form .input{
	display: block;
	padding: 0 4px 0 10px;
	background:url(../images/textarea.jpg) no-repeat;
	border:none;
	width:200px;
	height: 100px;

	}

	#form .submit{
	cursor:pointer;
	padding: 0 4px 0 10px;
	background:url(../images/button.jpg);
	border:none;
	width:110px;
	height: 30px;
	border:none;

	}

	.clear{
	clear:both;
	}

	/* ------ foooter ------ */
	footer{
	background: rgb(148, 148, 148) center center;
	margin: 0 0 0 204px;
	bottom:0;
	position:relative;
	height: 100px;
	opacity: 0.8;
	z-index: 2;
	overflow:auto;
	}

	footer #gallery
	{
	cursor:pointer;
	position: absolute;
	top:10px;
	left: 20px;
	}

	.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	}

	.modalDialog:target {
	opacity:1;
	pointer-events: auto;
	}

	.modalDialog > div {
	width: 90%;
	position: relative;
	margin: 40px 10px 10px 40px;
	padding: 0;
	height:90%;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	}

	.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }