* {
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
    color: #555;
}

body {
    background-color: #484370;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

#main {
    background: #ccc url(images/noise.png) top left repeat;
    width: 900px;
    margin: 0 auto;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 -3px 2px #333, 0 -2px 1px white;
    -webkit-box-shadow: inset 0 -3px 2px #333, 0 -2px 1px white;
    box-shadow: inset 0 -3px 2px #333, 0 -2px 1px white;
}

h1 {
    font-size: 32pt;
    font-weight: normal;
    font-family: verdana, sans-serif;
    margin: 12px 0 10px 0;
    color: #8a87c0;
    text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0, rgba(0, 0, 0, 0.6) 0 -1px 0;
    background: url(images/metapad-icon-64p.png) no-repeat;
    background-size: 64px 64px;
    padding-left:84px;
    height:64px;
    display:inline-block;
}

.metapad-icon-large {
    background: url(./images/metapad-icon-150p.png) no-repeat;
    background-size: 150px 150px;
    width: 150px;
    height: 150px;
    float: left;
}

.byline {
    padding-left:6px;
    font-size:15px;
    letter-spacing:1px;
    color:#999;
    text-shadow: rgba(255, 255, 255, 0.7) 0px 1px 0px;
}

.copyline {
    padding-left:6px;
    font-size:14px;
    color:#777;
    text-shadow: rgba(255, 255, 255, 0.7) 0px 1px 0px;
    margin-bottom:8px;
}

h1.logo {
    font-size:90px;
    margin: 12px 0 10px 0;
    display:inherit;
    height:inherit;
    padding:inherit;
    background: inherit;
}

h2 {
    font-size: 15pt;
    font-weight: normal;
    font-family: verdana;
}

h3 {
    font-size: 13pt;
    font-weight: bold;
    font-family: verdana;
}

a:link, a:visited {
    color: #552ea8;
    background: transparent;
    text-decoration : none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: white;
}

img {
    border: 0;
}

hr {
    height:2px; 
    color:#bbb; 
    background-color: #bbb;
    border-width:0;
}

form {
    margin: 0;
    padding: 0;
}

.table_header {
    color: #444;
    font-weight: bold;
}

.thickborder {
    border: 2px solid #bbb;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.middot {
    color:#aaa;
}

.dltablecell {
    border: 1px solid #bbb;
}

#zoom{ width: 25%; height: 25%; -webkit-transition: 0.25s; }
#zoom:target{ width: 50%; height: 50%; }

.imagezoom {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.imagezoom:hover {
    -webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    transform: scale(2.0);
    z-index:100;
	position:relative;
}

.right_bar {
    padding: 14px 16px 0 0;
}

.twitterbox {
    background:#8a87c0;
    padding:10px 4px 10px 16px;;
    margin-bottom:8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    width: 139px;
    margin-left:3px;
}

.twitterbox b {
    color: white;
}

.twitterbox a:link,.twitterbox a:visited,.twitterbox a:hover,.twitterbox a:active {
    text-decoration: none;
    color: white;
    font-size:15px;
    -webkit-transition: text-shadow 0.25s linear;
    -moz-transition: text-shadow 0.25s linear;
    transition: text-shadow 0.25s linear;
}

.twitterbox a:hover {
    -webkit-text-shadow: white 0 0 7px;
    -moz-text-shadow: white 0 0 7px;
    text-shadow: white 0 0 7px;
}

.note {
    background:#e7e8db;
    border: 1px solid #9c61ee;
    padding: 10px 16px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.twitter-icon {
	background: transparent url(./images/twitter-icon-dark.png) no-repeat;
	width: 19px;
	height: 19px;
    background-size: 19px 19px;
	display: inline-block;
	vertical-align: text-bottom;
}

.bottom-logo {
	background: transparent url(./images/frostninja-tiny.png) no-repeat;
	width: 181px;
	height: 62px;
    background-size: 181px 62px;
}

/* RETINA GRAPHICS */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
			only screen and (-o-min-device-pixel-ratio: 3/2),
			only screen and (min--moz-device-pixel-ratio: 1.5),
			only screen and (min-device-pixel-ratio: 1.5) {

	.twitter-icon {
		background-image: url(./images/twitter-icon-dark@2x.png);
	}
	.bottom-logo {
		background-image: url(./images/frostninja-tiny@2x.png);
	}
	h1 {
	    background-image: url(images/metapad-icon-128p.png);
	}
	.metapad-icon-large {
	    background-image: url(images/metapad-icon-300p.png);
	}
}