/* Screen */
.stadium { fill:#FFF; }
.darkgrass { fill:url(#darkgreen); }
.lightgrass { fill:url(#lightgreen); }
.darkturf { fill:url(#darkturf); }
.lightturf { fill:url(#lightturf); }
.white { fill:url(#white); }
.yardline { stroke:#FFF; stroke-width:5; }
.backline { stroke:#FFF; stroke-width:8; }
.goalline { stroke:#FFF; stroke-width:5; }
.sideline { stroke:#FFF; stroke-width:12; } 
.endzonelogo { fill:#222; opacity:.5; }

/* Line Styles */
.routefill { fill:#444; }
.route { stroke:#444; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; cursor:pointer; }
.routeoption { stroke:#444; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:8,8; cursor:pointer; }
.motion { stroke:#444; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; cursor:pointer; stroke-dasharray:1,8; }
.action { stroke:#444; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; cursor:pointer; }
.man { stroke:#444; stroke-width:5; fill:none; stroke-linecap:butt; stroke-linejoin:miter; cursor:pointer; stroke-dasharray:3,5; }
.trail { stroke:#444; stroke-width:5; fill:none; stroke-linecap:butt; stroke-linejoin:miter; cursor:pointer; stroke-dasharray:7,5; }
.bracket { stroke:#444; stroke-width:5; fill:none; stroke-linecap:butt; stroke-linejoin:miter; cursor:pointer; stroke-dasharray:8,8; }

/* Position-tinted overrides */
g[defensetype="dl"] path { stroke:#FF8000; }
g[defensetype="lb"] path { stroke:#808; }
g[defensetype="db"] path { stroke:#804000; }

/* Thicker in options */
.option .route,
.option .routeoption,
.option .motion { stroke-width:10; }

.selected > .route,
.selected > .motion,
.selected > .routeoption { stroke:#F00; }

.arrow { marker-end:url(#arrow); }
.block { marker-end:url(#block); }
.stutter { marker-end:url(#stutter); }
.sit { marker-end:url(#sit); }

.defense ellipse { stroke:#000; fill:#DDD; stroke-width:2; cursor:pointer; }
.defense text { fill:#000; font-family:cabin_condensedregular,Tahoma; font-weight:bold; cursor:pointer; font-size:20px; text-anchor:middle; }
.offense ellipse { fill:#777; stroke-width:2; cursor:pointer; }
.skill ellipse { fill:#333; stroke-width:2; cursor:pointer; }
.offense rect { fill:#777; stroke-width:2; cursor:pointer; }
.offense text, .skill text { fill:#9F9; font-family:cabin_condensedregular,Tahoma; font-weight:bold; cursor:pointer; font-size:20px; text-anchor:middle; }

.sidelines { stroke:#FFF; stroke-width:50; }
.hashmark { stroke:#FFF; stroke-width:21; stroke-dasharray:3,18; }
.crosshashmark { stroke:#FFF; stroke-width:3; stroke-dasharray:14,91; }
.yardmarker { text-anchor:middle; fill:#FFF; font-family:Anton; opacity:1; font-size:56px; cursor:pointer; }
.yardmarkerarrow { fill:#FFF; cursor:pointer; }
.scrimmage1 { stroke:#FFF; stroke-width:7; cursor:pointer; }
.scrimmage2 { stroke:#050; stroke-width:7; stroke-dasharray:21,21; cursor:pointer; }
.hidden { display:none; }

.progression { cursor:pointer; }
.progression circle { fill:#FF0; opacity:.5; }
.progression text { fill:#000; font-family:cabin_condensedregular,Tahoma; font-weight:bold; font-size:18px; text-anchor:middle; }
.routechooser { cursor:pointer; }
.routechoosershape { fill:#FF0; }
.routechooserlabel { fill:#000; font-family:cabin_condensedregular,Tahoma; font-weight:bold; font-size:18px; text-anchor:middle; }

.menumask, .infopanelmask { cursor:pointer; stroke:#222; stroke-width:3px; }
.translucent { fill:#FFF; fill-opacity:.75; stroke-opacity:.75; }
.extratranslucent { fill:#FFF; fill-opacity:.1; stroke-opacity:.1; }
.extratranslucent .arrow { marker-end:url(#arrow_extratranslucent); }
.transparent { fill-opacity:0; fill:#FFF; }
.option { cursor:pointer; }
#football .leftarrow, #football .rightarrow { fill:#222; cursor:pointer; }

.spinner { opacity:.2; cursor:pointer; animation:spinner 1.2s linear infinite; transform-origin:50% 50%; }
@keyframes spinner { to { transform:rotate(360deg); } }

.optioncontainer { fill:#F3F3F3; stroke:#AAA; stroke-width:4px; }
.data .optioncontainer { fill:#F3F3F3; stroke:#AAA; stroke-width:4px; }
.selected .optioncontainer { stroke:#636363; stroke-width:4px; fill:#999; }
.selected .optionlabel { font-family:cabin_condensedregular,Tahoma; text-anchor:middle; fill:#222; }

.menutitle { font-family:cabin_condensedregular,Tahoma; fill:#444; cursor:pointer; }
.menutext { font-family:cabin_condensedregular,Tahoma; font-size:20px; fill:#444; text-anchor:left; }
.optionlabel { font-family:cabin_condensedregular,Tahoma; font-size:18px; fill:#444; text-anchor:middle; }
.center { text-anchor:middle; }
.menulogo { cursor:pointer; }

.labelcontainer { stroke:#060; stroke-width:4; fill:#060; }
.iconbuttonbackground { fill:#FFF; opacity:.01; cursor:pointer; }
.icons { fill:#444; cursor:pointer; }

.progressionicon { fill:#FF0; }
.progressioniconlabel { fill:#444; font-family:cabin_condensedregular,Tahoma; font-weight:bold; font-size:18px; text-anchor:middle; }
.coloricon { fill:#FF6; }
.iconlabel { fill:#444; font-family:cabin_condensedregular,Tahoma; font-weight:bold; font-size:18px; text-anchor:middle; }

.addsegment { cursor:crosshair; }

.handle { fill:#FFF; stroke:#F00; cursor:pointer; opacity:.6; }
.selected .handle { fill:#F00; stroke:#F00; opacity:.5; }
.notes { cursor:pointer; fill:#444; font-family:cabin_condensedregular,Tahoma; font-size:18px; text-anchor:middle; }
.notes_small { cursor:pointer; fill:#444; font-family:cabin_condensedregular,Tahoma; font-size:14px; }
.zone { cursor:pointer; fill:#95AD64; font-family:latoregular; font-size:20px; text-anchor:middle; font-weight:bold; }
.playerbutton { cursor:pointer; fill:#444; font-family:cabin_condensedregular,Tahoma; font-size:18px; text-anchor:middle; font-weight:bold; }
.playerbuttonbackground { cursor:pointer; stroke:#444; stroke-width:0; fill:#FFF; filter:url(#dropshadow); }
.passroute .selected, .blockroute .selected, .chiproute .selected { stroke:#444; }
.selected ellipse, .selected rect { stroke:#F00; }
.selected .progression circle { stroke:#F00; stroke-width:2px; opacity:1; }
.needsanswer ellipse, .needsanswer rect { stroke:#FF0; stroke-width:5px; }
.highlighted ellipse, .highlighted rect { stroke:#FF0; stroke-width:5px; }
.over .player { stroke:#FF0; }
.over .optioncontainer { stroke:#FF0; }

.fbclock { font-family:cabin_condensedregular,Tahoma; font-size:30px; font-weight:bold; fill:#000; text-anchor:left; }
.scrimmage_area { fill:#060; }
.scrimmageyardmarker { text-anchor:middle; fill:#060; font-family:Impact,OpenSans,Helvetica; opacity:1; font-size:24px; }

.scrimmage_yard { stroke:#FFF; stroke-width:3; }
.scrimmage_yard_large { stroke:#FFF; stroke-width:6; }
.scrimmage_sideline { stroke:#FFF; stroke-width:30; }

.ball { cursor:pointer; }
.fieldlogo { opacity:.5; }

.font_small { font-size:12px; }
.font_medium { font-size:18px; }
.font_large { font-size:24px; }
.font_extralarge { font-size:32px; font-weight:bold; }
.font_red { fill:#F00; }
.font_green { fill:#7B934B; }

/* Color families */
.red ellipse, .red rect, .red circle { fill:#F00; }
.red path { stroke:#F00; }
.red text { fill:#9F9; }
.red .arrow { marker-end:url(#arrow_red); }
.red .block { marker-end:url(#block_red); }
.red .stutter { marker-end:url(#stutter_red); }
.red .sit { marker-end:url(#sit_red); }

.green ellipse, .green rect, .green circle { fill:#0F0; }
.green path { stroke:#0F0; }
.green text { fill:#9F9; }
.green .arrow { marker-end:url(#arrow_green); }
.green .block { marker-end:url(#block_green); }
.green .stutter { marker-end:url(#stutter_green); }
.green .sit { marker-end:url(#sit_green); }

.orange ellipse, .orange rect, .orange circle { fill:#FF8000; }
.orange path { stroke:#FF8000; }
.orange text { fill:#444; }
.orange .arrow { marker-end:url(#arrow_orange); }
.orange .block { marker-end:url(#block_orange); }
.orange .stutter { marker-end:url(#stutter_orange); }
.orange .sit { marker-end:url(#sit_orange); }

.brown ellipse, .brown rect, .brown circle { fill:#804000; }
.brown path { stroke:#804000; }
.brown text { fill:#9F9; }
.brown .arrow { marker-end:url(#arrow_brown); }
.brown .block { marker-end:url(#block_brown); }
.brown .stutter { marker-end:url(#stutter_brown); }
.brown .sit { marker-end:url(#sit_brown); }

.blue ellipse, .blue rect, .blue circle { fill:#008; }
.blue path { stroke:#008; }
.blue text { fill:#FFF; }
.blue .arrow { marker-end:url(#arrow_blue); }
.blue .block { marker-end:url(#block_blue); }
.blue .stutter { marker-end:url(#stutter_blue); }
.blue .sit { marker-end:url(#sit_blue); }

.yellow ellipse, .yellow rect, .yellow circle { fill:#FF0; }
.yellow path { stroke:#FF0; }
.yellow text { fill:#444; }
.yellow .arrow { marker-end:url(#arrow_yellow); }
.yellow .block { marker-end:url(#block_yellow); }
.yellow .stutter { marker-end:url(#stutter_yellow); }
.yellow .sit { marker-end:url(#sit_yellow); }

.purple ellipse, .purple rect, .purple circle { fill:#808; }
.purple path { stroke:#808; }
.purple text { fill:#FFF; }
.purple .arrow { marker-end:url(#arrow_purple); }
.purple .block { marker-end:url(#block_purple); }
.purple .stutter { marker-end:url(#stutter_purple); }
.purple .sit { marker-end:url(#sit_purple); }

.cyan ellipse, .cyan rect, .cyan circle { fill:#00FFFF; }
.cyan path { stroke:#00FFFF; }
.cyan text { fill:#444; }
.cyan .arrow { marker-end:url(#arrow_cyan); }
.cyan .block { marker-end:url(#block_cyan); }
.cyan .stutter { marker-end:url(#stutter_cyan); }
.cyan .sit { marker-end:url(#sit_cyan); }

.white ellipse, .white rect, .white circle { fill:#FFF; }
.white path { stroke:#FFF; }
.white text { fill:#444; }
.white .arrow { marker-end:url(#arrow_white); }
.white .block { marker-end:url(#block_white); }
.white .stutter { marker-end:url(#stutter_white); }
.white .sit { marker-end:url(#sit_white); }

.dark ellipse, .dark rect, .dark circle { fill:#333; }
.dark path { stroke:#333; }
.dark text { fill:#9F9; }
.dark .arrow { marker-end:url(#arrow_dark); }
.dark .block { marker-end:url(#block_dark); }
.dark .stutter { marker-end:url(#stutter_dark); }
.dark .sit { marker-end:url(#sit_dark); }

.light ellipse, .light rect, .light circle { fill:#777; }
.light path { stroke:#777; }
.light text { fill:#444; }
.light .arrow { marker-end:url(#arrow_light); }
.light .block { marker-end:url(#block_light); }
.light .stutter { marker-end:url(#stutter_light); }
.light .sit { marker-end:url(#sit_light); }

.dark { fill:#333; }
.light { fill:#777; }
.darklight ellipse, .darklight rect { fill:url(#darklight); cursor:pointer; }
.lightdark ellipse, .lightdark rect { fill:url(#lightdark); cursor:pointer; }
.stripe rect, .stripe ellipse { fill:url(#stripe); cursor:pointer; }

/* Test / answers */
.selected .answercontainer { stroke:#060; stroke-width:8px; cursor:pointer; }
.answercontainer { fill:#F3F3F3; cursor:pointer; }
.answerlabel { font-family:cabin_condensedregular,Tahoma; font-size:18px; fill:#444; text-anchor:middle; }

.correct ellipse, .correct circle, .correct rect, .correct path { fill:#0F0; stroke:#0F0; }
.correct text { fill:#FFF; }
.correct .arrow { marker-end:url(#arrow_green); }

.incorrect ellipse, .incorrect circle, .incorrect rect, .incorrect path { fill:#F00; stroke:#F00; }
.incorrect text { fill:#FFF; }
/* .incorrect .arrow { marker-end:url(#arrow_red); }  (fixed typo) */

.correctshade ellipse, .correctshade circle, .correctshade rect, .correctshade path { stroke:#0F0; }
.incorrectshade ellipse, .incorrectshade circle, .incorrectshade rect, .incorrectshade path { stroke:#F00; }

.correct .answercontainer { fill:#0F0; stroke-width:0; }
.incorrect .answercontainer { fill:#F00; stroke-width:0; }
.correct .answerlabel { fill:#000; }
.incorrect .answerlabel { fill:#FFF; }

/* Letter color shortcuts */
.a circle { fill:#000080; } .a path { stroke:#000080; }
.b circle { fill:#800080; } .b path { stroke:#800080; }
.c circle { fill:#008080; } .c path { stroke:#008080; }
.d circle { fill:#F08000; } .d path { stroke:#F08000; }
.e circle { fill:#F0F000; } .e path { stroke:#F0F000; }

g[cid="routetrees"] .motion { stroke:#333 !important; }
.mediabackground { background-color:#2e3133; }