diff --git a/static/june_2007_style/autocomplete_tagging.css.tmpl b/static/june_2007_style/autocomplete_tagging.css.tmpl
new file mode 100644
index 00000000000..21d83e05533
--- /dev/null
+++ b/static/june_2007_style/autocomplete_tagging.css.tmpl
@@ -0,0 +1,133 @@
+/****************************************************************************/
+/* JQuery autocomplete code                                                 */
+/****************************************************************************/
+
+.ac_results {
+	padding: 0px;
+	border: 1px solid black;
+	background-color: white;
+	overflow: hidden;
+	z-index: 99999;
+}
+
+.ac_results ul {
+	width: 100%;
+	list-style-position: outside;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.ac_results li {
+	padding: 2px 5px;
+	cursor: default;
+	display: block;
+	/* 
+	if width will be 100% horizontal scrollbar will apear 
+	when scroll mode will be used
+	*/
+	/*width: 100%;*/
+    /* font: menu; */
+	font-size: 12px;
+	/* 
+	it is very important, if line-height not setted or setted 
+	in relative units scroll will be broken in firefox
+	*/
+	line-height: 16px;
+	overflow: hidden;
+}
+
+.ac_loading {
+	background: white url('indicator.gif') right center no-repeat;
+}
+
+.ac_odd {
+	background-color: #fff; /* #eee */
+	margin-left: 0.3em;
+}
+
+.ac_even {
+    margin-left: 0.3em;
+}
+
+.ac_over {
+	background-color: #0A246A;
+	color: white;
+}
+
+.ac_header {
+    font-style: normal;
+    color: gray;
+    border-bottom: 0.1em solid gray;
+}
+
+/****************************************************************************/
+/* Custom code for supporting tags                                          */
+/****************************************************************************/
+.tag-area {
+    width: 100%;
+    cursor: pointer;
+    border: solid 1px #eee;
+}
+
+.active-tag-area {
+    background-color: white;
+}
+
+.toggle-link 
+{
+    font-weight: bold;  
+    padding: 0.3em;
+    margin-bottom: 1em;
+    width: 100%;
+    padding: 0.2em 0em 0.2em 0em;
+}
+
+.tag-button {
+    width: auto;
+    color: #444;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+    margin: 0.2em;
+    border: 0;
+    padding: 0.1em 0.5em 0.1em 0.5em;
+    -moz-border-radius: .5em;
+    -webkit-border-radius: .5em;
+    border-radius: .5em;
+    background:#bbb;
+}
+
+.tag-button img
+{
+    padding-left: 0.4em;
+}
+
+.tag-button .tag-name:hover
+{
+    color: white;
+}
+
+.add-tag-button
+{
+    margin-bottom: 0.3em;
+    vertical-align: middle;
+    padding: 0.3em;
+}
+
+.add-tag-button:hover
+{
+    cursor: pointer;
+}
+
+.tag-input {
+    vertical-align: bottom;
+    border: none;
+    outline: none;
+}
+
+.delete-tag-img
+{
+    
+    margin-left: 0.3em
+}
\ No newline at end of file
diff --git a/static/june_2007_style/blue/autocomplete_tagging.css b/static/june_2007_style/blue/autocomplete_tagging.css
new file mode 100644
index 00000000000..21d83e05533
--- /dev/null
+++ b/static/june_2007_style/blue/autocomplete_tagging.css
@@ -0,0 +1,133 @@
+/****************************************************************************/
+/* JQuery autocomplete code                                                 */
+/****************************************************************************/
+
+.ac_results {
+	padding: 0px;
+	border: 1px solid black;
+	background-color: white;
+	overflow: hidden;
+	z-index: 99999;
+}
+
+.ac_results ul {
+	width: 100%;
+	list-style-position: outside;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.ac_results li {
+	padding: 2px 5px;
+	cursor: default;
+	display: block;
+	/* 
+	if width will be 100% horizontal scrollbar will apear 
+	when scroll mode will be used
+	*/
+	/*width: 100%;*/
+    /* font: menu; */
+	font-size: 12px;
+	/* 
+	it is very important, if line-height not setted or setted 
+	in relative units scroll will be broken in firefox
+	*/
+	line-height: 16px;
+	overflow: hidden;
+}
+
+.ac_loading {
+	background: white url('indicator.gif') right center no-repeat;
+}
+
+.ac_odd {
+	background-color: #fff; /* #eee */
+	margin-left: 0.3em;
+}
+
+.ac_even {
+    margin-left: 0.3em;
+}
+
+.ac_over {
+	background-color: #0A246A;
+	color: white;
+}
+
+.ac_header {
+    font-style: normal;
+    color: gray;
+    border-bottom: 0.1em solid gray;
+}
+
+/****************************************************************************/
+/* Custom code for supporting tags                                          */
+/****************************************************************************/
+.tag-area {
+    width: 100%;
+    cursor: pointer;
+    border: solid 1px #eee;
+}
+
+.active-tag-area {
+    background-color: white;
+}
+
+.toggle-link 
+{
+    font-weight: bold;  
+    padding: 0.3em;
+    margin-bottom: 1em;
+    width: 100%;
+    padding: 0.2em 0em 0.2em 0em;
+}
+
+.tag-button {
+    width: auto;
+    color: #444;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+    margin: 0.2em;
+    border: 0;
+    padding: 0.1em 0.5em 0.1em 0.5em;
+    -moz-border-radius: .5em;
+    -webkit-border-radius: .5em;
+    border-radius: .5em;
+    background:#bbb;
+}
+
+.tag-button img
+{
+    padding-left: 0.4em;
+}
+
+.tag-button .tag-name:hover
+{
+    color: white;
+}
+
+.add-tag-button
+{
+    margin-bottom: 0.3em;
+    vertical-align: middle;
+    padding: 0.3em;
+}
+
+.add-tag-button:hover
+{
+    cursor: pointer;
+}
+
+.tag-input {
+    vertical-align: bottom;
+    border: none;
+    outline: none;
+}
+
+.delete-tag-img
+{
+    
+    margin-left: 0.3em
+}
\ No newline at end of file