@font-face {
font-family: 'TrajanPro-Regular';
font-style: normal;
font-weight: normal;
src: url(http://darknightglow.com/images/TrajanPro-Regular.otf);
 }



p {
	line-height: 140%;
	text-rendering: optimizeLegibility;
}
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
fieldset {
	border:0;
}
a, a:link, a:visited, a:hover {
	color:#00f;
	text-decoration:none;
}
a:focus, a:hover {
	text-decoration:underline;
}
a img {
	border: none;
}
.clear {
	clear:both;
}
body {
	background:#000 url(../images/bg.jpg) center top repeat;
}
.todo {
margin:0 auto;
display:block;
width: 1100px;
	position: relative;
	background: url(../images/vertical.png) center top repeat-y;
	color:#999900;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header {
height:850px;
}
.VER {
	text-align:center;
	font-weight:bold;
	display:block;
	width:130px;
	background-color: #000000;
	color:#333333;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	height:16px;
	padding:4px 1px;
	margin:-24px 0 0 -1px;
	float:left;
	opacity:0.8;
	filter:alpha(opacity=80);
}
#portfolio_container a {
	color:#3F98EF;
	text-decoration:none;
}
#portfolio_container a:hover {
	color:#ffffff;
	background-color:#333333;
	text-decoration:none;
}
 h2 {
	color: #383838;
    font-family: 'TrajanPro-Regular', arial, serif; 
    font-size: 34px;
	text-transform: capitalize;
    font-style: normal;
    font-weight: lighter;
	text-shadow: 1px 1px 1px #ffffff;
	margin: 0 0 0 50px;
}

#logo {
	display: block;
	width: 190px;
	height: 216px;
	float: left;
	background: url(../images/DarkNightGlow_Logo.png) no-repeat;
	text-indent: -99999px;
	clear: both;
	margin: 20px;
}
.player {
	display: block;
	width: 787px;
	height: 461px;
	float: left;
	background: url(../images/bgplayer.png) no-repeat;
	clear: both;
	margin:-20px 0 0 96px;
	padding:20px 0 0 0;

}
.ID {
	display: block;
	width: 366px;
	height: 500px;
	float: left;
	background: url(../images/D.png) no-repeat;
	text-indent: -99999px;
	margin:70px 20px 50px -20px;
}
#facebook {
width:604px;
height:247px;
	display: block;
	float:left;
	margin:10px 0 0 0;
	border:none;
	background: url(../images/bgfacebook.png) no-repeat top center;
}
#facebook ul {
list-style-type:none;
text-align:center;
margin: 13px 0 0 0;
}
.fbConnectWidgetTopmost {
border: none;
overflow:hidden;
padding:0;
position:relative;
}
#facebook iframe {
border:none;
}
/*#navigation {
	color: #999;
	font-family: "Helvetica Neue", Tahoma, Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: normal;
	line-height: 26px;
	text-decoration: none;
	text-shadow: none;
	color:#03468b;
	height: 50px;
	clear: both;
}
#navigation ul {
	float: left;
}
#navigation ul li {
	float: left;
	margin: 0px 24px 0px 0px;
}
#navigation ul li a {
	font-size: 22px;
	color: #03468b;
	padding: 0 5px;
}
#navigation ul li a:hover {
	display:block;
	padding:0 5px;
	background-color:#03468b;
	color:#FFF;
	text-decoration:none;
}*/
#social {
	font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
	float: left;
	margin: 20px 0 0 15px;
	display:block;
	width:50px;
	height:300px;
}
.serpadorlink {
display:block;
height:690px;
float:left;
margin: 0 10px;
}
.arriba{
display:block;
padding:0;
margin:0;
background-image:url(../images/arriba.png);
background-repeat:no-repeat;
width: 282px;
height: 16px;
}
.abajo{
display:block;
padding:0;
margin:0;
background-image:url(../images/abajo.png);
background-repeat:no-repeat;
width: 282px;
height: 16px;
}
.arriba_02{
display:block;
padding:0;
margin:0;
background-image:url(../images/arriba_02.png);
background-repeat:no-repeat;
width: 660px;
height: 16px;
}
.abajo_02{
display:block;
padding:0;
margin:0;
background-image:url(../images/abajo_02.png);
background-repeat:no-repeat;
width: 660px;
height: 16px;
}
.verticalink{
float:left;
display:block;
padding:0;
margin:0;
background-image:url(../images/verticalink.png);
background-repeat:no-repeat;
width: 53px;
height: 700px;
}

.link ul{
font-family: 'TrajanPro-Regular', arial, serif; 
list-style-image:none;
list-style-position:outside; 
list-style-type:none;
margin:0;
width:282px;
}
.link ul li {
padding:0;
margin:5px 0;
  text-align:center;
}
.link ul li a {
  font-family: 'TrajanPro-Regular', arial, serif;
  color: #5b5229;
  font-size:14px;
  padding: 0 10px;
}
.link ul li a:hover {
  color: #333333;
  background-color: #FFFFFF;
  font-size:14px;
  text-decoration:none;
  padding: 5px 10px;
}

ul #menucial {
list-style-image:none;
list-style-position:outside; 
list-style-type:none;
margin:0;
padding-top:0;
width:48px;
}

#menu a {
color: #383838;
    font-family: 'TrajanPro-Regular', arial, serif; 
    font-size: 28px;
	text-transform: capitalize;
    font-style: normal;
    font-weight: lighter;
	text-shadow: 1px 1px 1px #ffffff;
	margin: 0 5px;
}
#menu a:hover {
color: #ffffff;
    font-family: 'TrajanPro-Regular', arial, serif; 
    font-size: 28px;
	text-transform: capitalize;
    font-style: normal;
    font-weight: lighter;
	text-shadow: 1px 1px 1px #383838;
	margin: 0 5px;
	text-decoration:none;
}
#social ul li {
	float: left;
	font-size: 13px;
	color: #a8a5a4;
	margin:0;
}
#social ul li a {
background-image:url(../images/redes.png);
display:block;
float:left;
width:48px;
margin:0 0 6px 0;
text-indent:-9999px;
}

#social ul li a.facebook {
background-position:0 0;
height:48px;
}
#social ul li a.blogspot {
background-position:0 -55px;
height:48px;
}
#social ul li a.youtube {
background-position:0 -110px;
height:48px;
}
#social ul li a.twitter {
background-position:0 -165px;
height:48px;
}
#social ul li a.facebook:hover{
background-position:-48px 0;
}
#social ul li a.blogspot:hover{
background-position:-48px -55px;
}
#social ul li a.youtube:hover{
background-position:-48px -110px;
}
#social ul li a.twitter:hover{
background-position:-48px -165px;
}
/**/
#menupri {
	width: 960px;
	height: 105px;
	margin:0 0 0 -10px;
	list-style: none;
	float:left;
}
.barratit {
background-image: url(../images/barratit.png);
background-repeat:no-repeat;
background-position:bottom;
padding: 0 -10px 0 0;
display:block;
width: 970px;
height: 37px;
}
.barratit_gallery {
background-image: url(../images/titulero_gallery.png);
background-repeat:no-repeat;
background-position:bottom;
padding: 0 -10px 0 0;
display:block;
width: 599px;
height: 98px;
text-indent: -99999px;
margin: 40px 0 0 -32px;
}
.barratit_about{
background-image: url(../images/titulero_about.png);
background-repeat:no-repeat;
background-position:bottom;
padding: 0 -10px 0 0;
display:block;
width: 599px;
height: 98px;
text-indent: -99999px;
margin: 60px 0 0 -32px;
}
.barratit_links {
background-image: url(../images/titulero_links.png);
background-repeat:no-repeat;
background-position:bottom;
padding: 0 -10px 0 0;
display:block;
width: 599px;
height: 98px;
text-indent: -99999px;
margin: 40px 0 0 -32px;
}
.barratit_contact {
background-image: url(../images/titulero_contact.png);
background-repeat:no-repeat;
background-position:bottom;
padding: 0 -10px 0 0;
display:block;
width: 599px;
height: 98px;
text-indent: -99999px;
margin: 60px 0 0 -32px;
}


.barratit_down {
background-image: url(../images/barratit_down.png);
background-repeat:no-repeat;
background-position:bottom;
padding: 0 -10px 0 0;
margin: -79px 0 -25px
display:block;
width: 980px;
height: 95px;
}
.barrita {
background-image: url(../images/verti.png);
background-repeat:no-repeat;
background-position: center;
margin:0;
padding:0;
display:block;
width: 2px;
height: 41px;
}

ul#menu {
width: 960px; 
margin:-20px 0 0 110px;
list-style: none;
float:left;
}

ul#menu li {
display: inline;
}
#teasers {
width: 960px;
height: 195px;
margin: 0px 0px 35px 0px;
}
#teasers h2 {
color: #dddc67;
font-size: 18px;
margin: 0px 0px 20px 0px;
font-weight: normal;
}
#teasers p {
font-size: 14px;
color: #dedbda;
line-height: 135%;
}
.teaser_container {
width: 271px;
height: 195px;
float: left;
padding: 0px 0px 0px 29px;
}
#portfolio_container {
	width: 958px;
	height: 700px;
	/*height: 380px;*/
padding:12px 0 0 0;
	margin: 50px 0 0 6px;
}
#portfolio_container ul li {
display: inline;
float: left;
width: 150px;
height: 550px;
margin: 0px 0px 10px 10px;
border: none;
}
#portfolio_container ul li img {
float: left;
}
#content {
float: left;
width: 932px;
clear: both;
padding: 0px 0px 10px 28px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
}
#text {
display: block;
width: 525px;
height: 633px;
float: left;
padding:0;
color: #6B6868;
font-family: 'Josefin Sans', arial, serif;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-shadow: none;
background:url(../images/bgtext.png) no-repeat top;
}

#text p {
color:#444444;
font-family:"Crimson Text";
font-size:17px;
letter-spacing:0;
line-height:1.2em;
text-align:left;
text-decoration:none;
word-spacing:normal;
margin:77px 77px 0 77px;
}
#my_skills {
}
#my_skills h2 {
font-size: 14px;
color: #03468b;
margin: 0px 0px 24px 0px;
}
#my_skills p {
font-size: 13px;
color: #5e4962;
margin: 0px 0px 24px 0px;
}
#my_skills ul li {
width: 219px;
float: left;
font-size: 14px;
margin: 0px 0px 2px 0px;
color: #5E4962;
}
#my_skills ul li span {
float: left;
}
#my_skills ul li img {
float: right;
}

#backtotop  {
text-indent: -9999px;
background-image:url(../images/manoup.png);
background-repeat:no-repeat;
display:block;
width: 46px;
height: 86px;
background-position:top right;
width:996px;
margin: -70px 0 0 0;
}
#hire_me {
clear: both;
padding: 0px;
margin: 0px;
}
#hire_me p {
font-size: 13px;
}
#hire_me p a {
color: #3f98ef;
}
#hire_me p a:hover {
color: #1560aa;
}
#footer {
width: 100%;
height: 66px;
clear: both;
margin: 33px 0px 0px 0px;
background: #d5d0c1;
}
#footer_container {
font-family: Deeko_Comic;
text-align:center;
width: 940px;
margin: 0 auto;
padding: 24px 0px 0px 29px;
}
#footer_container p {
color: #999999;
font-size: 14px;
}
.replace {
position:relative;
margin:0;
padding:0;
overflow:hidden;
}
.replace span {
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
.skiplink {
display:none;
}
#wrapper {
width: 960px;
margin:0 auto;
}
page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
display:block;
width: 801px;
height: 532px;
background:url(../images/bgformall.png) no-repeat top;
padding:38px 78px;
}
#contact-area textarea {
color: #383838;
font-family: 'TrajanPro-Regular', arial, serif; 
text-transform: capitalize;
font-style: normal;
font-weight: lighter;
width: 481px;
height: 80px;
background: none;
margin:13px 0 0 15px;
border: none;
font-size: 20px;
line-height: 23px;
/*padding: 17px 16px 0 16px;
margin: 0 0 -5px 0;
width: 481px;
height: 80px;
border: none;
font-size: 20px;
background:url(../images/bgform_text.png) no-repeat top;*/
}
.bgtextarea {
display:block;
padding: 0 0 0 0;
width: 512px;
height: 122px;
background:url(../images/bgform_text.png) no-repeat top;
}
#contact-area input{
color: #383838;
font-family: 'TrajanPro-Regular', arial, serif; 
text-transform: capitalize;
font-style: normal;
font-weight: lighter;
padding: 0 16px 0 16px;
margin: 10px 0 -5px 0;
width: 481px;
height: 58px;
border: none;
font-size: 20px;
background:url(../images/bgform.png) no-repeat top;
line-height: 10px;
}


#contact-area textarea {
height: 88px;
}
/*.formall {
display:block;
width: 801px;
height: 450px;
background:url(../images/bgformall.png) no-repeat top;
padding:80px 50px;
}*/
form {
padding:0 137px;
}

#contact-area textarea:focus {
border:none;
}
 #contact-area input:focus {
border: none;
background:url(../images/bgform_over.png) no-repeat top;
}

/*#contact-area input.submit-button {
	border:none;
width:150px;
height:50px;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
background:#FFFFFF none repeat scroll 0 0;
float:right;
margin:0;
padding:0;
position:relative;
}

*/
label {
text-align: right;
margin-right: 5px;;
width: 150px;
padding-top: 5px;
color: #383838;
font-family: 'TrajanPro-Regular', arial, serif; 
font-size: 22px;
text-transform: capitalize;
font-style: normal;
font-weight: lighter;
text-shadow: 1px 1px 1px #ffffff;
}


#contact-area input.submit-button{
float:right;
display:block;
background-image:url(../images/submit_2normal.png);
background-repeat:no-repeat;
background-position:top;
width:483px;
height:109px;
border:none;
text-indent:-9999px;
background-color: transparent;
margin:0;
}
#contact-area input.submit-button:hover{
background-image:url(../images/submit_2over.png);
}
#contact-area input.submit-button:active{
background-image:url(../images/submit_2press.png);
}
/* =Shadow Nav
	-------------------------------------------------------------------------- */
#menu_rebote {
background-image: url("../images/barratit_down.png");
background-color:#006699;
width: 960px;
margin:0 10px 0;
position:fixed;
bottom: 0;
z-index: 2;
}
#menu_rebote li{
position: relative;
float: left;
margin:0 30px;
}
#menu_rebote a, #menu_rebote a:visited, #menu_rebote a, #menu_rebote a:hover {
height: 59px;
overflow: hidden;
display: block;
color: #383838;
font-family: 'TrajanPro-Regular', arial, serif; 
font-size: 28px;
text-transform: capitalize;
font-style: normal;
font-weight: lighter;
text-shadow: 1px 1px 1px #ffffff;
text-decoration:none;
}
/* Button Shadow */
#menu_rebote li img.shadow {
margin: 0 0 50px 0;
position: absolute;
bottom: 0;
left: auto;
z-index: 1;
opacity: 0;
}
span.divisore{
height: 40px;
width: 18px;
display:block;
background-image:url(../images/verti.png);
background-repeat: no-repeat;			
}
#menu_rebote li img.shadow {
margin: 0 35% 52px;
}
			
/*EFECTOS DE PAPEL*/			
.lifted {
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
}
.drop-shadow {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
background:#FFFFFF none repeat scroll 0 0;
float:left;
margin:2em 10px 4em;
padding:1em;
position:relative;
width:400px;
}
.limpio{
border:none;
width:150px;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
background:#FFFFFF none repeat scroll 0 0;
float:left;
margin:2em 10px 4em;
padding:1em;
position:relative;
}
/* ANIMACION DE SUBMIT*/
.mosaic-block {
position:relative;
overflow:hidden;
height:108px;
margin:10px;
background-position:top ;
width:334px;
background:url(../img/sombra.png);
background-repeat:no-repeat;
margin:0;
padding:0;
}
.mosaic-overlay {
display:none;
z-index:-1;
position:absolute;
width:100%;
height:100%;
}
.bar .mosaic-overlay {
bottom:20px;
height:-100px;
background:url(../img/submit.png);
background-repeat:no-repeat;
margin:0 0 0 75px;
padding:0;
}
/* CLASES DE LOS ELEMENTOS DE LA GALERIA*/
.jcarousel-skin-tango .jcarousel-container {
background-image:url(../images/bggallery.png);
background-repeat:no-repeat;
background-position:top center;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
	direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 874px;
    padding: 0 40px;
	margin: 0 0 0 14px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 50px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  777px;
    height: 647px;
	margin: 0 60px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  70px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 750x;
    height: 647px;
}
.jcarousel-skin-tango .jcarousel-item li {
float:left;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin-left: 0;
    margin-right: 26px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
	margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 180px;
    right: -9px;
    width: 90px;
    height: 230px;
    cursor: pointer;
    background: transparent url(../images/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(../images/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -90px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -180px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -270px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 180px;
    left: -9px;
    width: 90px;
    height: 230px;
    cursor: pointer;
    background: transparent url(../images/prev-horizontal.png) no-repeat -270px 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(../images/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -90px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -180px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: 0 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../images/next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../images/prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
/* CIERRA CLASES DE LA GALERIA*/
ul#topnav {
margin: 0;
padding:16px 0 0 0;
list-style: none;
float: left;
font-size: 24px;
}
#menuco {
font-weight:bold;
display:block;
position:fixed;
bottom: 0;
z-index: 2;
background:url(../images/bg_menu.png) no-repeat top center;
width: 1165px;
height: 85px;
margin: 0 0 0 29px;
padding: 0 0 0 446px;;
list-style: none;
}

ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;  /*--Importante - Estado inicial del menu, sin mantenernos encima de el--*/
float: left;
height:63px;
}

ul#topnav a, ul#topnav span {
padding: 0 20px;
float: left;
text-decoration: none;
color: #312300;
text-shadow: 1px 1px 1px #fff;
background: url(../images/bg_menuc.jpg) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 63px;
line-height: 63px;
}

ul#topnav a{
text-shadow: 1px 1px 1px #000;
color: #ecd7b6;
background-position: left bottom;
}

ul#topnav span{ /*--Por defecto--*/
background-position: left top;
}