body {
    background-color: black;
    color: white;
    /* font-family: sans-serif; */
}

a {
    color: white;
}
h1 { 
    color: #777; 
    font-size: 1.2em; 
    font-family: sans-serif;
    padding: 14px 2px 12px; 
    margin: 0px; 
}
h1 em { 
    font-style: normal; 
    color: #999; 
}

#magnus-label {
    width:759px;
    margin:0px auto 0px;
    position:relative;
}
#magnus-label  h3 {
    margin:0px 30px 0px;
    font:33px Times New Roam, Times, serif;
}

#magnus-label .profession {
    margin:0px 270px 0px;
}

#about-content {
    width:759px;
    margin:20px auto 0px;
    position:relative;
    height: 470px;
    background-image: url(../images/magnus-filtered.jpg);
}

#about-content .tekst{
    display:inline-block;
    margin:34px 20px 0px;
}

#about-content .overlay {
    position:absolute; top:0px; left:0px; width:759px; height:050px; 
    background-image: -moz-linear-gradient(to bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 75%);
    background-image: 	-o-linear-gradient(rgba(0,0,0,0) 25%, rgb(0,0,0) 80%);
    background-image:     -webkit-gradient(linear, left top, left bottom, color-stop(0.20, rgb(0,0,0)), color-stop(0.80, rgba(0,0,0,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}

#about-content p { 
    font-size: 108%;
    background-color: rgba(80,80,80,0.1);
    text-align: justify;
}

table.contact-table {
    margin-left:auto; 
    margin-right:auto;
    font-family: verdana,arial,sans-serif;
    margin-top: 50px;
    font-size:15px;	
    padding: 15px;
}

.centered {
  width: 759px;
  position: absolute;
  left: calc(50% - 379px);
}

/* ==============================================
			Event Calendar
   ============================================== */
cal {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align:center;
}

cal table {
    width: 470px;
    margin:80px 270px 0px;
    background: #292929;
    background: rgba(0,0,0,0); 
    color: grey;
    list-style: none;
    padding-left: 0;
    display:inline-block;
}

th, td {
    padding: 5px;
    text-align: left;
}

td.dato { 
    width: 60px;
} 

#grad1 {
    width:759px;
    margin:0px auto 0px;
    position:relative;
    height: 250px;
    /* background: rgb(125,126,125); */
    background: -moz-linear-gradient(180deg, black 1%, rgba(24,24,24,24) 100%);  	/* For Firefox 3.6 to 15 */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
    background: -webkit-linear-gradient(180deg, black 1%, rgba(24,24,24,24) 100%);  /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, black 1%, rgba(24,24,24,24) 100%);		/* For Opera 11.1 to 12.0 */
    background: -ms-linear-gradient(180deg, black 1%, rgba(24,24,24,24) 100%);
    background: linear-gradient(180deg, black 1%, rgba(24,24,24,24) 100%);			/* Standard - must be last */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 );

    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

#social-media-cont {
    width:759px;
    margin:0px auto 0px;
    position:relative;
    float: right;
}

#events
{
    width: 600px;
    padding-left: 0;
    display:inline-block;
    background-image:
    -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.15, rgb(189,189,189)),
        color-stop(0.58, rgb(0,0,0)),
        color-stop(0.79, rgb(0,0,0))
    )
    -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 15%,
        rgb(0,0,0) 58%,
        rgb(0,0,0) 79%
    )
}


/* ==============================================
			Albums page
   ============================================== */

#album-content {
    margin: 0px auto 0px;
    position:relative;
    width:700px;
} 

table.album-class {
    margin-right:15px;
    margin-left:15px;
    margin-top: 50px;
    font-size:13px;
    font-family: verdana,arial,sans-serif;
    border: 6px solid rgb(60,60,60);
	
}

table td.album-name {
    font: 17px Helvetica, Verdana, sans-serif; color:red;
}
table td.album-info {
    margin-right: 0px;
    font-size:13px;
}
table td.album-data {
    font-size:10px;
}

table th img {
    display: block;
    float: left;
    width: 90px;
    padding: 5px;
    margin-right: 20px;
}

.album-class td{ height: 13px; }


table.album-class th {
    vertical-align:top;
    color: white;    
}

.albums {
    background: rgb(60,60,60) ;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
} 

/* ==============================================
			Listen Page 
   ============================================== */

a { 
    color: #888; /* Heiti(caption) á lagiđ í lista */
    text-decoration: none; 
}
#wrapper { 
    width: 400px; 
    margin: 40px auto; 
}    
ol { 
    padding: 0px; 
    line-height: 1.6;
    margin: 0px; 
    list-style: decimal-leading-zero inside; 
    color: #ccc; 
    width: 80%; 
    border-top: none; 
    font-size: 0.9em; 
}
ol li { 
    position: relative; 
    margin: 0px; 
    padding: 9px 2px 2px; 
    border-bottom: 1px solid #444; 
    cursor: pointer; 
}
ol li a { 
    display: block; 
    text-indent: -3.3ex; 
    padding: 0px 0px 0px 20px; 
}
li.playing { /* nr.(caption) á lagiđ, sum verđur spćlt */
    color: #ccc; 
    font-weight: 500;
}
li.playing a {   /* Heiti(caption) á lagiđ, sum verđur spćlt */
    color: #ccc; 
}
li.playing:before { 
    color: #ccc; 
    content: '♬';
    width: 14px; 
    height: 14px; 
    padding: 3px; 
    line-height: 14px; 
    margin: 0px; 
    position: absolute; 
    left: -24px; 
    top: 9px; 
    font-size: 13px; 
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); 
}

@media screen and (max-device-width: 480px) {
    #wrapper { 
        position: relative; left: -3%; 
    }
    #shortcuts { 
        display: none; 
    }
}

/* ==============================================
			Picture Page 
   ============================================== */

.photo {width:635px; text-align:left; position:relative; margin: 40px auto 0px;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {
	display:block; font-family:verdana, arial, sans-serif; font-size:13px; width:124px; height:30px; text-align:center; line-height:30px; color:white; 
	text-decoration:none; border:none; border-width:1px 1px 0 0; 
	background: rgb(125,126,125);
	background: -moz-linear-gradient(top,  black 0%, rgb(90,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,black), color-stop(100%,rgb(90,0,0)));
	background: -webkit-linear-gradient(top,  black 0%,rgbargb(90,0,0) 100%);
	background: -o-linear-gradient(top,  black 0%,rgb(90,0,0) 100%);
	background: -ms-linear-gradient(top,  black 0%,rgb(90,0,0) 100%);
	background: linear-gradient(to bottom,  black 0%,rgb(90,0,0) 100%);
					  }

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none; border-radius:10px; border-top-left-radius:0px;}

.photo ul.topic li.active a {
	color:white; 
	background: rgb(125,126,125);
	background: -moz-linear-gradient(top,  #292929 0%, rgb(90,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#292929), color-stop(100%,rgb(90,0,0)));
	background: -webkit-linear-gradient(top,  #292929 0%,rgbargb(90,0,0) 100%);
	background: -o-linear-gradient(top,  #292929 0%,rgb(90,0,0) 100%);
	background: -ms-linear-gradient(top,  #292929 0%,rgb(90,0,0) 100%);
	background: linear-gradient(to bottom,  #292929 0%,rgb(90,0,0) 100%);
	}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a {
	color:#fff; 
	background: rgb(125,126,125);
	background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgb(90,0,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgb(90,0,0)));
	background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgbargb(90,0,0) 100%);
	background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgb(90,0,0) 100%);
	background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgb(90,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgb(90,0,0) 100%);
}

.photo ul.topic li.active ul {
	display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:rgba(34,34,34,1); width:464px; padding:40px 60px; 
	border:20px solid rgb(90,0,0); border-radius:10px; border-top-left-radius:0px;
	z-index:1;
}
								
.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:rgba(34,34,34,10); width:464px; padding:40px 60px; border:20px solid rgb(90,0,0); z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}

   

/* ==============================================
			Navigation bar 
   ============================================== */
nav  {
    display: block;
    width: 100%;
    overflow: hidden;
    text-align:center;
}

nav ul {
    padding: .7em;
    display:inline-block;
    list-style: none;
}

nav li {
    float:left;
}

nav a {
    display:inline-block;
    padding: .8em 1.5em;
    text-decoration: none;
    color: #fff;
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: rgb(125,126,125);
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
 }
 
nav a:hover, nav a:focus {
    outline: 0;
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    background: #c1c1c1;
    background: linear-gradient(#f5f5f5, #c1c1c1);            
}

#current a  { 
	color: red; 
}
 
nav li:first-child a {
    border-left: 0;
    border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            
}


/* ==============================================
					Theme black 
   ============================================== */
#gallery-black {
    width:759px;
    margin:20px auto 0px;
    position:relative;
    overflow:hidden;
}

#gallery-black .image-block {
    width:759px;
    height:459px;
    float:left;
}

#gallery-black .reflection {
    position:relative;
}

#gallery-black .reflection img {  
	-webkit-transform: scaleY(-1);
 	   -moz-transform: scaleY(-1);
	    -ms-transform: scaleY(-1);
	     -o-transform: scaleY(-1);
		    transform: scaleY(-1);
			   filter: flipv;
	opacity:0.20;
	filter: alpha(opacity='20'); 
}

#gallery-black .overlay {
    position:absolute; top:0px; left:0px; width:759px; height:250px; 
    background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 60%, rgba(0,0,0,0) 75%);
    background-image: 	-o-linear-gradient(rgba(0,0,0,0) 25%, rgb(0,0,0) 40%);
    background-image:     -webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(0,0,0)), color-stop(0.80, rgba(0,0,0,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}



/* ==============================================
					Social Media
   ============================================== */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}