widgets [DeepBot]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~NOTOC~~
====== How to Setup Notifications/Widgets ======

If you have difficulty setting this up, or have any questions or suggestions, please post on the forums.

__**Notifications are VIP Only**__

To get VIP, you will need to make a payment of $5/month **[[http://deepbot.tv/services|Here]]**

  * **[[widgets#OBS Classic Setup|OBS Classic Setup]]**
  * **[[widgets#OBS Studio Setup|OBS Studio Setup]]**
  * **[[widgets#xSplit Setup|xSplit Setup]]**
  * **[[widgets#CLR Browser URLs|CLR Browser URLs]]**
  * **[[widgets#CSS Style Sheets|CSS Style Sheets]]**

----

===== Overview =====


This guide will run you through setting up notifications/widgets from Deepbot onto your streaming software.

----

===== OBS Classic Setup =====


__**Pre-requisites**__

  * **A.** OBS Classic - **[[http://obsproject.com/|OBS Website]]**
  * **B.** CLR Browser Plugin - **[[https://obsproject.com/forum/resources/clr-browser-source-plugin.22/|OBS Forum Thread]]**
    * Latest CLR Browser 32bit - **[[http://catchexception.org/tmp/CLRBrowserSourcePlugin3.7z|Download Link]]**
    * Latest CLR Browser 64bit - **[[http://catchexception.org/tmp/CLRBrowserSourcePlugin64Mark2.7z|Download Link]]**
  * **C.** You need to update your MS Visual C++ Run Times to 2013 - **[[http://www.microsoft.com/en-us/download/details.aspx?id=40784|Here]]** (Click download and choose x86 or x64 accordingly.)
  * **D.** Latest version of .NET Framework:
    * Web install: **[[http://www.microsoft.com/en-us/download/details.aspx?id=42643|Here]]**
    * Offline install: **[[http://www.microsoft.com/en-us/download/details.aspx?id=42642|Here]]**
  * **E.** Once you have finished all the steps listed above, you can now move onto the next steps.

**Note:** Having difficulty getting this installed? Check out this **[[https://www.youtube.com/watch?v=-iin_foaNJ4|video]]** here explaining the plugins and the install process

----

__**Setup**__

  ***A.** For Follows/Donation Notifications, you will need to "Enable Notifications/On-Screen Notifications" as well as check mark the box "OBS CLR Browser". Both options can be found on the "Config Tab" > "Follower/Donation Notification Options".
  ***B.** Open OBS > "Add New Source" > Select "CLR Browser"
  ***C.** A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

^ Notification/Widget Name ^ Default Version ^ Second Version ^
| **Cheer** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] ||
| **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] ||
| **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] |
| **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] |
| **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 ||
| **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] |
| **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] |
| **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] ||
| **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] ||
| **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] |
| **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] ||
| **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 ||
| **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|Image-Only Widget]] |


**Note**: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:
  * **dur=** - This means how long should the notification/widget stay visible.
  * **f=** - Means it will display follows on the Leader Board/Event List. (Use f=1)
  * **h=** - Means the height of the overall Host notification.
  * **hidecountdown=** - Means it will hide the countdown for the Roulette visual.
  * **hidewinners=** - Means it will hide winners for the Roulette visual.
  * **num=** - Means how many lines should be displayed for Leader Board/Event List.
  * **test=** - When set to 1, it will be a preview/test. When set to 0, it will **NOT** be a preview/test.
  * **time=** - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
  * **w=** - Means the width of the overall Host notification.

  ***D.** If you notice scroll bars, try increasing the dimensions.
  ***E.** Once done, click "OK"

----

===== OBS Studio Setup =====


__**Pre-requisites**__

  ***A.** OBS Studio - **[[http://obsproject.com/|OBS Website]]**
  ***B.** CLR Browser Plugin - **[[https://obsproject.com/forum/resources/browser-plugin.115/|OBS Forum Thread]]**
    * Windows - **[[https://github.com/kc5nra/obs-browser/releases/download/v1.22/obs-browser-1.22.zip|Download Link]]**
      * **To install:** Extract to the root of your installation folder. For those that used the OBS Studio installer, that would be: C:\Program Files (x86)\obs-studio\
    * Mac OS X (Stable Version) - **[[https://builds.catchexception.org/obs-browser/obs-browser-darwinx64-cefx86-1.0-6-g5980e5a-installer.dmg|Download Link]]**
      * **To install:** Download the dmg and double click the "OBS Browser Plugin Install.mpkg".

----

__**Setup**__

  ***A.** For Follows/Donation Notifications, you will need to "Enable Notifications/On-Screen Notifications" as well as check mark the box "OBS CLR Browser". Both options can be found on the "Config Tab" > "Follower/Donation Notification Options".
  ***B.** Open up OBS Studio > Under sources, Right Click > Select "Add" > Select "BrowserSource".
  ***C.** A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

^ Notification/Widget Name ^ Default Version ^ Second Version ^
| **Cheer** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] ||
| **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] ||
| **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] |
| **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] |
| **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 ||
| **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] |
| **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] |
| **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] ||
| **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] ||
| **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] |
| **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] ||
| **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 ||
| **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|Image-Only Widget]] |

**Note**: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:
  * **dur=** - This means how long should the notification/widget stay visible.
  * **f=** - Means it will display follows on the Leader Board/Event List. (Use f=1)
  * **h=** - Means the height of the overall Host notification.
  * **hidecountdown=** - Means it will hide the countdown for the Roulette visual.
  * **hidewinners=** - Means it will hide winners for the Roulette visual.
  * **num=** - Means how many lines should be displayed for Leader Board/Event List.
  * **test=** - When set to 1, it will be a preview/test. When set to 0, it will **NOT** be a preview/test.
  * **time=** - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
  * **w=** - Means the width of the overall Host notification.

  ***D.** If you notice scroll bars, try increasing the dimensions.
  ***E.** Input any Custom CSS in the CSS Box. If you do not have any Custom CSS, skip this step.
  ***F.** Once done, click "OK".

----

===== xSplit Setup =====

----

__**Pre-requisites**__

  ***A.** xSplit - **[[https://www.xsplit.com/|xSplit Website]]**

----

__**Setup**__

  ***A.** For Follows/Donation Notifications, you will need to "Enable Notifications/On-Screen Notifications" as well as check mark the box "OBS CLR Browser". Both options can be found on the "Config Tab" > "Follower/Donation Notification Options".
  ***B.** Open xSplit > Add Sources or Add > Select "Other" > "Webpage URL" (If you do not see this option, you may have to go to plugin store).
  ***C.** A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

^ Notification/Widget Name ^ Default Version ^ Second Version ^
| **Cheer** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] ||
| **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] ||
| **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] |
| **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] |
| **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 ||
| **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] |
| **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] |
| **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] ||
| **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] ||
| **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] |
| **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] ||
| **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 ||
| **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|Image-Only Widget]] |

**Note**: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:
  * **dur=** - This means how long should the notification/widget stay visible.
  * **f=** - Means it will display follows on the Leader Board/Event List. (Use f=1)
  * **h=** - Means the height of the overall Host notification.
  * **hidecountdown=** - Means it will hide the countdown for the Roulette visual.
  * **hidewinners=** - Means it will hide winners for the Roulette visual.
  * **num=** - Means how many lines should be displayed for Leader Board/Event List.
  * **test=** - When set to 1, it will be a preview/test. When set to 0, it will **NOT** be a preview/test.
  * **time=** - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
  * **w=** - Means the width of the overall Host notification.

  ***D.** If you see scroll bars or image is cut off, try increasing the dimensions.
  ***E.** Once done, click "OK"
    * If you plan on using Custom CSS, make sure to tick the Custom CSS box near the bottom. Then Hit Edit CSS Button to input css.
    * **Note:** If you do use Custom CSS, make sure to replace single quotes( ' ) with double quotes ( " ) in the CSS.

----

===== CLR Browser URLs =====

----

^ Notification/Widget Name ^ Default Version ^ Second Version ^
| **Cheer** | [[http://deepbot.tv/notifications/cheernotification.htm|Here]] ||
| **Cheer Goal Tracker** | [[http://deepbot.tv/widgets/cheertracker.htm|Here]] ||
| **Donation** | [[http://deepbot.tv/notifications/donationnotification.htm|Here]] 800x370 | [[http://deepbot.tv/notifications/donationnotification2.htm|Here]] |
| **Donation Goal Tracker** | [[http://deepbot.tv/widgets/donationtracker.htm|Vertical Version]] 300x300 | [[http://deepbot.tv/widgets/donationtracker.htm?mode=2|Horizontal Version]] |
| **Drag Race** | [[http://deepbot.tv/widgets/racetrack.htm|Here]] 900x650 ||
| **Follow** | [[http://deepbot.tv/notifications/follownotification.htm?dur=10000|Here]] 500x100 | [[http://deepbot.tv/notifications/follownotification1.htm?dur=10000|Here]] |
| **Host** | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] | [[http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200|Here]] |
| **Leader Board/Event List** | [[http://deepbot.tv/widgets/LeaderBoard.htm?num=5&time=15&test=0|Here]] ||
| **OBS/Twitch Chat Overlay** | [[http://deepbot.tv/notifications/OBSChatv11.htm?fade=30|Here]] ||
| **Roulette** | [[http://deepbot.tv/widgets/roulette.htm|Here]] | [[http://deepbot.tv/widgets/roulette_minimal.htm?hidecountdown=1&hidewinners=1|Minimal Version Here]] |
| **Subscriber** | [[http://deepbot.tv/notifications/subnotification3.htm|Here]] ||
| **Subscriber Goal Tracker** | [[http://deepbot.tv/widgets/subtracker.htm|Here]] 300x150 ||
| **Widgets** | [[http://deepbot.tv/widgets/InfoPanel.htm|Default Widget]] | [[http://deepbot.tv/widgets/ImagePanel.htm|Image-Only Widget]] |

----

===== CSS Style Sheets =====

----

For users who wish to use CSS to customize their notifications, here are the style sheets:

  ***C.** A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

^ Notification/Widget Name ^ Default Version ^ Second Version ^
| **Cheer** | [[widgets#Cheer Notification|Here]] ||
| **Donation** | [[widgets#Default Donation Notification|Default Donation]] | [[widgets#Custom Donation Notification|Custom Donation Notification]] |
| **Donation Goal Tracker** | [[widgets#Donation Tracker Mode 1|Vertical]] | [[widgets#Donation Tracker Mode 2|Horizontal]] |
| **Drag Race** | [[widgets#Drag Race|Here]] ||
| **Follow** | [[widgets#Default Follow Notification|Here]] | [[widgets#Custom Follow Notification|Here]] |
| **Host** | [[widgets#Host Notification|Here]] ||
| **Leader Board/Event List** | [[widgets#Leader Board|Here]] ||
| **OBS/Twitch Chat Overlay** | [[widgets#OBS Chat v9|Here]] ||
| **Streamer Threads** | [[widgets#Streamer Threads Notification|Here]] ||
| **Subscriber** | [[widgets#Sub Notification 3|Here]] ||
| **Subscriber Goal Tracker** | [[widgets#Sub Tracker|Here]] ||
| **Widgets** | [[widgets#Widget|Default Widget]] ||


Need Help with Custom Notifications? Check out the following links:
  * [[http://deepbot.deep.sg/forums/index.php?topic=2704.0|Custom Notification Workshop]]
  * [[http://deepbot.deep.sg/forums/index.php?board=13.0|Custom Notification Help Section]]

----

==== Cheer Notification ====

----
<code css>
body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 200px;
}
.cheerleftimg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 120px;
    height: 120px;
    background: url(http://static-cdn.jtvnw.net/bits/light/animated/blue/4);
    background-repeat: no-repeat;
    background-position-y: 0px;
    border: none;
}
.cheerleftamount {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 120px;
    height: 30px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
.cheerrightamount {
    position: absolute;
    top: 120px;
    left: 680px;
    width: 120px;
    height: 30px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
.cheerrightimg {
    position: absolute;
    top: 0px;
    left: 680px;
    width: 120px;
    height: 120px;
    background: url(http://static-cdn.jtvnw.net/bits/light/animated/blue/4);
    background-repeat: no-repeat;
    background-position-y: 0px;
}
#header {
    position: absolute;
    top: 20px;
    left: 120px;
    width: 560px;
    height: 60px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 28px;
    opacity: 0;
}
.cheername {} .cheerheaderamount {} .cheermsg {
    position: absolute;
    top: 60px;
    left: 120px;
    width: 560px;
    height: 60px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' cheered';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}
</code>

----

===== Default Donation Notification =====

----
<code css>
body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 365px;
    background-repeat: no-repeat;
}
#donor-notification .date {
    margin-right: 40px;
    padding-top: 43px;
    text-align: right;
    line-height: 20px;
    vertical-align: top;
    font-size: 20px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: white;
}
#donor-notification .streamname {
    margin-left: 34px;
    padding-top: 28px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 24px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #FFF;
    color: black;
}
#donor-notification .message {
    margin-left: 38px;
    float: left;
    padding-top: 9px;
    width: 70%;
    line-height: 40px;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
    font-family: Verdana;
    color: black;
}
#donor-notification .amount {
    float: right;
    width: 21%;
    padding-top: 17px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 30px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}
#donor-notification .donor {
    margin-left: 520px;
    padding-top: 147px;
    text-align: left;
    line-height: 28px;
    vertical-align: middle;
    font-size: 28px;
    font-family: Comic Sans MS;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}
</code>

----

=== For EU users who wish to use the Euro Cheque you can add this line to your CSS tab in the CLR browser plugin: ===

----

<code css>
#donor-notification {
background-image: url('deepbot.tv/images/notification/ChequeEUR.png') !important;
}
</code>

----

=== Custom Donation Notification ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
}
#donor-notification .header {
    color: #37b2e5;
    font-size: 38px;
    font-family: Algerian;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
    font-size: 20px;
    font-family: Verdana;
    color: #37b2e5;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#donor-notification .amount {
    font-family: Algerian;
    color: #DBDB1A;
    font-size: 50px;
}
#donor-notification .donor {
    font-family: Algerian;
    color: #DBDB1A;
    font-size: 50px;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}
</code>

----

=== Donation Tracker Mode 1 ===

----

<code css>
body {
	background-color: transparent;
	color: white;
}

#content {
	width:300px;
	margin:5px;
	margin-left: 45px;
}

#thermometer {
	width:70px;
	height:300px;
	position: relative;
	background: #ddd;
	border:1px solid #aaa;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;

	-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}

#thermometer .track {
	height:280px;
	top:10px;
	width:20px;
	border: 1px solid #aaa;
	position: relative;
	margin:0 auto;
	background: rgb(255,255,255);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
	background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:      -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:     -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:    -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:   linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background-position: 0 -1px;
	background-size: 100% 5%;
}

#thermometer .progress {
	height:0%;
	width:100%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
	position: absolute;
	bottom:0;
	left:0;
}

#thermometer .goal {
	position:absolute;
	top:0;
}

#thermometer .end-amount {
	display: inline-block;
	padding:0 0px 0 25px;
	border-top:1px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	color:#333;
}

#thermometer .progress .amount {
	padding:0 25px 0 0px;
	position: absolute;
	border-top:1px solid #060;
	font-family: Trebuchet MS;
	font-weight: bold;
	color:#060;
	right:0;
}
</code>

----

=== Donation Tracker Mode 2 ===

----

<code css>
body {
	background-color: transparent;
	color: white;
}

#content {
	/* width:100%; */
	padding: 10px 10px;
}

#thermometer {
	position: relative;
	margin: 0px 10px 10px 10px;
	height:100px;
	background: #ddd;
	border:1px solid #aaa;
	-webkit-border-radius: 12px;
	-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}

#thermometer .track {
	height:50px;
	top: 0px;
	border: 1px solid #aaa;
	margin: 20px 20px;
	background: rgb(255,255,255);
}

#thermometer .progress {
	height: 50px;
	width:10%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
}

#thermometer .goal {
	position:absolute;
	width: 100%;
}

#thermometer .start-amount {
	position: absolute;
	float: right;
	display: inline-block;
	border-top:0px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	top: 50px;
	right: 0px;
	width: 100%;
	color:#333;
}
#thermometer .end-amount {
	position: absolute;
	float: right;
	display: inline-block;
	padding-right: 40px;
	border-top:0px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	top: 50px;
	right: 0px;
	color:#333;
}
#thermometer .progress .amount {
	display: block;
	position: absolute;
	text-align: center;
	border-top: 0px solid #060;
	font-family: Trebuchet MS;
	font-size: 32px;
	font-weight: bold;
	color: #060;
	top: 27px;
	width: 100%;
}
</code>

----

=== Default Follow Notification ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#follow-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
    background-color: #0A2027;
    border-radius: 10px;
}
#follow-notification .leftimage {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    background-size: 100px;
    float: left;
    border-radius: 10px;
}
#follow-notification .followname {
    margin-left: 96px;
    padding-top: 15px;
    text-align: center;
    width: 385px;
    line-height: 55px;
    vertical-align: middle;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#follow-notification .header {
    margin-right: 115px;
    padding-top: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #FFFDE8;
    color: red;
    float: right;
    border-bottom: red;
    border-bottom-style: double;
}

</code>

----

=== Custom Follow Notification ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#follow-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
    border-radius: 10px;
    background-image: url("http://deepbot.tv/images/Achievement.gif");
    background-repeat: no-repeat;
}
#follow-notification .followname {
    margin-left: 96px;
    text-align: center;
    width: 313px;
    font-size: 32px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#follow-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
</code>

----

=== Host Notification ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url("http://deepbot.tv/notifications/images/host.gif");
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 20px;
    text-align: center;
    width: 313px;
    font-size: 24px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    margin-left: 2px;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
    border-radius: 50%;
    width: 44px;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 3px solid #F00;
    font: 22px Arial, sans-serif;
    -webkit-transform: rotate(-45deg);
}
.hostnumber {
    position: relative;
    top: 11%;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is bringing the party!';
}
.hostnum:after {
    content: '';
}
</code>

----

=== Widget ===

----

<code css>
@font-face {
    font-family: 'Dolce Vita';
    src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
    width: 0px;
    height: 0px;
    background: #2e5794;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    color: white;
    font-family: 'Dolce Vita';
    -webkit-box-shadow: 0px 0px 20px #0f3369;
}
#infoHeader {
    width: 400px;
    height: 26px;
    background: #0f3369;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 24px;
}
#infoContent {
    width: 400px;
    height: 94px;
    background: #2e5794;
    position: relative;
    overflow: hidden;
    color: white;
}
#infoContentText {
    text-align: center;
    display: table-cell;
    height: 80px;
    width: 300px;
    vertical-align: middle;
}
#InfoImage {
    width: 90px;
    height: 90px;
    float: left;
    background-image: url("images/twitchLogo.png");
    background-repeat: no-repeat;
    background-size: contain;
}
</code>

----

=== Leader Board ===

----

<code css>
@font-face {
    font-family: 'Dolce Vita';
    src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
    width: 300px;
    height: 180px;
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    color: white;
    font-family: 'Dolce Vita';
    //-webkit-box-shadow: 0px 0px 20px #0f3369;
}
.leaderText {
    background: transparent;
    position: relative;
    overflow: hidden;
    text-align: left;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: black;
}
</code>

----

=== OBS Chat v9 ===

----

<code css>
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}
</code>

----

=== Drag Race ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#race-track {
    background-image: url('http://deepbot.tv/images/widgets/racetrack/racetrack.png');
    width: 900px;
    height: 650px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    display: none;
}
#race-track .Car1 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carblue.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 8px;
}
#race-track .Car2 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/cargreen.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 91px;
}
#race-track .Car3 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carblack.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 171px;
}
#race-track .Car4 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carpurple.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 251px;
}
#race-track .Car5 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carred.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 331px;
}
#race-track .Car6 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/cargold.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 411px;
}
#race-track .Car7 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/caryellow.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 491px;
}
#race-track .Car8 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carskyblue.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 571px;
}
</code>

----

=== Streamer Threads Notification ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#streamerthreads-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 730px;
    height: 730px;
    border-radius: 5px;
    background-image: url("http://streamerthreads.co.uk/api/bg.png");
    background-repeat: no-repeat;
}
#streamerthreads-notification .streamerthreadsname {
    position: absolute;
    margin-top: 245px;
    text-align: center;
    width: 750px;
    font-size: 58px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    font-weight: bold;
    color: #9966ff;
}
#streamerthreads-notification .header {
    position: absolute;
    margin-top: 380px;
    text-align: center;
    width: 750px;
    font-size: 62px;
    font-weight: bold;
    line-height: 26px;
    font-family: 'Verdana';
    text-shadow: 2px 2px 1px #000;
    color: #9966ff;
}
#streamerthreads-notification .header:after {
    content: "'s";
}

</code>

----

=== Sub Notification ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 410px;
    background-repeat: no-repeat;
    background-position-y: 30px;
}
#sub-notification .subname {
    margin-left: 55px;
    padding-top: 100px;
    text-align: left;
    width: 385px;
    line-height: 45px;
    vertical-align: middle;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#sub-notification .streamname {
    margin-right: 40px;
    padding-top: 20px;
    text-align: right;
    line-height: 45px;
    vertical-align: top;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: transparent;
    text-shadow: 0 0 3px rgba(255, 255, 255, 1);
}
#sub-notification .header {
    margin-right: 0px;
    padding-top: 10px;
    text-align: center;
    vertical-align: top;
    font-size: 32px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #CBC2FF;
    color: black;
}


</code>

----

=== Sub Notification 3 ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 580px;
    height: 370px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://deepbot.tv/notifications/CreditCard.png');
}
#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 580px;
    height: 370px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://deepbot.tv/notifications/NoNumCreditCard.png');
}
.subname {
    margin-left: 60px;
    padding-top: 175px;
    width: 380px;
    text-align: left;
    line-height: 14px;
    font-size: 28px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: ##FF0000;
}
.months {
    position: absolute;
    top: 55px;
    margin-left: 420px;
    width: 20px;
    text-align: right;
    line-height: 14px;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
.badge {
    position: absolute;
    top: 50px;
    margin-left: 420px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    -webkit-animation: rot 3s infinite linear;
}
.msg {
    position: absolute;
    top: 20px;
    margin-left: 40px;
    width: 60%;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}
</code>

----

=== Sub Tracker ===

----

<code css>
body {
    background-color: transparent;
    color: white;
}
#content {
    width: 300px;
    margin: 5px;
    margin-left: 45px;
}
#gauge-value {
    color: red;
    width: 300px;
    text-align: center;
    font-size: 52;
    font-weight: bold;
    margin-top: -80px;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: white;
    position: absolute;
    text-shadow: 1px 0px 20px black;
}
</code>