body{
	background-color:#d7e3ec;
	background-image:url("bluback.png");
	margin-top:5%;
}

/**Custom Fonts**/
white_font{
font-family:Arial;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

white_font2{
font-family:Arial;
font-size:15px;
font-weight:bold;
color:#FFFFFF;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

grey_font{
font-family:Arial;
font-size:16px;
font-weight:bold;
color:#e1e1e1;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

white_font3{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

red_font2{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#cf0041;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

red_font{
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#cf0041;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

green_font{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#009966;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

blueish_font{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#3366ff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

orangeish_font{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#FFA812;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

orange_font{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#f58220;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

orange_font2{
font-family:Arial;
font-size:18px;
font-weight:bold;
color:#f58220;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

orange_font3{
font-family:Arial;
font-size:15px;
font-weight:bold;
color:#f58220;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

black_font{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#343636;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

black_font2{
font-family:Arial;
font-size:18px;
font-weight:bold;
color:#343636;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

black_font4{
font-family:Arial;
font-size:16px;
font-weight:bold;
color:#343636;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}


/**Begin Style for login**/
#main-content{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);  
    height: 100%;
    width: 1100px;
	margin-left:auto;
	margin-right:auto;
    padding: 30px;
    z-index: 3;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
}

#user_data{
	width:100%;
	background-color:#11577b;
	padding:5px;
	box-shadow: inset 0px 2px 5px #292929;
    -moz-box-shadow: inset 0px 2px 5px #292929;
    -webkit-box-shadow: inset 0px 2px 5px #292929;
	border-radius:5px;
}

#user_data2{
	width:100%;
	background-color:#ffffff;
}

#profile_pic{
	border-radius:3px;
	margin-top:px;
	background-color:#ffffff;
	width:20px;
	height:20px;
	padding:5px;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
}

#placeholder{
	width:320px; 
	height:570px; 
	border-color:#c3c3c3; 
	padding:5px; 
	border-style:solid; 
	border-width:thin; 
	border-radius:5px;
}

#placeholder2{
	width:;
	margin-left:10px;
	height:570px; 
	border-color:#c3c3c3; 
	padding:5px; 
	border-style:solid; 
	border-width:thin; 
	border-radius:5px;
}


#header-logged-in{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);  
    height: 0.5%;
    width: 100%;
    margin:;
    padding: 25px;
    position: absolute;
    top:-1%;
    left:0%;
    z-index: 2;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
}

#content1
{
	background-color:#363636;
    height: 100%;
    width: 1000px;
    padding: 30px;
	border-radius:5px;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
}


#register
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);  
    height: 480px;
    width: 400px;
    margin-left:auto;
	margin-right:auto;
    padding: 30px;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
}

#register:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}



#login
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);  
    height: 240px;
    width: 400px;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;  
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
}

#login:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}

/*--------------------*/

h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}



/*--------------------*/

fieldset
{
    border: 0;
    padding: 0;
    margin: 0;
}

/*--------------------*/


.textarea{
	background: #f1f1f1;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 790px; /* 353 + 2 + 45 = 400 */
	height:150px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}

.textarea2{
	background: #f1f1f1;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 790px; /* 353 + 2 + 45 = 400 */
	height:18px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}

.textarea3{
	background: #f1f1f1;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 353px; /* 353 + 2 + 45 = 400 */
	height:18px;
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}




#inputs input
{
    background: #f1f1f1 url(http://www.red-team-design.com/wp-content/uploads/2011/09/login-sprite.png) no-repeat;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 353px; /* 353 + 2 + 45 = 400 */
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}

#email
{
    background-position: 5px -2px !important;
}

#password
{
    background-position: 5px -52px !important;
}

#inputs input:focus
{
    background-color: #fff;
    border-color: #9ECEE2;
    outline: none;
    -moz-box-shadow: 0 0 0 1px #9ECEE2 inset;
    -webkit-box-shadow: 0 0 0 1px #9ECEE2 inset;
    box-shadow: 0 0 0 1px #9ECEE2 inset;
}

/*--------------------*/
#actions
{
    margin: 25px 0 0 0;
}

#submit
{		
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,a4d5ea+100 */
background: #e4f5fc; /* Old browsers */
background: -moz-linear-gradient(top,  #e4f5fc 0%, #bfe8f9 50%, #a4d5ea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(100%,#a4d5ea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#a4d5ea',GradientType=0 ); /* IE6-9 */





    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    
     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
    
    border-width: 1px;
    border-style: solid;
    border-color: #e4f5fc #bfe8f9 2ab0ed;

    float: left;
    height: 35px;
    padding: 0;
    width: 120px;
    cursor: pointer;
    font: bold 15px Arial, Helvetica;
    color: #3080A5;
}

#submit:hover,#submit:focus
{		
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,a4d5ea+100 */
background: #e4f5fc; /* Old browsers */
background: -moz-linear-gradient(top,  #e4f5fc 0%, #bfe8f9 50%, #a4d5ea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(100%,#a4d5ea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e4f5fc 0%,#bfe8f9 50%,#a4d5ea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#a4d5ea',GradientType=0 ); /* IE6-9 */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ab0ed', endColorstr='#e4f5fc',GradientType=0 ); /* IE6-9 */

}	

#submit:active
{		
    outline: none;
   
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
}

#submit::-moz-focus-inner
{
  border: none;
}

#actions a
{
    color: #3151A2;    
    float: right;
    line-height: 35px;
    margin-left: 10px;
}

/*--------------------*/

#back
{
    display: block;
    text-align: center;
    position: relative;
    top: 60px;
    color: #999;
}


/*--------slider-------*/

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
opacity:0.9;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}

.message h1 {
  color:#FFF;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #11577b;
width: 100px;
border-radius: 3px;
padding: 2px 2px;
color: #FFF;
line-height:20px;
font-size:12px;
text-align:center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
  margin:0px 10px;
  transition:all 500ms ease;
}
#toggle + label:after {
  content:"Additional Notes" 
}


select {
	margin-top:-10px;
	height:45px;
	border-radius:5px;
	padding:5px;
	box-shadow:0 1px 1px #ccc inset, 0 1px 0 #fff;
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}

/************GLOBAL LINK STYLE**************/
a:link, a:visited {
    color: #365899;
    text-align: center; 
    text-decoration: none;
	font-weight:;
	font-family:Verdana;
}

a:hover, a:active {
    color: #6b8ac7;
}
/************END GLOBAL LINK STYLE*********/



/************LINK STYLE HEADER**************/
a.header:link, a.header:visited {
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
	font-weight:;
	font-family:Arial;
}

a.header:hover, a.header:active {
    background-color: #6b8ac7;
}
/************END LINK STYLE HEADER*********/


a.noti:link, a.noti:visited {
    text-decoration: none;
	text-align:left;
	font-family:Arial;
}

a.noti:hover, a.noti:active {
    background-color: #6b8ac7;
	text-decoration:none;
}


    ul li {
        float:left;
        font:13px helvetica;
        font-weight:bold;
		margin-left:10px;
    }

        
        #noti_Container {
        position:relative;
    }
       
    /* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
    #noti_Button {
        width:80px;
        height:px;
        line-height:22px;
        margin:-1px 8px 0 20px;
        cursor:pointer;
    }
        
    /* THE POPULAR RED NOTIFICATIONS COUNTER. */
    #noti_Counter {
        display:block;
        position:absolute;
        background:#E1141E;
        color:#FFF;
        font-size:12px;
        font-weight:normal;
        padding:1px 3px;
        margin:-8px 0 0 85px;
        border-radius:2px;
        -moz-border-radius:2px; 
        -webkit-border-radius:2px;
        z-index:1;
    }
        
    /* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
    #notifications {
        display:none;
        width:430px;
        position:absolute;
        top:30px;
        left:0;
        background:#FFF;
        border:solid 1px rgba(100, 100, 100, .20);
        -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
        z-index: 0;
    }
    /* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
    #notifications:before {         
        content: '';
        display:block;
        width:0;
        height:0;
        color:transparent;
        border:10px solid #CCC;
        border-color:transparent transparent #FFF;
        margin-top:-20px;
        margin-left:10px;
    }
        
    h3 {
        display:block;
        color:#333; 
        background:#FFF;
        font-weight:bold;
        font-size:13px;    
        padding:8px;
        margin:0;
        border-bottom:solid 1px rgba(100, 100, 100, .30);
    }
        
    .seeAll {
        background:#F6F7F8;
        padding:8px;
        font-size:12px;
        font-weight:bold;
        border-top:solid 1px rgba(100, 100, 100, .30);
        text-align:center;
    }
    .seeAll a {
        color:#3b5998;
    }
    .seeAll a:hover {
        background:#F6F7F8;
        color:#3b5998;
        text-decoration:underline;
    }
	
	.notification_box:hover{
		background:#edf2fa;
		border-radius:5px;
	}
	
	
	#cardlist {
	color: #000000;
	background-color: #333333;
}
.cardlist_synchro     {
	background-color: #CCCCCC;
	color: #000000;
}
.event_recorded {
	background-color: #66CCFF;
	color: #333399;
}

.cardlist_xyz {
	color: #FFFFFF;
	background-color: #000000;
}
.cardlist_atitle {
	color: #CCCCCC;
	background-color: #666666;
}


.cardlist_effect {
	background-color: #FF8B53;
	color: #000000;
}
.cardlist_ritual {
	background-color: #9DB5CC;
	color: #000000;
}
.cardlist_monster {
	background-color: #FDE68A;
	color: #000000;
}
.cardlist_fusion {
	background-color: #a086b7;
	color: #000000;
}
.cardlist_spell {
	background-color: #1D9E74;
	color: #000000;
}
.cardlist_trap {
	background-color: #BC5A84;
	color: #000000;
}
.cardlist_link {
	background-color: #006ead;
	color: #000000;
}