body
{
height:auto;
position:relative;
text-align:center;
width:100%;
min-width:900px;
overflow:auto;
/*font-family: sans-serif;*/
font-family: 'Droid Sans', sans-serif;
}
.view_container
{
/*user-select:none;*/
margin: 15px auto 0;
width:812px;
height:auto;
position:relative;
background-color:transparent;
overflow:visible;
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);

}
.field
{
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
overflow:hidden;
background-color:pink;
position:relative;
user-select:none;
float:left;
width:812px;
margin:auto;
margin-top:0px;
/*background-color:rgba(44, 140, 25, 0.5);*/
height:476px;
/*border-radius:130px;*/
}
.grid_square
{
width:28px;
height:28px;
/*border:1px solid #38cc24*/;
border:none;
position:relative;
float:left;
/*box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.75);*/
}

.grid_square:hover
{
/*box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.75);*/
/*border-radius:20px;*/
}
.player:hover
{
cursor:pointer;
}
.player
{
/*transform: perspective( 600px ) rotateX(65deg) rotateZ(90deg);*/
position:absolute;
width:26px;
height:26px;
line-height:26px;
font-weight: bold;
font-family:sans-serif;
text-align:center;
border-radius:14px;
border:1px solid transparent;
text-shadow: 0px 0px 5px rgba(172, 255, 117, 1);
/*background-color:gray;*/
/*transition:		1.5s top cubic-bezier(.5,0,.5,1),
				1.5s left cubic-bezier(.5,0,.5,1),*/
transition:		1.5s top linear,
				1.5s left linear,
				0.5s box-shadow cubic-bezier(.5,0,.5,1),
				0.5s background-color cubic-bezier(.5,0,.5,1),
				0.7s transform linear;
-webkit-transform: translate3d(0, 0, 0);
transform: perspective(400px) translate3d(0, 40px, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;


}
.player:last-of-type
{
/*background-color:transparent !important;*/
/*background:url('./images/ball.png') ;*/
background-position: -2px -2px;
background-size: 30px 30px;
font-size:0;

}
.player:last-of-type.selected
{
background-color:white !important;
}
.frame_selector_area
{
width:812px;
margin: 5px 0 5px;
height:40px;
border-bottom:1px solid black;
position:relative;
float:left;
}
.frame_selector_button:hover
{
background-color:white;
cursor:pointer;
}
.frame_selector_button
{
height:30px;
margin:3px 0 0 3px;
width:50px;
border-radius:10px;
background-color:gray;
position:relative;
float:left;
font-size:16px;
line-height:30px;
text-align:center;
transition: 0.4s all;
}
.frame_selector_button.frame_selected
{
background-color:lightgray !important;
}
.control_button
{
position:relative;
user-select:none;
float:left;
font-size:12px;
text-transform:uppercase;
line-height:30px;
height:30px;
border-radius:15px;
margin-left:5px;
text-align:center;
width:150px;
transition:all 0.2s;
}
.playback_arrow_container
{
border-color: transparent black;
}
.up_arrow_container
{
width:45px;
border-color:transparent transparent black transparent;
border-radius:0 15px 15px 0 ;
margin-left:0px ;
}
.up_arrow_container:hover
{
border-color:transparent transparent red transparent;
cursor:pointer;
}
.down_arrow_container
{
width:45px;
border-color:black transparent transparent transparent;
border-radius:0 15px 15px 0 ;
margin-left:0px ;
}
.down_arrow_container:hover
{
border-color:aqua transparent transparent transparent;
cursor:pointer;
}
.highlighted
{
-webkit-box-shadow: 0px 0px 60px 0px rgba(50, 245, 50, 1);
-moz-box-shadow:    0px 0px 60px 0px rgba(50, 245, 50, 1);
box-shadow:         0px 0px 60px 0px rgba(250, 245, 250, 1);
background-color:black !important;
}
.selected_player_controls
{
width:1000px;
margin: 30px 0 0 0;
height:90px;
background-color:yellow;
border-bottom:1px solid black;
position:relative;
float:left;
}
.overlay
{
width:100%;
height:100%;
background-color:white;
opacity:0.2;
position:absolute;
z-index:1;
left:0;
top:0;
}
.controls_overlay
{
opacity:0.6;
}
.new_play_container
{
font-size:12px;
top:70px;
left:406px;
border-radius:20px;
height:400px;
position:absolute;
width:0px;
opacity:1;
z-index:2;
transition: 0.2s left, 0.2s width ;
box-shadow: none;
overflow:hidden;
}
.new_play_container_open
{
left:131px;
width:550px;
height:400px;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
}
.new_play_input
{
position:relative;
float:left;
height:20px;
width:150px;
margin:25px 20px 0;
top:0;
padding:0;
border:none;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
text-align:center;
}
.input_label
{
clear:left;
position:relative;
float:left;
width:250px;
margin-left:50px;
height:20px;
font-size:12px;
line-height:20px;
margin-top:25px;
text-align:left;
}
.team_preview
{
width:200px;
height:90px;
position:relative;
float:left;
margin-top:10px;
margin-left:50px;
}
.preview_player
{
position:relative;
float:left;
width:25px;
height:25px;
border-radius:5px;
margin: 10px 20px 0 0 ;
background-color:black;
border:1px solid black;
}
.new_play_submit
{
position:relative;
float:left;
clear:left;
width:25%;
height:40px;
line-height:40px;
font-size:14px;
margin: 26px 0 20px 37%;
/*border:1px solid black;*/
border-radius:13px;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
}
.debug
{
width:700px;
margin-left:50px;
height:400px;
position:relative;
float:left;
font-family:sans-serif;
font-size:12px;
word-break:break-all;
}
.play_input
{
width:400px;
height:200px;
line-height:20px;
}
.selected
{
color:white !important;
transition: all 0.3s linear !important;
-moz-transition: all 0.3s linear !important;
-webkit-transition: all 0.3s linear !important;
-o-transition: all 0.3s linear !important;
}
.center_circle
{
position:absolute;
width:150px;
height:150px;
border-radius:75px;
border:1px solid black;
left:331px;
top:163px;
}
.halfway_line
{
position:absolute;
left:406px;
top:0;
height:474px;
width:0px;
border:1px solid black;
}
.left_box
{
position:absolute;
left:0;
top:162px;
height:150px;
width:132px;
border-radius:0 75px 75px 0 ;
border:1px solid black;
}
.right_box
{
position:absolute;
left:678px;
top:162px;
height:150px;
width:132px;
border-radius:75px 0 0 75px;
border:1px solid black;
}

.yellow_line_left
{
position:absolute;
left:231px;
top:0;
height:472px;
width:0px;
border:2px solid #f4c242;
}
.yellow_line_right
{
position:absolute;
left:573px;
top:0;
height:472px;
width:0px;
border:2px solid #f4c242;
}
.playback_arrow 
{
margin:9px 0 0 33px;
border-color: inherit;
border-style: solid;
border-width: 6px 0px 6px 12px;
height: 0px;
width: 0px;
}
.stop_square 
{
margin:9px 0 0 31px;
border-color: inherit;
border-style: solid;
border-width: 6px;
height: 0px;
width: 0px;
}
.stop_square_container
{
border-color:black;
} 
.stop_square_container:hover
{
border-color:red;
}
.up_arrow 
{
margin:9px 0 0 14px;
border-color: inherit;
border-style: solid;
border-width: 0px 6px 12px 6px;
height: 0px;
width: 0px;
}
.playback_arrow_container:hover
{
cursor:pointer;
border-color: transparent lime !important;
color:lime;
} 
.cursor_pointer:hover
{
cursor:pointer;
color:white;
}
.gradient1
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7c7dc+0,6ba872+100 */
background: #a7c7dc; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #a7c7dc 0%, #6ba872 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #a7c7dc 0%,#6ba872 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #a7c7dc 0%,#6ba872 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#6ba872',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.limePointerHover:hover
{
color:white;
cursor:pointer;
}
.header
{
width:800px;
height:30px;
position:relative;
margin: 0 auto 0;
border-bottom:2px solid black;
}
.links
{
position:relative;
float:right;
height:30px;
margin-left:300px;
}
.link{
height:30px;
line-height:30px;
font-size:14px;
width:60px;
float:left;
position:relative;
}
.logo
{
width:150px;
height:28px;
line-height:30px;
font-size:14px;
position:relative;
float:left;
background: url('./images/logo2.png');
background-size: 100% 100%;
transition: all 1s;
transform-origin:bottom;
transform: rotateY(20deg);
}
.logo:hover
{
transform: none ;
cursor: not-allowed;
}
.bb_center_circle
{
position:absolute;
width:130px;
height:130px;
border-radius:65px;
border:1px solid black;
left:340px;
top:172px;
}
.bb_3point_left_arc
{
position:absolute;
left:0;
top:47px;
height:380px;
width:243px;
border-radius:0 190px 190px 0 ;
border:1px solid black;
}
.bb_key1_left
{
position:absolute;
left:0;
top:172px;
height:130px;
width:243px;
border-radius:0 65px 65px 0 ;
border:1px solid black;
}
.bb_key2_left
{
position:absolute;
left:113px;
top:172px;
height:130px;
width:65px;
border-radius:65px 0 0 65px ;
border:1px solid black;
border-style: dashed;
border-right-style: solid;
}
.hoop_left
{
position:absolute;
width:34px;
height:34px;
border-radius:18px;
border:1px solid black;
left:24px;
top:220px;
overflow:hidden
}
.backboard_left
{
position:absolute;
width:0px;
height:70px;
border:2px solid black;
left:10px;
top:202px;
}
.hoop_stem_left
{
position:absolute;
width:10px;
height:0px;
border:2px solid black;
left:11px;
top:236px;
}




.hoop_net_div
{
width:20%;
height:20%;
position:relative;
float:left;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.75);
}
.hoop_mid
{
position:absolute;
height:16px;
width:16px;
top:9px;
left:9px;
/*border-radius:8px;*/
/*background-color:rgb(237, 218, 125);*/
background:url('./images/hardwood.jpg');
}



.bb_3point_right_arc
{
position:absolute;
left:567px;
top:47px;
height:380px;
width:243px;
border-radius:190px 0 0 190px ;
border:1px solid black;
}
.bb_key1_right
{
position:absolute;
left:567px;
top:172px;
height:130px;
width:243px;
border-radius:65px 0 0 65px ;
border:1px solid black;
}
.bb_key2_right
{
position:absolute;
left:632px;
top:172px;
height:130px;
width:65px;
border-radius:0 65px 65px 0;
border:1px solid black;
border-style: dashed;
border-left-style: solid;
}
.hoop_right
{
position:absolute;
width:34px;
height:34px;
border-radius:18px;
border:1px solid black;
left:752px;
top:220px;
overflow:hidden
}
.backboard_right
{
position:absolute;
width:0px;
height:70px;
border:2px solid black;
left:798px;
top:202px;
}
.hoop_stem_right
{
position:absolute;
width:10px;
height:0px;
border:2px solid black;
left:787px;
top:236px;
}

/* outdoor soccer lines */
.af
{
border-color:#cccccc !important;
}
.af_left_penalty_area
{
position:absolute;
width:135px;
height:240px;
border:1px solid #cccccc;
left:0px;
top:118px;
}
.af_right_penalty_area
{
position:absolute;
width:135px;
height:240px;
border:1px solid #cccccc;
left:675px;
top:118px;
}
.af_left_goal_area
{
position:absolute;
width:45px;
height:100px;
border:1px solid #cccccc ;
left:0px;
top:188px;
}
.af_right_goal_area
{
position:absolute;
width:45px;
height:100px;
border:1px solid #cccccc ;
left:765px;
top:188px;
}
.af_left_penalty_arc
{
position:absolute;
width:120px;
height:120px;
border:1px solid #cccccc;
left:32px;
top:178px;
border-radius:60px;
border-color: transparent #cccccc transparent transparent;
}
.af_right_penalty_arc
{
position:absolute;
width:120px;
height:120px;
border:1px solid #cccccc;
left:658px;
top:178px;
border-radius:60px;
border-color: transparent transparent transparent #cccccc ;
}
.af_center_circle
{
position:absolute;
width:120px;
height:120px;
border-radius:60px;
border:1px solid #cccccc;
left:346px;
top:178px;
}


/* end outdoor soccer lines*/
/* start ice hockey lines*/

.h_halfway_line
{
position:absolute;
width:0px;
height:418px;
border:1px dashed red;
left:405px;
top:0px;
}
.h_left_blue_line
{
position:absolute;
width:0px;
height:418px;
border:2px solid blue;
left:305px;
top:0px;
}
.h_left_goal_line
{
position:absolute;
width:0px;
height:418px;
border:1px solid red;
left:45px;
top:0px;
}
.h_right_blue_line
{
position:absolute;
width:0px;
height:418px;
border:2px solid blue;
left:503px;
top:0px;
}
.h_right_goal_line
{
position:absolute;
width:0px;
height:418px;
border:1px solid red;
left:765px;
top:0px;
}








.h_circle
{
position:absolute;
width:110px;
height:110px;
border-radius:55px;
}
.h_center
{
border:1px solid blue;
left:350px;
top:154px;
}
.h_left_top
{
border:1px solid red;
left:70px;
top:42px;
}
.h_left_bottom
{
border:1px solid red;
left:70px;
top:266px;
}
.h_right_top
{
border:1px solid red;
left:630px;
top:42px;
}
.h_right_bottom
{
border:1px solid red;
left:630px;
top:266px;
}

.h_faceoff
{
position:absolute;
width:0;
height:0;
border-radius:8px;
border:7px solid red;
}
.h_dot1
{
left:119px;
top:91px;
}
.h_dot2
{
left:119px;
top:315px;
}
.h_dot3
{
left:315px;
top:91px;
}
.h_dot4
{
left:315px;
top:315px;
}
.h_dot5
{
left:483px;
top:91px;
}
.h_dot6
{
left:483px;
top:315px;
}
.h_dot7
{
left:679px;
top:91px;
}
.h_dot8
{
left:679px;
top:315px;
}

.h_left_goal_arc
{
position:absolute;
width:30px;
height:60px;
background-color:aqua;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
border:1px solid red;
top:179px;
left:45px;
}
.h_right_goal_arc
{
position:absolute;
width:30px;
height:60px;
background-color:aqua;
border-top-left-radius:30px;
border-bottom-left-radius:30px;
border:1px solid red;
top:179px;
left:734px;
}
.h_left_goal
{
position:absolute;
width:20px;
height:50px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
border:1px solid red;
top:184px;
left:25px;
}
.h_right_goal
{
position:absolute;
width:20px;
height:50px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border:1px solid red;
top:184px;
left:765px;
}



/* end ice hockey lines*/
.footer
{
width:80%;
padding: 0 10% 0;
height:120px;
line-height:120px;
text-align:right;

position:relative;
float:left;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7aa084+0,8ab66b+44,65f78e+100 */
background: #7aa084; /* Old browsers */
background: -moz-linear-gradient(-45deg, #7aa084 0%, #8ab66b 44%, #65f78e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #7aa084 0%,#8ab66b 44%,#65f78e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #7aa084 0%,#8ab66b 44%,#65f78e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aa084', endColorstr='#65f78e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
.sport_controls
{
width:812px;
height:75px;
position:relative;
float:left;
border-bottom: 1px solid black;
}
.sport_selection_button
{
text-transform:uppercase;
font-size:12px;
width:130px;
height:30px;
line-height:30px;
margin-left:20px;
margin-top:20px;
border-radius:15px;
background-color:magenta;
position:relative;
float:left;
}
.small_shadow
{

}
.small_shadow:hover
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dddddd+0,5ded53+100 */
background: rgb(221,221,221); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(93,237,83,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%,rgba(93,237,83,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(221,221,221,1) 0%,rgba(93,237,83,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#5ded53',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.field_wrapper
{
/*transform: perspective( 450px ) rotateX(55deg) rotateZ(90deg) translateX(-200px);*/
overflow:visible;
background-color:transparent;
position:relative;
float:left;
height:auto;
width:auto;
margin-top:10px;
transition: all 0.7s;
}
.outer_wrapper
{
margin-top:10px;
width:100%;
height:auto;
position:relative;
float:left;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+35,a0d8ef+100 */
background: rgb(254,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(254,255,255,1) 0%, rgba(221,241,249,1) 35%, rgba(160,216,239,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(254,255,255,1) 0%,rgba(221,241,249,1) 35%,rgba(160,216,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.spacer_up
{
/*transform: perspective( 600px ) rotateX(65deg) rotateZ(90deg);*/
width:100%;
position:relative;
float:left;
height:auto;
margin-top:-476px;
}
.load_menu
{
position:absolute;
width:0px;
height:210px;
top:45px;
left:110px;
overflow:hidden;
background-color: rgba(122,122,223,1);
border-radius:15px;
z-index:3;
font-size:12px;
text-transform:uppercase;
color:transparent !important;
transition: 0.2s width, 0.2s left;
}
.load_menu_open
{
color:white !important;
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.75);
left:30px;
height:210px;
width:160px;
z-index:3;
}
.load_menu_title
{
position:relative;
float:left;
width:100%;
height:20px;
line-height:20px;
font-weight:bold;
border-bottom:1px solid gray;
cursor:default;
}
.load_option
{
position:relative;
float:left;
width:100%;
height:30px;
line-height:30px;
margin-top:5px;
background-color:rgba(150,150,150,0.2);
/*color:white;*/
transition:all 0.2s;
font-weight:600;
}
.load_option:hover
{
background-color:rgba(250,250,250,0.2);
font-weight:800;
}
.bold_pointer_hover:hover
{
font-weight:800;
cursor:pointer;
}

.not_allowed:hover
{
cursor: not-allowed;
}
.arrow_right
{
width:0px;
height:0px;
border-width: 10px 10px 10px 10px;
border-style:solid;
border-color: transparent transparent transparent #66cc66 ;
position:relative;
float:left;
margin-left:30px

}
.gradient3
{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,1e5799+100&0+0,1+100 */
background: -moz-linear-gradient(left, rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 */
}