body{
	margin:0;
	/* background-image:"images/PPPmain.jpg"; */
	background-color: #000000;
}

::-webkit-input-placeholder { font-family : Arial; }
::-moz-placeholder { font-family : Arial;} /* firefox 19+ */
:-ms-input-placeholder { font-family : Arial; } /* ie */
input:-moz-placeholder { font-family : Arial; }

.bgblack {
	background-color: #000000;
}

area {outline: none;}

input[type="text"] {
    font-size:16px;
}
input[type="tel"] {
    font-size:16px;
}
input[type="password"] {
    font-size:16px;
}
textarea {
    font-size:16px;
}
select {
    font-size:15px;
}


#email2 {display: none}

.background{
	background-repeat : no-repeat;
 }
 
 .block{
	background-image: none;
}

.rbackground{
	background-repeat : repeat;
}

table tr #rankings td{
	border-bottom: 1px solid #FFFFFF;
	background-color: #E1E1E1;
}

table tr #rankings th{
	border-bottom: .5px solid #FFFFFF;
}

table tr #rankings .borderme td{
	border-top: 1px solid yellow;
	border-bottom: 1px solid yellow;
}

table tr #poolie td{
	border: .25px solid #FFFFFF;
}

table tr #board td{
	border-top: 1px solid #bcbdc0;
	border-left: 1px solid #bcbdc0;
	border-right: 1px solid #bcbdc0;
}
table tr #board{
	border-bottom: 1px solid #bcbdc0;
}

.odd{background-color: #E1E1E1;} 
.even{background-color: #999999;}
.gold{background-color: #B3995D;}
.silver{background-color: #A5ACAF;} 
.bronze td:first-child{background-color: #9F7A34;}
.last {background-color: #F7BDD8;} 

.H1 {
	font-family : Arial;
	font-size: 24px;
	color: #000000;
	font-weight: bolder;
	padding-top : 10px;
} 

.H1G {
	font-family : Arial;
	font-size: 60px;
	color: #E1E1E1;
	font-weight: bolder;
	padding-bottom : 5px;
} 

.H2 {
	font-family : Arial;
	font-size: 20px;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 30px;
}
.H2B {
	font-family : Arial;
	font-size: 20px;
	color: #0a00c8;
	font-weight: bold;
	line-height: 30px;
}

.H3 {
	font-family : Arial;
	font-size: 16px;
	color: #000000;
	font-weight: bold;
}
A.H3:link {
	font-family : Arial;
	font-size: 16px;
	COLOR: #000000;
	font-weight: bold;
	TEXT-DECORATION: underline;
}
A.H3:visited {
	font-family : Arial;
	font-size: 16px;
	COLOR: #000000;
	font-weight: bold;
	TEXT-DECORATION: underline;
}
A.H3:hover {
	font-family : Arial;
	font-size: 16px;
	COLOR: #0a00c8;
	font-weight: bold;
	TEXT-DECORATION: underline;
}
A.H3:unhover {
	font-family : Arial;
	font-size: 16px;
	COLOR: #000000;
	font-weight: bold;
	TEXT-DECORATION: underline;
}
A.H3:active {
	font-family : Arial;
	font-size: 16px;
	COLOR: #000000;
	font-weight: bold;
	TEXT-DECORATION: underline;
}

.H3Comic {
	font-family : "Comic Sans MS";
	font-size: 18px;
	color: #0a00c8;
	font-weight: bold;
}


.H4W{
	font-family : Arial;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
} 

a.H4W:link{
	font-family : Arial;
	font-size: 16px;
	color:#FFFFFF;
	font-weight: bold;
} 
a.H4W:visited{
	font-family : Arial;
	font-size: 16px;
	color:#FFFFFF;
	font-weight: bold;
}
a.H4W:hover{
	font-family : Arial;
	font-size: 16px;
	color:#FFFFFF;
	font-weight: bold;
	text-decoration: underline;
}  


.H4Gon {
	font-family : Arial;
	font-size: 18px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
A.H4Gon:link {
	font-family : Arial;
	font-size: 18px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
A.H4Gon:visited {
	font-family : Arial;
	font-size: 18px;
	color: #FFFFFF;
	text-decoration: none;
}
A.H4Gon:hover {
	font-family : Arial;
	font-size: 18px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

.H4G{
	font-family : Arial;
	font-size: 16px;
	color:#bcbdc0;
	font-weight: bold;
	font-weight: normal;
} 
A.H4G:link {
	font-family : Arial;
	font-size: 16px;
	color: #bcbdc0;
	font-weight: bold;
	text-decoration: underline;
}
A.H4G:visited {
	font-family : Arial;
	font-size: 16px;
	color: #bcbdc0;
	font-weight: bold;
	text-decoration: underline;
}
A.H4G:hover {
	font-family : Arial;
	font-size: 16px;
	color: #999999;
	font-weight: bold;
	text-decoration: underline;
}
A.H4G:unhover {
	font-family : Arial;
	font-size: 16px;
	color: #bcbdc0;
	font-weight: bold;
	text-decoration: underline;
}


.H4{
	font-family : Arial;
	font-size: 16px;
	color:#000000;
	font-weight: bold;
} 
A.H4:link {
	font-family : Arial;
	font-size: 16px;
	color: #0a00c8;
	font-weight: bold;
	text-decoration: underline;
}
A.H4:visited {
	font-family : Arial;
	font-size: 16px;
	color: #0a00c8;
	font-weight: bold;
	text-decoration: underline;
}
A.H4:hover {
	font-family : Arial;
	font-size: 16px;
	color: #999999;
	font-weight: bold;
	text-decoration: underline;
}
A.H4:unhover {
	font-family : "Arial Black";
	font-size: 16px;
	color: #0a00c8;
	font-weight: bold;
	text-decoration: underline;
}


.H5{
	font-family : Arial;
	font-size: 12px;
	color:#000000;
	font-weight: normal;
} 
A.H5:link {
	font-family : Arial;
	font-size: 12px;
	COLOR: #0a00c8;
	TEXT-DECORATION: none;
	font-weight: normal;
}
A.H5:visited {
	font-family : Arial;
	font-size: 12px;
	COLOR: #0a00c8;
	TEXT-DECORATION: none;
	font-weight: normal;
}
A.H5:hover {
	font-family : Arial;
	font-size: 12px;
	COLOR: #000000;
	TEXT-DECORATION: underline;
	font-weight: normal;
}
A.H5:unhover {
	font-family : Arial;
	font-size: 12px;
	COLOR: #0a00c8;
	TEXT-DECORATION: none;
	font-weight: normal;
}
A.H5:active {
	font-family : Arial;
	font-size: 12px;
	COLOR: #0a00c8;
	TEXT-DECORATION: underline;
	font-weight: normal;
}


.menuon{
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
	TEXT-DECORATION: none;
	line-height: 20px;
} 
A.menuon:link{
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
	TEXT-DECORATION: none;
	line-height: 20px;
} 
A.menuon:visited{
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
	TEXT-DECORATION: none;
	line-height: 20px;
} 
A.menuon:hover{
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
	TEXT-DECORATION: none;
	line-height: 20px;
} 

menu {
    font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#999999;
	font-weight: bold;
	TEXT-DECORATION: none;
	line-height: 20px;
}

A.menu:link {
    font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#999999;
	font-weight: bold;
	line-height: 20px;
}
A.menu:visited {
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#999999;
	font-weight: bold;
	line-height: 20px;
}
A.menu:hover {
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
	line-height: 20px;
}
A.menu:active {
	font-family : Arial, Helvetica, sans-serif;
	font-size: 20px;
	color:#FFFFFF;
	font-weight: bold;
	TEXT-DECORATION: none;
	line-height: 20px;
}

.forms {
	background-color: #FFFFFF;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	text-decoration: none;
/* 	z-index: 999; */
}

.fieldset{
	font-family : "Comic Sans MS";
	font-size:14px;
	color:#0a00c8;
	font-weight: bold;
	border : thin solid #0a00c8;
} 

.Hunder{
	font-family : Arial;
	font-size:11px;
	color:#0a00c8;
	font-weight: normal;
	padding-bottom : 10px;
} 

.message {
	font-family : Arial;
	font-size:20px;
	color:#999999;
	font-weight: bold;
} 

.welcome {
	font-family : Arial;
	font-size: 20px;
	color:#0a00c8;
	font-weight: bold;
} 

.welcomeW {
	font-family : Arial;
	font-size: 30px;
	color:#FFFFFF;
	font-weight: bold;
} 


.piccaption {
	font-family : Arial;
	font-size:14px;
	color:#000000;
	font-weight: bold;
} 

.piccaptionw {
	font-family : Arial;
	font-size:10px;
	color:#FFFFFF;
	font-weight: bold;
} 

.piccaptiong {
	font-family : Arial;
	font-size:10px;
	color:#bcbdc0;
	font-weight: bold;
}

.piccaption2{
	font-family : Arial;
	font-size: 17px;
	color: Gray;
	font-weight: bold;
	line-height : 35px;
	text-decoration : none;
} 

.bottom{
	font-family : Arial;
	font-size: 15px;
	color: #0a00c8;
	font-weight: bold;
} 

.titleblue {
	font-family : Arial;
	font-size:14px;
	color:#0a00c8;
	text-align: left;
	font-weight: bold;
	padding-left : 10px;
	padding-right : 10px;
	text-decoration : underline;
} 

.defaultblue{
	font-family : Arial;
	font-size:16px;
	color:#0a00c8;
	font-weight: normal;
	padding-left : 10px;
	padding-right : 10px;
	text-align : justify;
} 

.defaultwhite{
	font-family : Arial;
	font-size:16px;
	color:#FFFFFF;
	font-weight: normal;
	padding-left : 10px;
	padding-right : 10px;
	text-align : justify;
} 


.defaultgrey{
	font-family : Arial;
	font-size:16px;
	color:#999999;
	font-weight: normal;
	padding-left : 10px;
	padding-right : 10px;
	text-align : justify;
} 

.defaultblk{
	font-family : Arial;
	font-size:16px;
	color:#000000;
	font-weight: normal;
	padding-left : 10px;
	padding-right : 10px;
	text-align : justify;
}

.defaultred{
	font-family : Arial;
	font-size:16px;
	color: Red;
	font-weight: normal;
	padding-left : 10px;
	padding-right : 10px;
	text-align : justify;
} 

.inlinered{
	font-family : "Comic Sans MS";
	font-size:16px;
	color: Red;
	font-weight: normal;
} 

.titleblack {
	font-family : Arial;
	font-size:16px;
	color:#000000;
	text-align: left;
	font-weight: bold;
	padding-left : 10px;
	padding-right : 10px;
	text-decoration: underline;
} 

.defaultblack {
	font-family : Arial;
	font-size:10px;
	color:#000000;
	font-weight: normal;
	padding-left : 10px;
	padding-right : 10px;
	text-align : justify;
} 

.inlineblack {
	font-family : "Comic Sans MS";
	font-size:16px;
	color:#000000;
	font-weight: normal;
} 

.titlewhite {
	font-family : Arial;
	font-size: 15px;
	color:#FFFFFF;
	font-weight: bold;
} 

.titleblu {
	font-family : Arial;
	font-size: 10px;
	color:#0a00c8;
	font-weight: bold;
} 

.tblwhite {
	font-family : Arial;
	font-size:7px;
	color:#FFFFFF;
	font-weight: normal;
} 

.tblblack {
	font-family : Arial;
	font-size:7px;
	color:#000000;
	font-weight: normal;
} 

a.tblblack:link {
	text-decoration: underline;
	font-family : Arial;
	font-size:7px;
	color:#000000;
	font-weight: normal;
}

a.tblblack:visited {
	text-decoration: underline;
	font-family : Arial;
	font-size:7px;
	color:#000000;
	font-weight: normal;
}

a.tblblack:hover {
	text-decoration: underline;
	font-family : Arial;
	font-size:7px;
	color:#0a00c8;
	font-weight: normal;
}

a.tblblack:unhover {
	text-decoration: underline;
	font-family : Arial;
	font-size:7px;
	color:#000000;
	font-weight: normal;
}

.tblblue {
	font-family : Arial;
	font-size:7px;
	color:#0a00c8;
	font-weight: normal;
} 

.tblred {
	font-family : Arial;
	font-size:7px;
	color: Red;
	font-weight: normal;
} 

.tbl1white{
	text-decoration: underline;
	font-family : Arial;
	font-size:16px;
	color:#FFFFFF;
	font-weight: normal;
} 


.tbl1black {
	font-family : Arial;
	font-size:16px;
	color:#000000;
	font-weight: normal;
} 

.tbl1blue{
	font-family : Arial;
	font-size:16px;
	color:#0a00c8;
	font-weight: normal;
} 

.tbl1red {
	font-family : Arial;
	font-size:16px;
	color: Red;
	font-weight: normal;
} 


.tbl2grey {
	font-family : Arial;
	font-size:10px;
	color:#999999;
	font-weight: normal;
} 

.tbl2black {
	font-family : Arial;
	font-size:12px;
	color:#000000;
	font-weight: normal;
} 

.tbl2white{
	text-decoration: underline;
	font-family : Arial;
	font-size:11px;
	color:#FFFFFF;
	font-weight: normal;
} 


.tbl2blue{
	font-family : Arial;
	font-size:11px;
	color:#0a00c8;
	font-weight: normal;
} 

.tbl2red {
	font-family : Arial;
	font-size:11px;
	color: Red;
	font-weight: normal;
} 


.link{
	font-family : Arial;
	font-size:16px;
	color: #0a00c8;
	font-weight: bold;
}

A.link:link {
	font-family : Arial;
	font-size:16px;
	COLOR: #000000;
	TEXT-DECORATION: underline;
	font-weight: bold;
}
A.link:visited {
	font-family : Arial;
	font-size:16px;
	COLOR: #000000;
	TEXT-DECORATION: underline;
	font-weight: bold;
}
A.link:hover {
	font-family : Arial;
	font-size:16px;
	COLOR: #030099;
	TEXT-DECORATION: underline;
	font-weight: bold;
}
A.link:unhover {
	font-family : Arial;
	font-size:16px;
	COLOR: #000000;
	TEXT-DECORATION: underline;
	font-weight: bold;
}
A.link:active {
	font-family : Arial;
	font-size:16px;
	COLOR: #000000;
	TEXT-DECORATION: underline;
	font-weight: bold;
}


.small {
	padding-left : 15px;
	padding-right : 5px;
}

a {
	font-family : Arial;
	font-size: 10px;
	color:#FFFFFF;
	font-weight: bold;
	text-decoration : none;
}

a:visited {
	font-family : Arial;
	font-size: 10px;
	color:#FFFFFF;
	font-weight: bold;
	text-decoration : none;
}

a:hover {
	font-family : Arial;
	font-size: 10px;
	color:#FFFFFF;
	font-weight: bold;
	text-decoration : underline;
}

.schedule {
	margin-left: -20px;
}

.fillbar {
	width: 200px;
	height: 9px;
	empty-cells: show;
	background-color: #999999;
	margin-bottom: 0;
	margin-top: 0;
}

.center {
	text-align: center;
}

#menubar {
	width: 860px;
	height: 40px;
	text-align: left;
	margin: 0 auto;
	background-color: #0a00c8;
}

#menubarNS {
	width: 860px;
	height: 80px;
	margin: 0 auto;
	background-color: #0a00c8;
}


#header {
/*
	position: relative;
	top:15px;
*/
	width: 860px;
	height: 40px;
	text-align: left;
	margin: 0 auto;
	padding-top: 12px;
	padding-left: 10px;
}

#nav {

	position: relative;
	top:-30px;
	width:860px;
	height: 30px;
	text-align: right;
	margin: 0 auto;
}

.outwrapper {
/*
 	position: relative;
 	top: -40px;
*/
 	border:1px #999999 solid;
 	background-color: #000000;
 	width:860px;
 	padding-top: 7px;
 	margin: 0 auto;
}

.tooltip {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 7px;
	width: 860px;
    height: 30px;
    /* border: 1px solid #ccc; */
    background-color: #0a00c8;
    color: #FFFFFF;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
}

.tooltip img { 
    float: left;
    margin-top: -3px;
    margin-right: 5px;
    margin-left: 5px;
}

#dyk {
	padding-left: 4px;
	text-align: left;
	clear: both;
}

#close {
    float:right;
    display:inline-block;
}

#scoreboard {
	background-color:#FFFFFF;
	border:1px #999999 solid;
 	width:842px;
 	height:100px;
 	position: relative;
 	left: 7px;
 	overflow: hidden;
}

#scorestrip {
	 width: 995px;
/*      min-width: 117%; */
	 height: 100px;
	 margin-top: -400px;
	 margin-left: -160px; 

    -moz-transform: scale(0.60);
    -moz-transform-origin: 0 0 0; 
    -o-transform: scale(0.60);
    -o-transform-origin: 0 0 0;
    -webkit-transform: scale(0.60);
    -webkit-transform-origin: 0 0 0; 
	-ms-transform: scale(0.60);
    -ms-transform-origin: 0 0 0;
    transform: scale(0.60);
	transform-origin: 0 0 0; 
	zoom: 60%;
}

#afterheader {
	width:860px;
}

#afterheaderNS {
	width:860px;
	position: relative;
 	top: -40px;
	margin: 0 auto;
	
}

/*
#wrap { 
	width: 510px; 
	height: 615px; 
	padding: 20px; 
	border:1px solid #f00808;
	
}
*/


#lockname {
	position: absolute;
	top: 216px;
	left:650px;
	width:200px;
	z-index: 100;
	text-align: center;
}

.tabbed_area {
	/* border:1px solid #999999;  *//* #494e52; */
	background-color:#000000; /* #636d76; */
	padding:3px;	
}

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}
ul.tabs li a {
	background-color:#999999;
	color:#E1E1E1;
	padding:8px 10px 8px 10px;
	text-decoration:none;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	
}
ul.tabs li a:hover {
	background-color:#E1E1E1;
	border-color:#E1E1E1;
	color:#999999;
}
ul.tabs li a.active {
	background-color:#FFFFFF;
	color:#0a00c8;
	border:1px solid #0a00c8; 
	border-bottom: 1px solid #FFFFFF;	
}
.content {
	background-color:#FFFFFF;
	padding:0px;
	border:.5px solid #464c54; 	
	font-family:Arial, Helvetica, sans-serif;
}
#pooliepicks { 
	display:none; 
}
#stats { 
	width: 100%;
	display:none; 
}

#sched { 
	width: 100%;
	display:none; 
}

#scores { 
	width: 100%;
	display:none; 
}

#messages { 
	width: 100%;
	height: 100%;
	display:none; 
}
	
.alt {
	background-color: gray;
}




/* for 3-way toggle */

* {
  box-sizing: border-box;
}
.comheight {
   height: 30px;
}

.container {
  position:relative;
  top: 12px;
  left: 50px;
  transform: translate(-50%, -50%);
}

.radio-wrapper {
    width: 90px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    position: relative;
    margin-left: 1%;
}

.radio-wrapper input[type="radio"] {
    display: none;
}

i { 
  z-index: 99;
  font-size: 8px;
}
.neutral-icon i {
  font-size: 8px;
}
.neutral + label {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    left: 33%;
    transition: transform 1s;
}

.neutral:checked + label {
    border: 1px solid rgba(0, 0, 0, 1);
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: rgb(238, 238, 238);
    background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238, 238, 1)), color-stop(100%, rgba(204, 204, 204, 1)));
    background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
    background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%);
}

.yes + label {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    text-align: center;
    line-height: 30px;
    font-family : Arial;
	font-size:16px;
	color:#000000;
}

.yes:checked + label {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: rgb(32, 213, 50);
    background: -moz-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(32, 213, 50, 1)), color-stop(100%, rgba(28, 195, 1, 1)));
    background: -webkit-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
    background: -o-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
    background: -ms-linear-gradient(top, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
    background: linear-gradient(to bottom, rgba(32, 213, 50, 1) 0%, rgba(28, 195, 1, 1) 100%);
    -moz-animation-duration: 0.4s;
    -moz-animation-name: slidein;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-name: slidein;
    animation-duration: 0.4s;
    animation-name: slidein;
    -webkit-transform: translateZ(0);
}

.no + label {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    line-height: 30px;
    font-family : Arial;
	font-size:16px;
	color:#000000;
}

.no:checked + label {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: red;
    -moz-animation-duration: 0.4s;
    -moz-animation-name: slideno;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-name: slideno;
    animation-duration: 0.4s;
    animation-name: slideno;
    -webkit-transform: translateZ(0);
    background: rgb(230, 108, 103);
    background: -moz-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 108, 103, 1)), color-stop(100%, rgba(221, 79, 75, 1)));
    background: -webkit-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
    background: -o-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
    background: -ms-linear-gradient(top, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
    background: linear-gradient(to bottom, rgba(230, 108, 103, 1) 0%, rgba(221, 79, 75, 1) 100%);
}


@keyframes slidein {
    from {
        transform: translate(30px, 0);
    }
    to {
        transform: translate(0px, 0px);
    }
}


@keyframes slideno {
    from {
      transform: translate(-30px,0);
    }
    to {
        transform: translate( 0px, 0px);
    }
}

@keyframes returnLeft {
    from {
        transform: translate(-30px,0);
    }
    to {
        transform: translate(0px,0);
    }
}

@keyframes returnRight {
    from {
        transform: translate(30px,0);
    }
    to {
        transform: translate(0px,0);
    }
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}