refactoring

django_code/apps/cloudmanager/apps.py

@@ -0,0 +1,30 @@
+from django.http import HttpResponse
+from django.http import HttpResponseRedirect
+from django.shortcuts import render
+import os
+import psycopg2
+from apps.cloudmanager.db_interaction import DB_generation,Check_server_supposed_XXX,Give_current_weekday,Give_current_hour
+
+def hello(request):
+    list_schedule = ['schedule1','schedule2']
+    list_servers_up = [['wiki', 'wikijs', 2], ['book', 'bookstack-db', 1]]
+    return render(request, 'index.html', {'list_schedule':list_schedule,'list_servers_up':list_servers_up})
+    
+def print(request):
+    print("Im here")
+    return 0
+def redirect(request):
+    db_host = os.environ.get('DB_HOST')
+    db_port = os.environ.get('DB_PORT')
+    db_user = os.environ.get('DB_USERNAME')
+    db_password = os.environ.get('DB_PASSWORD')
+    db_name = os.environ.get('CUSTOM_DB_DATABASE',os.environ.get('DB_DATABASE'))
+    
+    generated_db = DB_generation(db_host, db_port, db_user, db_password,db_name)
+    ##operation:
+    ## Server(s) supposed to be UP
+    
+    list_servers_up = Check_server_supposed_XXX(generated_db, "up", Give_current_hour(),Give_current_weekday())
+    print(list_servers_up)
+    return render(request, 'cmm_blank_page.html', {'list_servers_up':list_servers_up})
+

django_code/apps/cloudmanager/credentials.py

@@ -0,0 +1,7 @@
+
+class sql:
+    url = 'localhost'
+    port = 5432
+    user = 'postgres'
+    password = 'example'
+    database = 'cloudmanager'

django_code/apps/cloudmanager/db_interaction.py

@@ -0,0 +1,167 @@
+import psycopg2
+from django.http import HttpResponse
+from django.views.decorators.http import require_POST
+from apps.kubernetes_connection import apps as kubernetes_connection
+import datetime
+from apps.cloudmanager import credentials
+import os
+
+def hello(request):
+    kubernetes_connection.echoHello();
+    return HttpResponse('<h1>Hello cmm !</h1>')
+
+def DB_generation(host_in,port_in,user_in,password_in,db_in):
+    db = psycopg2.connect(host=host_in, port=port_in, user=user_in, password=password_in,database=db_in)
+    return db
+
+@require_POST
+def change_schedule(request):
+    # HTMX sends these via standard POST data
+    schedule_id = request.POST.get('schedule_id')
+    server_name = request.POST.get('server_name')
+
+    if not schedule_id or not server_name:
+        return HttpResponse("<span style='color: red;'>Missing parameters.</span>", status=400)
+
+    try:
+        # --- Your Core Logic Here ---
+        # e.g., Server.objects.filter(name=server_name).update(schedule_id=schedule_id)
+        print(f"Updating {server_name} to schedule profile {schedule_id}")
+
+        # Return a success message that will instantly inject into the server's status div
+        return HttpResponse("<span style='color: green;'>✓ Updated successfully!</span>")
+
+    except Exception as e:
+        return HttpResponse(f"<span style='color: red;'>Error: {str(e)}</span>", status=500)
+
+def Launch_sql_query(sql,db):
+    # prepare a cursor object using cursor() method
+    cursor = db.cursor()
+
+    try:
+        # Execute the SQL command
+        cursor.execute(sql)
+        # Fetch all the rows in a list of lists.
+        results = cursor.fetchall()
+        result_machine = []
+        #result_machine_type = []
+        for row in results:
+            result_machine_type = []
+            namespace = row[0]
+            name = row[1]
+            replicas = row[2]
+
+            result_machine_type.append(namespace)
+            result_machine_type.append(name)
+            result_machine_type.append(replicas)
+            result_machine.append(result_machine_type)
+        return result_machine
+
+    except:
+        print ("Error: unable to fetch data")
+
+
+#Return the day of the week as an integer, where Monday is 0 and Sunday is 6.
+def Give_current_weekday():
+    days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday', 'Sunday']
+    weekday = days[datetime.datetime.today().weekday()]
+    return weekday
+
+def Give_current_hour():
+    now = datetime.datetime.now()
+    return now.hour
+
+
+def Check_server_supposed_XXX(generated_db_in,wanted_status,Wanted_hour,Wanted_day):
+    sql_in=""
+    if wanted_status == "up":
+        sql_in = "select machine.namespace, machine.name, machine.replicas from scenario_hour,machine ,scenario_day_of_week where state_at_" + str(Wanted_hour) + "='1' and state_" + str(Wanted_day) + "='1' and machine.hour_behaviour_id=scenario_hour.id_scenario and machine.day_behaviour_id=scenario_day_of_week.id_scenario;"
+    elif wanted_status == "down":
+        sql_in = "select machine.namespace, machine.name, machine.replicas from scenario_hour,machine ,scenario_day_of_week where not(state_at_" + str(Wanted_hour) + "='1' and state_" + str(Wanted_day) + "='1') and machine.hour_behaviour_id=scenario_hour.id_scenario and machine.day_behaviour_id=scenario_day_of_week.id_scenario;"
+    else:
+        print("error value")
+    print(sql_in)
+    return_value = Launch_sql_query(sql_in, generated_db_in)
+    return return_value
+
+def Is_the_server_already_wanted_state(id_machine, wanted_state,instance_type):
+    #stopped/running
+    bool_result = ""
+    proxmox = function.proxmox_connection(credentials.proxmox.zeus.url_proxmox,credentials.proxmox.zeus.user,credentials.proxmox.zeus.password)
+    if str(function.check_state_mix(id_machine,wanted_state,proxmox,instance_type)) == str(wanted_state):
+        bool_result = True
+    else:
+        bool_result = False
+    return bool_result
+
+def all_operations(request,wanted_state,list_machine):
+    for machine_target in list_machine:
+        print(machine_target[1])
+
+        info_to_display = ""
+        if wanted_state == "up":
+            kubernetes_connection.scale_up(request,namespace_name=machine_target[0],deploy_name=machine_target[1],replicas=machine_target[2]);
+        elif wanted_state == "down":
+            kubernetes_connection.scale_down(request,namespace_name=machine_target[0],deploy_name=machine_target[1]);
+        else:
+            print("Incorrect wanted state")
+
+
+        
+        # if not(Is_the_server_already_wanted_state(machine_target[0], wanted_state,machine_target[1])):
+        #     function.action(False,machine_target[0],operation_to_perform,machine_target[1])
+        #     print(str(machine_target[0])+" is now "+str(wanted_state))
+        # elif Is_the_server_already_wanted_state(machine_target[0], wanted_state,machine_target[1]):
+        #     info_to_display = "operation already performed for "+machine_target[2]
+        #     print(info_to_display)
+    #return info_to_display
+    return ""
+
+def main(request):
+    
+    #get credentials from the env
+    db_host = os.environ.get('DB_HOST')
+    db_port = os.environ.get('DB_PORT')
+    db_user = os.environ.get('DB_USERNAME')
+    db_password = os.environ.get('DB_PASSWORD')
+    db_name = os.environ.get('CUSTOM_DB_DATABASE',os.environ.get('DB_DATABASE'))
+
+    generated_db = DB_generation(db_host, db_port, db_user, db_password,db_name)
+    ##operation:
+    ## Server(s) supposed to be UP
+
+    list_servers_up = Check_server_supposed_XXX(generated_db, "up", Give_current_hour(),Give_current_weekday())
+    print("------------------------------------------")
+    print("-----------------UP-----------------------")
+    print("------------------------------------------")
+    print(list_servers_up)
+    print(all_operations(request,"up", list_servers_up))
+
+
+    ## Server(s) supposed to be DOWN
+    list_servers_down = Check_server_supposed_XXX(generated_db, "down", Give_current_hour(),Give_current_weekday())
+    
+    print("------------------------------------------")
+    print("----------------DOWN----------------------")
+    print("------------------------------------------")
+    print(list_servers_down)
+    print(all_operations(request,"down",list_servers_down))
+     
+     
+    # disconnect from server
+    generated_db.close()
+
+    #print(Is_the_server_already_wanted_state(112, "stopped"))
+    return HttpResponse('<h1>CMM executed!</h1>')
+    
+if __name__ == "__main__":
+    main()
+
+
+"""
+TO DO:
+ EXTRACT TYPE OF MACHINE
+ CREATE FUNCTION TO CHECK IF A MACHINE IS ALREADY DOWN OR NOT
+ ADD FIELD IN SQL WITH PROJECT AND PUT DESCRIPTION -> ATTACH MACHINE TO PROJECT
+
+"""

django_code/apps/cloudmanager/sql/cloudmanager_machine.sql

@@ -0,0 +1,13 @@
+drop table IF EXISTS machine;
+CREATE TABLE IF NOT EXISTS machine (
+    id         		    integer NOT NULL PRIMARY KEY,
+    namespace  	        varchar(100) NOT null,
+    name              	varchar(100) NOT null,
+    hour_behaviour_id 	integer      NOT null,
+    day_behaviour_id  	integer      NOT null,
+    replicas          	integer      NOT null
+    );
+
+INSERT into machine (id, namespace, name, hour_behaviour_id, day_behaviour_id,replicas) VALUES (1, 'echo', 'echo-server',  0, 1,1);
+INSERT into machine (id, namespace, name, hour_behaviour_id, day_behaviour_id,replicas) VALUES (2, 'wiki', 'wikijs',  1, 1,2);
+INSERT into machine (id, namespace, name, hour_behaviour_id, day_behaviour_id,replicas) VALUES (3, 'book', 'bookstack-db',  2, 1,1);

django_code/apps/cloudmanager/sql/cloudmanager_scenario_day_of_week.sql

@@ -0,0 +1,16 @@
+create table scenario_day_of_week
+(
+    id_scenario     integer NOT NULL PRIMARY KEY,
+    name_scenario   varchar(255) null,
+    state_Monday    BOOLEAN    null,
+    state_Tuesday   BOOLEAN    null,
+    state_Wednesday BOOLEAN    null,
+    state_Thursday  BOOLEAN    null,
+    state_Friday    BOOLEAN    null,
+    state_Saturday  BOOLEAN    null,
+    state_Sunday    BOOLEAN    null
+);
+
+
+INSERT INTO scenario_day_of_week (id_scenario, name_scenario, state_Monday, state_Tuesday, state_Wednesday, state_Thursday, state_Friday, state_Saturday, state_Sunday) VALUES (0, 'always off', FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE);
+INSERT INTO scenario_day_of_week (id_scenario, name_scenario, state_Monday, state_Tuesday, state_Wednesday, state_Thursday, state_Friday, state_Saturday, state_Sunday) VALUES (1, 'always on', TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE);

django_code/apps/cloudmanager/sql/cloudmanager_scenario_hour.sql

@@ -0,0 +1,33 @@
+create table scenario_hour
+(
+    id_scenario     integer NOT NULL PRIMARY KEY,
+    name_scenario varchar(255) null,
+    state_at_0    BOOLEAN    null,
+    state_at_1    BOOLEAN    null,
+    state_at_2    BOOLEAN    null,
+    state_at_3    BOOLEAN    null,
+    state_at_4    BOOLEAN    null,
+    state_at_5    BOOLEAN    null,
+    state_at_6    BOOLEAN    null,
+    state_at_7    BOOLEAN    null,
+    state_at_8    BOOLEAN    null,
+    state_at_9    BOOLEAN    null,
+    state_at_10   BOOLEAN    null,
+    state_at_11   BOOLEAN    null,
+    state_at_12   BOOLEAN    null,
+    state_at_13   BOOLEAN    null,
+    state_at_14   BOOLEAN    null,
+    state_at_15   BOOLEAN    null,
+    state_at_16   BOOLEAN    null,
+    state_at_17   BOOLEAN    null,
+    state_at_18   BOOLEAN    null,
+    state_at_19   BOOLEAN    null,
+    state_at_20   BOOLEAN    null,
+    state_at_21   BOOLEAN    null,
+    state_at_22   BOOLEAN    null,
+    state_at_23   BOOLEAN    null
+);
+
+INSERT INTO scenario_hour (id_scenario, name_scenario, state_at_0, state_at_1, state_at_2, state_at_3, state_at_4, state_at_5, state_at_6, state_at_7, state_at_8, state_at_9, state_at_10, state_at_11, state_at_12, state_at_13, state_at_14, state_at_15, state_at_16, state_at_17, state_at_18, state_at_19, state_at_20, state_at_21, state_at_22, state_at_23) VALUES (0, 'always off uk', FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE);
+INSERT INTO scenario_hour (id_scenario, name_scenario, state_at_0, state_at_1, state_at_2, state_at_3, state_at_4, state_at_5, state_at_6, state_at_7, state_at_8, state_at_9, state_at_10, state_at_11, state_at_12, state_at_13, state_at_14, state_at_15, state_at_16, state_at_17, state_at_18, state_at_19, state_at_20, state_at_21, state_at_22, state_at_23) VALUES (1, 'always on uk', TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE);
+INSERT INTO scenario_hour (id_scenario, name_scenario, state_at_0, state_at_1, state_at_2, state_at_3, state_at_4, state_at_5, state_at_6, state_at_7, state_at_8, state_at_9, state_at_10, state_at_11, state_at_12, state_at_13, state_at_14, state_at_15, state_at_16, state_at_17, state_at_18, state_at_19, state_at_20, state_at_21, state_at_22, state_at_23) VALUES (2, 'awake hours uk', FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, FALSE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE);

django_code/apps/cloudmanager/templates/cmm_blank_page.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/512/6402/6402576.png">
+    <title> title </title>
+    <table>
+        <tr>
+            <th>namespace</th>
+            <th>name</th>
+            <th>replicas</th>
+        </tr>
+        {% block content %}
+        {% for machine_target in list_servers_up %}
+        <tr>
+            <td>{{ machine_target.0 }}</td>
+            <td>{{ machine_target.1 }}</td>
+            <td>{{ machine_target.2 }}</td>
+
+        </tr>
+        {% endfor %}
+        {% endblock %}
+    </table>
+
+</head>
+
+</html>

django_code/apps/cloudmanager/templates/cmm_redirect_form.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Redirect form</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <style>
+        @charset "UTF-8";
+        .m-b-xs {
+            margin-bottom: 2%;
+        }
+
+        .m-b-md {
+            margin-bottom: 10%;
+        }
+
+        .m-t-xs {
+            margin-top: 2%;
+        }
+
+        .m-t-sm {
+            margin-top: 5%;
+        }
+
+        * {
+            outline: 0 !important;
+        }
+
+        body {
+            padding: 2% 0;
+            background-color: #37404a;
+        }
+
+        h1 {
+            font-family: "Roboto", sans-serif;
+            font-size: 2.2em;
+            font-weight: 300;
+            color: #85ffc7;
+            text-transform: uppercase;
+        }
+
+        p {
+            font-family: "Roboto", sans-serif;
+            font-size: 1.1em;
+            font-weight: 300;
+            color: #fff;
+        }
+
+        a {
+            color: #fff;
+        }
+        a:hover {
+            text-decoration: none;
+            color: #fff;
+        }
+
+        #survey-form label,
+        #survey-form .labels {
+            display: block;
+            margin-bottom: 2%;
+            font-family: "Roboto", sans-serif;
+            font-size: 1.1em;
+            font-weight: 300;
+            color: #fff;
+            letter-spacing: 0.5px;
+        }
+        #survey-form input::-webkit-input-placeholder {
+            color: transparent !important;
+        }
+        #survey-form input::-moz-placeholder {
+            color: transparent !important;
+        }
+        #survey-form input:-ms-input-placeholder {
+            color: transparent !important;
+        }
+        #survey-form input:-moz-placeholder {
+            color: transparent !important;
+        }
+        #survey-form input,
+        #survey-form select {
+            display: block;
+            width: 100%;
+            overflow: hidden;
+            outline: none;
+            border: 2px solid #333;
+        }
+        #survey-form input {
+            margin-top: 1.5%;
+            padding: 0 0 5px 0;
+            background: transparent;
+            border: none;
+            outline: none;
+            border-bottom: 2px solid #fff;
+            font-size: 1.1em;
+            font-weight: 300;
+            color: #85ffc7;
+        }
+        #survey-form input:focus {
+            border-color: #85ffc7;
+        }
+        #survey-form [type=checkbox],
+        #survey-form [type=radio] {
+            display: inline-block;
+            width: auto;
+            margin: 0px 10px 0 0;
+        }
+        #survey-form [type=checkbox],
+        #survey-form [type=radio] {
+            display: inline-block;
+            margin: 0 10px 0 0 !important;
+            position: relative;
+            top: 5px;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            -o-appearance: none;
+            appearance: none;
+            height: 23px;
+            width: 23px;
+            transition: all 0.15s ease-out 0s;
+            background: #37404a;
+            color: #fff;
+            cursor: pointer;
+            outline: none;
+            z-index: 1000;
+            border: 1px solid #fff;
+        }
+        #survey-form [type=checkbox]:hover,
+        #survey-form [type=radio]:hover {
+            border-color: #85ffc7;
+        }
+        #survey-form [type=checkbox]:checked:before,
+        #survey-form [type=radio]:checked:before {
+            display: inline-block;
+            height: 21px;
+            width: 21px;
+            position: relative;
+            left: 0;
+            bottom: 0;
+            content: "";
+            text-align: center;
+            font-family: "Glyphicons Halflings";
+            line-height: 20px;
+            font-size: 15px;
+            color: #85ffc7;
+        }
+        #survey-form [type=checkbox]:focus,
+        #survey-form [type=radio]:focus {
+            outline: none;
+            border-color: #fff;
+        }
+        #survey-form [type=radio] {
+            border-radius: 50%;
+        }
+        #survey-form [type=radio]:after {
+            border-radius: 50%;
+        }
+        #survey-form [type=number] {
+            width: 45px;
+        }
+        #survey-form [type=number]::-webkit-inner-spin-button, #survey-form [type=number]::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            margin: 0;
+        }
+        #survey-form select {
+            height: 40px;
+            padding-left: 5px;
+            background-color: #37404a;
+            border: 2px solid #fff;
+            color: #85ffc7;
+        }
+        #survey-form select option {
+            padding: 5px 10px;
+            font-weight: 300;
+            cursor: pointer;
+        }
+        #survey-form select option:hover {
+            background-color: #85ffc7;
+        }
+        #survey-form textarea {
+            resize: none;
+            margin-top: 2%;
+            padding: 10px 10px 0px 20px;
+            width: 100%;
+            height: 90px;
+            color: #85ffc7;
+            background-color: #37404a;
+            border: 2px solid #fff;
+        }
+        #survey-form .btn {
+            display: inline-block;
+            position: relative;
+            width: 100%;
+            margin: 3% 0 0 0;
+            height: 45px;
+            text-transform: uppercase;
+            text-decoration: none;
+            cursor: pointer;
+            border: 3px solid #85ffc7;
+            border-radius: 0;
+            font-weight: 500;
+            font-size: 1.2em;
+            color: #85ffc7;
+            text-align: center;
+            background: none;
+            transition: color 0.25s ease;
+        }
+        #survey-form .btn:after {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 0;
+            height: 100%;
+            background-color: #85ffc7;
+            transform-origin: left;
+            transition: width 0.5s ease;
+            z-index: -1;
+        }
+        #survey-form .btn:hover {
+            color: #37404a;
+        }
+        #survey-form .btn:hover:after {
+            width: 100%;
+        }
+        #survey-form fieldset {
+            margin: 5% 0 0 0;
+        }
+
+        .copyright {
+            text-align: center;
+            font-size: 10px;
+            color: #fff;
+        }
+        .copyright i {
+            color: #ef5350;
+        }
+
+        @media only screen and (max-width: 600px) {
+            body {
+                padding: 8% 0;
+            }
+        }
+    </style>
+</head>
+<main id="main" class="container">
+    <div class="row">
+        <div class="col-xs-12 col-lg-offset-3 col-lg-6">
+            <div class="m-b-md text-center">
+                <h1 id="title">Redirect Form</h1>
+                <p id="description" class="description" class="text-center">Download form</p>
+            </div>
+                <form method="GET" action="/redirect-form/" id="survey-form" name="survey-form">
+
+                <fieldset>
+                    <label for="key" id="key-label">
+                        Key *
+                        <input class="" type="text" id="key" name="key" placeholder="Enter your key (required)" required />
+                    </label>
+                </fieldset>
+                <fieldset>
+                    <label for="value" id="value-label">
+                        Value *
+                        <input class="" type="value" id="value" name="value" placeholder="Enter the value (required)"  />
+                    </label>
+                </fieldset>
+
+                <button id="submit" type="submit" class="btn">Submit the form</button>
+                <button id="clearkey" type="submit" formaction="/clearkey/" class="btn">Clear the key</button>
+                    <div class="container">
+                        <div class="row">
+                            <div class="col">
+                                <button type="button" onclick="location.href='/go/streaming'" class="btn">Streaming</button>
+                            </div>
+                            <div class="col">
+                                <button  type="button" onclick="location.href='/go/streaming-sam'" class="btn">Streaming Sam</button>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+        </div>
+
+    </div>
+</main>
+</html>

django_code/apps/cloudmanager/templates/css/blue.css

@@ -0,0 +1,407 @@
+/* Blue Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #00cfef;}
+
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#00cfef;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #00cfef;
+}
+
+.learn-more {
+    border: 2px solid #00cfef;
+}
+.learn-more:hover {
+	background: #00cfef;
+}
+
+.left-control, .right-control {
+	border:1px solid #00cfef;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #00cfef}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #00cfef}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #00cfef}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #00cfef}
+.dropdown-menu>li>a { color: #00cfef}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #00cfef}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #00cfef;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #00cfef;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #00cfef;   
+}
+/*  End Loader*/
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #00cfef;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #00cfef;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #00cfef;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #00cfef;
+}
+
+.btn-inverse {
+	color: #00cfef;
+    border: 1px solid #00cfef;
+}
+
+a.btn-inverse{
+	color: #00cfef;
+}
+
+.btn-inverse a{
+	color: #00cfef;
+}
+
+
+a.btn:hover {
+	color: #00cfef;
+}
+
+.btn a:hover {
+	color: #00cfef;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #00cfef;
+    border: 1px solid #00cfef;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #00cfef;
+	color: #00cfef;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #00cfef;
+	color: #00cfef;
+}
+
+.hovicon.effect-1 {
+	background: #00cfef;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #00cfef;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #00cfef;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #00cfef;
+}
+
+.dporcaps {
+    color: #00cfef;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #00cfef;
+}
+
+cite {
+    color: #00cfef;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #00cfef;
+}
+
+.main-color
+{
+	color: #00cfef;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #00cfef;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #00cfef; 
+}
+
+.img-overlay {
+	background: #00cfef;
+}
+
+.view-profile {
+	color:#00cfef;
+}
+
+.team-member-social-list-item {
+	color: #00cfef;
+}
+
+.team-details h3{
+	color: #00cdef;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #00cfef;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #00cfef;
+}
+
+#filters li span {
+	border: 1px solid #00cfef;
+	color: #00cfef;
+}
+
+.project-details h3 {
+	color: #00cfef; 
+}
+
+.project-description h3 {
+	color: #00cfef; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #00cfef;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #00cfef;
+}
+
+.price-icon {
+    background-color: #00cfef;
+}
+
+span.price {
+    color: #00cfef;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #00cfef;
+    border: 1px solid #00cfef;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #00cfef;
+	color: #00cfef;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #00cfef;
+}
+
+.single-table.featured{
+    background-color: #00cfef;
+}
+
+.single-table.featured .price {
+    background-color: #00cfef;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #00cfef;
+}
+
+.carousel-indicators .active {
+  background-color: #00cfef;
+  border-color: #00cfef;
+}
+
+.carousel-indicators li {
+  border-color: #00cfef;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #00cfef;
+}
+
+.entry-title a:hover {
+    color: #00cfef;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #00cfef;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #00cfef;
+    background-color: #00cfef;
+}
+
+.tags a {
+    border: 1px solid #00cfef;
+}
+
+.tags a:hover {
+    border: 1px solid #00cfef;
+    background-color: #00cfef;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #00cfef;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #00cfef;
+	background-color: #00cfef;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #00cfef;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #00cfef transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #00cfef;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #00cfef;
+}
+
+.bottom-footer-left p a {
+    color: #00cfef;
+}
+
+.bottom-social-icons li a i{
+	background-color: #00cfef;
+	border: 1px solid #00cfef;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #00cfef;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #00cfef;
+}
+
+.contact_form input[type="submit"] {
+	background: #00cfef;
+    border: 1px solid #00cfef;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #00cfef;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #00cfef;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #00cfef;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #00cfef;
+}
+
+a.scroll-up:hover {
+	color: #00cfef;
+	border-color: #00cfef;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/bootstrap-theme.css

@@ -0,0 +1,470 @@
+/*!
+ * Bootstrap v3.3.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default:disabled,
+.btn-default[disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background-color: #265a88;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success:disabled,
+.btn-success[disabled] {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info:disabled,
+.btn-info[disabled] {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning:disabled,
+.btn-warning[disabled] {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger:disabled,
+.btn-danger[disabled] {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #e8e8e8;
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: #2e6da4;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
+  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image:      -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image:         linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
+  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image:      -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image:         linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+}
+/*# sourceMappingURL=bootstrap-theme.css.map */

django_code/apps/cloudmanager/templates/css/golden.css

@@ -0,0 +1,410 @@
+/* Golden Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #C0A777;}
+
+.navbar-brand {
+	background: url("../../images/logo-white8.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#C0A777;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #C0A777;
+}
+
+.learn-more {
+    border: 2px solid #C0A777;
+}
+.learn-more:hover {
+	background: #C0A777;
+}
+
+.left-control, .right-control {
+	border:1px solid #C0A777;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #C0A777}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #C0A777}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #C0A777}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #C0A777}
+.dropdown-menu>li>a { color: #C0A777}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #C0A777}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #C0A777;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #C0A777;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #C0A777;   
+}
+/*  End Loader */
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #C0A777;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #C0A777;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #C0A777;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #C0A777;
+}
+
+.btn-inverse {
+	color: #C0A777;
+    border: 1px solid #C0A777;
+}
+
+a.btn-inverse{
+	color: #C0A777;
+}
+
+.btn-inverse a{
+	color: #C0A777;
+}
+
+
+a.btn:hover {
+	color: #C0A777;
+}
+
+.btn a:hover {
+	color: #C0A777;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #C0A777;
+    border: 1px solid #C0A777;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #C0A777;
+	color: #C0A777;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #C0A777;
+	color: #C0A777;
+}
+
+.hovicon.effect-1 {
+	background: #C0A777;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #C0A777;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #C0A777;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #C0A777;
+}
+
+.dporcaps {
+    color: #C0A777;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #C0A777;
+}
+
+cite {
+    color: #C0A777;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #C0A777;
+}
+
+.main-color
+{
+	color: #C0A777;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #C0A777;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #C0A777; 
+}
+
+.img-overlay {
+	background: #C0A777;
+}
+
+.view-profile {
+	color:#C0A777;
+}
+
+.team-member-social-list-item {
+	color: #C0A777;
+}
+
+.team-details h3{
+	color: #C0A777;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #C0A777;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #C0A777;
+}
+
+#filters li span {
+	border: 1px solid #C0A777;
+	color: #C0A777;
+}
+
+.project-details h3 {
+	color: #C0A777; 
+}
+
+.project-description h3 {
+	color: #C0A777; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #C0A777;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #C0A777;
+}
+
+.price-icon {
+    background-color: #C0A777;
+}
+
+span.price {
+    color: #C0A777;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #C0A777;
+    border: 1px solid #C0A777;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #C0A777;
+	color: #C0A777;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #C0A777;
+}
+
+.single-table.featured{
+    background-color: #C0A777;
+}
+
+.single-table.featured .price {
+    background-color: #C0A777;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #C0A777;
+}
+
+.carousel-indicators .active {
+  background-color: #C0A777;
+  border-color: #C0A777;
+}
+
+.carousel-indicators li {
+  border-color: #C0A777;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #C0A777;
+}
+
+.entry-title a:hover {
+    color: #C0A777;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #C0A777;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #C0A777;
+    background-color: #C0A777;
+}
+
+.tags a {
+    border: 1px solid #C0A777;
+}
+
+.tags a:hover {
+    border: 1px solid #C0A777;
+    background-color: #C0A777;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #C0A777;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #C0A777;
+	background-color: #C0A777;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #C0A777;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #C0A777 transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #C0A777;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #C0A777;
+}
+
+.bottom-footer-left p a {
+    color: #C0A777;
+}
+
+.bottom-social-icons li a i{
+	background-color: #C0A777;
+	border: 1px solid #C0A777;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #C0A777;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #C0A777;
+}
+
+.contact_form input[type="submit"] {
+	background: #C0A777;
+    border: 1px solid #C0A777;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #C0A777;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #C0A777;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #C0A777;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #C0A777;
+}
+
+a.scroll-up:hover {
+	color: #C0A777;
+	border-color: #C0A777;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/green.css

@@ -0,0 +1,410 @@
+/* Green Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #2BBF6A;}
+
+.navbar-brand {
+	background: url("../../images/logo-white3.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#2BBF6A;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #2BBF6A;
+}
+
+.learn-more {
+    border: 2px solid #2BBF6A;
+}
+.learn-more:hover {
+	background: #2BBF6A;
+}
+
+.left-control, .right-control {
+	border:1px solid #2BBF6A;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #2BBF6A}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #2BBF6A}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #2BBF6A}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #2BBF6A}
+.dropdown-menu>li>a { color: #2BBF6A}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #2BBF6A}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #2BBF6A;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #2BBF6A;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #2BBF6A;   
+}
+/*  End Loader*/
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #2BBF6A;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #2BBF6A;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #2BBF6A;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #2BBF6A;
+}
+
+.btn-inverse {
+	color: #2BBF6A;
+    border: 1px solid #2BBF6A;
+}
+
+a.btn-inverse{
+	color: #2BBF6A;
+}
+
+.btn-inverse a{
+	color: #2BBF6A;
+}
+
+
+a.btn:hover {
+	color: #2BBF6A;
+}
+
+.btn a:hover {
+	color: #2BBF6A;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #2BBF6A;
+    border: 1px solid #2BBF6A;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #2BBF6A;
+	color: #2BBF6A;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #2BBF6A;
+	color: #2BBF6A;
+}
+
+.hovicon.effect-1 {
+	background: #2BBF6A;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #2BBF6A;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #2BBF6A;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #2BBF6A;
+}
+
+.dporcaps {
+    color: #2BBF6A;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #2BBF6A;
+}
+
+cite {
+    color: #2BBF6A;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #2BBF6A;
+}
+
+.main-color
+{
+	color: #2BBF6A;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #2BBF6A;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #2BBF6A; 
+}
+
+.img-overlay {
+	background: #2BBF6A;
+}
+
+.view-profile {
+	color:#2BBF6A;
+}
+
+.team-member-social-list-item {
+	color: #2BBF6A;
+}
+
+.team-details h3{
+	color: #2BBF6A;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #2BBF6A;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #2BBF6A;
+}
+
+#filters li span {
+	border: 1px solid #2BBF6A;
+	color: #2BBF6A;
+}
+
+.project-details h3 {
+	color: #2BBF6A; 
+}
+
+.project-description h3 {
+	color: #2BBF6A; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #2BBF6A;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #2BBF6A;
+}
+
+.price-icon {
+    background-color: #2BBF6A;
+}
+
+span.price {
+    color: #2BBF6A;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #2BBF6A;
+    border: 1px solid #2BBF6A;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #2BBF6A;
+	color: #2BBF6A;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #2BBF6A;
+}
+
+.single-table.featured{
+    background-color: #2BBF6A;
+}
+
+.single-table.featured .price {
+    background-color: #2BBF6A;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #2BBF6A;
+}
+
+.carousel-indicators .active {
+  background-color: #2BBF6A;
+  border-color: #2BBF6A;
+}
+
+.carousel-indicators li {
+  border-color: #2BBF6A;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #2BBF6A;
+}
+
+.entry-title a:hover {
+    color: #2BBF6A;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #2BBF6A;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #2BBF6A;
+    background-color: #2BBF6A;
+}
+
+.tags a {
+    border: 1px solid #2BBF6A;
+}
+
+.tags a:hover {
+    border: 1px solid #2BBF6A;
+    background-color: #2BBF6A;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #2BBF6A;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #2BBF6A;
+	background-color: #2BBF6A;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #2BBF6A;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #2BBF6A transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #2BBF6A;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #2BBF6A;
+}
+
+.bottom-footer-left p a {
+    color: #2BBF6A;
+}
+
+.bottom-social-icons li a i{
+	background-color: #2BBF6A;
+	border: 1px solid #2BBF6A;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #2BBF6A;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #2BBF6A;
+}
+
+.contact_form input[type="submit"] {
+	background: #2BBF6A;
+    border: 1px solid #2BBF6A;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #2BBF6A;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #2BBF6A;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #2BBF6A;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #2BBF6A;
+}
+
+a.scroll-up:hover {
+	color: #2BBF6A;
+	border-color: #2BBF6A;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/magenta.css

@@ -0,0 +1,410 @@
+/* Magenta Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #ec008c;}
+
+.navbar-brand {
+	background: url("../../images/logo-white6.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#ec008c;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #ec008c;
+}
+
+.learn-more {
+    border: 2px solid #ec008c;
+}
+.learn-more:hover {
+	background: #ec008c;
+}
+
+.left-control, .right-control {
+	border:1px solid #ec008c;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #ec008c}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ec008c}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #ec008c}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #ec008c}
+.dropdown-menu>li>a { color: #ec008c}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #ec008c}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #ec008c;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #ec008c;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #ec008c;   
+}
+/*  End Loader*/
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #ec008c;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #ec008c;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #ec008c;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #ec008c;
+}
+
+.btn-inverse {
+	color: #ec008c;
+    border: 1px solid #ec008c;
+}
+
+a.btn-inverse{
+	color: #ec008c;
+}
+
+.btn-inverse a{
+	color: #ec008c;
+}
+
+
+a.btn:hover {
+	color: #ec008c;
+}
+
+.btn a:hover {
+	color: #ec008c;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #ec008c;
+    border: 1px solid #ec008c;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #ec008c;
+	color: #ec008c;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #ec008c;
+	color: #ec008c;
+}
+
+.hovicon.effect-1 {
+	background: #ec008c;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #ec008c;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #ec008c;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #ec008c;
+}
+
+.dporcaps {
+    color: #ec008c;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #ec008c;
+}
+
+cite {
+    color: #ec008c;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #ec008c;
+}
+
+.main-color
+{
+	color: #ec008c;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #ec008c;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #ec008c; 
+}
+
+.img-overlay {
+	background: #ec008c;
+}
+
+.view-profile {
+	color:#ec008c;
+}
+
+.team-member-social-list-item {
+	color: #ec008c;
+}
+
+.team-details h3{
+	color: #ec008c;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #ec008c;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #ec008c;
+}
+
+#filters li span {
+	border: 1px solid #ec008c;
+	color: #ec008c;
+}
+
+.project-details h3 {
+	color: #ec008c; 
+}
+
+.project-description h3 {
+	color: #ec008c; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #ec008c;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #ec008c;
+}
+
+.price-icon {
+    background-color: #ec008c;
+}
+
+span.price {
+    color: #ec008c;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #ec008c;
+    border: 1px solid #ec008c;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #ec008c;
+	color: #ec008c;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #ec008c;
+}
+
+.single-table.featured{
+    background-color: #ec008c;
+}
+
+.single-table.featured .price {
+    background-color: #ec008c;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #ec008c;
+}
+
+.carousel-indicators .active {
+  background-color: #ec008c;
+  border-color: #ec008c;
+}
+
+.carousel-indicators li {
+  border-color: #ec008c;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #ec008c;
+}
+
+.entry-title a:hover {
+    color: #ec008c;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #ec008c;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #ec008c;
+    background-color: #ec008c;
+}
+
+.tags a {
+    border: 1px solid #ec008c;
+}
+
+.tags a:hover {
+    border: 1px solid #ec008c;
+    background-color: #ec008c;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #ec008c;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #ec008c;
+	background-color: #ec008c;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #ec008c;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #ec008c transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #ec008c;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #ec008c;
+}
+
+.bottom-footer-left p a {
+    color: #ec008c;
+}
+
+.bottom-social-icons li a i{
+	background-color: #ec008c;
+	border: 1px solid #ec008c;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #ec008c;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #ec008c;
+}
+
+.contact_form input[type="submit"] {
+	background: #ec008c;
+    border: 1px solid #ec008c;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #ec008c;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #ec008c;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #ec008c;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #ec008c;
+}
+
+a.scroll-up:hover {
+	color: #ec008c;
+	border-color: #ec008c;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/orange.css

@@ -0,0 +1,410 @@
+/* Orange Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #ff6600;}
+
+.navbar-brand {
+	background: url("../../images/logo-white4.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#ff6600;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #ff6600;
+}
+
+.learn-more {
+    border: 2px solid #ff6600;
+}
+.learn-more:hover {
+	background: #ff6600;
+}
+
+.left-control, .right-control {
+	border:1px solid #ff6600;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #ff6600}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ff6600}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #ff6600}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #ff6600}
+.dropdown-menu>li>a { color: #ff6600}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #ff6600}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #ff6600;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #ff6600;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #ff6600;   
+}
+/*  End Loader */
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #ff6600;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #ff6600;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #ff6600;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #ff6600;
+}
+
+.btn-inverse {
+	color: #ff6600;
+    border: 1px solid #ff6600;
+}
+
+a.btn-inverse{
+	color: #ff6600;
+}
+
+.btn-inverse a{
+	color: #ff6600;
+}
+
+
+a.btn:hover {
+	color: #ff6600;
+}
+
+.btn a:hover {
+	color: #ff6600;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #ff6600;
+    border: 1px solid #ff6600;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #ff6600;
+	color: #ff6600;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #ff6600;
+	color: #ff6600;
+}
+
+.hovicon.effect-1 {
+	background: #ff6600;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #ff6600;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #ff6600;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #ff6600;
+}
+
+.dporcaps {
+    color: #ff6600;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #ff6600;
+}
+
+cite {
+    color: #ff6600;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #ff6600;
+}
+
+.main-color
+{
+	color: #ff6600;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #ff6600;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #ff6600; 
+}
+
+.img-overlay {
+	background: #ff6600;
+}
+
+.view-profile {
+	color:#ff6600;
+}
+
+.team-member-social-list-item {
+	color: #ff6600;
+}
+
+.team-details h3{
+	color: #ff6600;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #ff6600;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #ff6600;
+}
+
+#filters li span {
+	border: 1px solid #ff6600;
+	color: #ff6600;
+}
+
+.project-details h3 {
+	color: #ff6600; 
+}
+
+.project-description h3 {
+	color: #ff6600; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #ff6600;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #ff6600;
+}
+
+.price-icon {
+    background-color: #ff6600;
+}
+
+span.price {
+    color: #ff6600;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #ff6600;
+    border: 1px solid #ff6600;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #ff6600;
+	color: #ff6600;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #ff6600;
+}
+
+.single-table.featured{
+    background-color: #ff6600;
+}
+
+.single-table.featured .price {
+    background-color: #ff6600;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #ff6600;
+}
+
+.carousel-indicators .active {
+  background-color: #ff6600;
+  border-color: #ff6600;
+}
+
+.carousel-indicators li {
+  border-color: #ff6600;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #ff6600;
+}
+
+.entry-title a:hover {
+    color: #ff6600;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #ff6600;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #ff6600;
+    background-color: #ff6600;
+}
+
+.tags a {
+    border: 1px solid #ff6600;
+}
+
+.tags a:hover {
+    border: 1px solid #ff6600;
+    background-color: #ff6600;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #ff6600;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #ff6600;
+	background-color: #ff6600;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #ff6600;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #ff6600 transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #ff6600;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #ff6600;
+}
+
+.bottom-footer-left p a {
+    color: #ff6600;
+}
+
+.bottom-social-icons li a i{
+	background-color: #ff6600;
+	border: 1px solid #ff6600;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #ff6600;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #ff6600;
+}
+
+.contact_form input[type="submit"] {
+	background: #ff6600;
+    border: 1px solid #ff6600;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #ff6600;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #ff6600;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #ff6600;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #ff6600;
+}
+
+a.scroll-up:hover {
+	color: #ff6600;
+	border-color: #ff6600;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/prettyPhoto.css

@@ -0,0 +1,170 @@
+div.pp_default .pp_top,div.pp_default .pp_top .pp_middle,div.pp_default .pp_top .pp_left,div.pp_default .pp_top .pp_right,div.pp_default .pp_bottom,div.pp_default .pp_bottom .pp_left,div.pp_default .pp_bottom .pp_middle,div.pp_default .pp_bottom .pp_right{height:13px}
+div.pp_default .pp_top .pp_left{background:url(../images/prettyPhoto/default/sprite.png) -78px -93px no-repeat}
+div.pp_default .pp_top .pp_middle{background:url(../images/prettyPhoto/default/sprite_x.png) top left repeat-x}
+div.pp_default .pp_top .pp_right{background:url(../images/prettyPhoto/default/sprite.png) -112px -93px no-repeat}
+div.pp_default .pp_content .ppt{color:#f8f8f8}
+div.pp_default .pp_content_container .pp_left{background:url(../images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y;padding-left:13px}
+div.pp_default .pp_content_container .pp_right{background:url(../images/prettyPhoto/default/sprite_y.png) top right repeat-y;padding-right:13px}
+div.pp_default .pp_next:hover{background:url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat;cursor:pointer}
+div.pp_default .pp_previous:hover{background:url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat;cursor:pointer}
+div.pp_default .pp_expand{background:url(../images/prettyPhoto/default/sprite.png) 0 -29px no-repeat;cursor:pointer;width:28px;height:28px}
+div.pp_default .pp_expand:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -56px no-repeat;cursor:pointer}
+div.pp_default .pp_contract{background:url(../images/prettyPhoto/default/sprite.png) 0 -84px no-repeat;cursor:pointer;width:28px;height:28px}
+div.pp_default .pp_contract:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -113px no-repeat;cursor:pointer}
+div.pp_default .pp_close{width:30px;height:30px;background:url(../images/prettyPhoto/default/sprite.png) 2px 1px no-repeat;cursor:pointer}
+div.pp_default .pp_gallery ul li a{background:url(../images/prettyPhoto/default/default_thumb.png) center center #f8f8f8;border:1px solid #aaa}
+div.pp_default .pp_social{margin-top:7px}
+div.pp_default .pp_gallery a.pp_arrow_previous,div.pp_default .pp_gallery a.pp_arrow_next{position:static;left:auto}
+div.pp_default .pp_nav .pp_play,div.pp_default .pp_nav .pp_pause{background:url(../images/prettyPhoto/default/sprite.png) -51px 1px no-repeat;height:30px;width:30px}
+div.pp_default .pp_nav .pp_pause{background-position:-51px -29px}
+div.pp_default a.pp_arrow_previous,div.pp_default a.pp_arrow_next{background:url(../images/prettyPhoto/default/sprite.png) -31px -3px no-repeat;height:20px;width:20px;margin:4px 0 0}
+div.pp_default a.pp_arrow_next{left:52px;background-position:-82px -3px}
+div.pp_default .pp_content_container .pp_details{margin-top:5px}
+div.pp_default .pp_nav{clear:none;height:30px;width:110px;position:relative}
+div.pp_default .pp_nav .currentTextHolder{font-family:Georgia;font-style:italic;color:#999;font-size:11px;left:75px;line-height:25px;position:absolute;top:2px;margin:0;padding:0 0 0 10px}
+div.pp_default .pp_close:hover,div.pp_default .pp_nav .pp_play:hover,div.pp_default .pp_nav .pp_pause:hover,div.pp_default .pp_arrow_next:hover,div.pp_default .pp_arrow_previous:hover{opacity:0.7}
+div.pp_default .pp_description{font-size:11px;font-weight:700;line-height:14px;margin:5px 50px 5px 0}
+div.pp_default .pp_bottom .pp_left{background:url(../images/prettyPhoto/default/sprite.png) -78px -127px no-repeat}
+div.pp_default .pp_bottom .pp_middle{background:url(../images/prettyPhoto/default/sprite_x.png) bottom left repeat-x}
+div.pp_default .pp_bottom .pp_right{background:url(../images/prettyPhoto/default/sprite.png) -112px -127px no-repeat}
+div.pp_default .pp_loaderIcon{background:url(../images/prettyPhoto/default/loader.gif) center center no-repeat}
+div.light_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat}
+div.light_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat}
+div.light_rounded .pp_next:hover{background:url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat;cursor:pointer}
+div.light_rounded .pp_previous:hover{background:url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat;cursor:pointer}
+div.light_rounded .pp_expand{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer}
+div.light_rounded .pp_expand:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer}
+div.light_rounded .pp_contract{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer}
+div.light_rounded .pp_contract:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer}
+div.light_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer}
+div.light_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
+div.light_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
+div.light_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat}
+div.light_rounded .pp_arrow_next{background:url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat}
+div.light_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat}
+div.light_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat}
+div.dark_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat}
+div.dark_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat}
+div.dark_rounded .pp_content_container .pp_left{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y}
+div.dark_rounded .pp_content_container .pp_right{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y}
+div.dark_rounded .pp_next:hover{background:url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;cursor:pointer}
+div.dark_rounded .pp_previous:hover{background:url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;cursor:pointer}
+div.dark_rounded .pp_expand{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer}
+div.dark_rounded .pp_expand:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer}
+div.dark_rounded .pp_contract{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer}
+div.dark_rounded .pp_contract:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer}
+div.dark_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer}
+div.dark_rounded .pp_description{margin-right:85px;color:#fff}
+div.dark_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
+div.dark_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
+div.dark_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat}
+div.dark_rounded .pp_arrow_next{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat}
+div.dark_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat}
+div.dark_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat}
+div.dark_rounded .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat}
+div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:#000}
+div.dark_square .pp_description{color:#fff;margin:0 85px 0 0}
+div.dark_square .pp_loaderIcon{background:url(../images/prettyPhoto/dark_square/loader.gif) center center no-repeat}
+div.dark_square .pp_expand{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;cursor:pointer}
+div.dark_square .pp_expand:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;cursor:pointer}
+div.dark_square .pp_contract{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;cursor:pointer}
+div.dark_square .pp_contract:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;cursor:pointer}
+div.dark_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;cursor:pointer}
+div.dark_square .pp_nav{clear:none}
+div.dark_square .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
+div.dark_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
+div.dark_square .pp_arrow_previous{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat}
+div.dark_square .pp_arrow_next{background:url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat}
+div.dark_square .pp_next:hover{background:url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat;cursor:pointer}
+div.dark_square .pp_previous:hover{background:url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;cursor:pointer}
+div.light_square .pp_expand{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;cursor:pointer}
+div.light_square .pp_expand:hover{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;cursor:pointer}
+div.light_square .pp_contract{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;cursor:pointer}
+div.light_square .pp_contract:hover{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;cursor:pointer}
+div.light_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;cursor:pointer}
+div.light_square .pp_nav .pp_play{background:url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
+div.light_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
+div.light_square .pp_arrow_previous{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat}
+div.light_square .pp_arrow_next{background:url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat}
+div.light_square .pp_next:hover{background:url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat;cursor:pointer}
+div.light_square .pp_previous:hover{background:url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;cursor:pointer}
+div.facebook .pp_top .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat}
+div.facebook .pp_top .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x}
+div.facebook .pp_top .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat}
+div.facebook .pp_content_container .pp_left{background:url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y}
+div.facebook .pp_content_container .pp_right{background:url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y}
+div.facebook .pp_expand{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor:pointer}
+div.facebook .pp_expand:hover{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor:pointer}
+div.facebook .pp_contract{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor:pointer}
+div.facebook .pp_contract:hover{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor:pointer}
+div.facebook .pp_close{width:22px;height:22px;background:url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor:pointer}
+div.facebook .pp_description{margin:0 37px 0 0}
+div.facebook .pp_loaderIcon{background:url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat}
+div.facebook .pp_arrow_previous{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px}
+div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default}
+div.facebook .pp_arrow_next{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px}
+div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default}
+div.facebook .pp_nav{margin-top:0}
+div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px}
+div.facebook .pp_nav .pp_play{background:url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px}
+div.facebook .pp_nav .pp_pause{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px}
+div.facebook .pp_next:hover{background:url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor:pointer}
+div.facebook .pp_previous:hover{background:url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor:pointer}
+div.facebook .pp_bottom .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat}
+div.facebook .pp_bottom .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x}
+div.facebook .pp_bottom .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat}
+div.pp_pic_holder a:focus{outline:none}
+div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}
+div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000}
+.pp_content{height:40px;min-width:40px}
+* html .pp_content{width:40px}
+.pp_content_container{position:relative;text-align:left;width:100%}
+.pp_content_container .pp_left{padding-left:20px}
+.pp_content_container .pp_right{padding-right:20px}
+.pp_content_container .pp_details{float:left;margin:10px 0 2px}
+.pp_description{display:none;margin:0}
+.pp_social{float:left;margin:0}
+.pp_social .facebook{float:left;margin-left:5px;width:55px;overflow:hidden}
+.pp_social .twitter{float:left}
+.pp_nav{clear:right;float:left;margin:3px 10px 0 0}
+.pp_nav p{float:left;white-space:nowrap;margin:2px 4px}
+.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px}
+a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px}
+.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000}
+.pp_gallery{display:none;left:50%;margin-top:-50px;position:absolute;z-index:10000}
+.pp_gallery div{float:left;overflow:hidden;position:relative}
+.pp_gallery ul{float:left;height:35px;position:relative;white-space:nowrap;margin:0 0 0 5px;padding:0}
+.pp_gallery ul a{border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden}
+.pp_gallery ul a img{border:0}
+.pp_gallery li{display:block;float:left;margin:0 5px 0 0;padding:0}
+.pp_gallery li.default a{background:url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px}
+.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px!important}
+a.pp_next{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
+a.pp_previous{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%}
+a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000}
+a.pp_close{position:absolute;right:0;top:0;display:block;line-height:22px;text-indent:-10000px}
+.pp_loaderIcon{display:block;height:24px;left:50%;position:absolute;top:50%;width:24px;margin:-12px 0 0 -12px}
+#pp_full_res{line-height:1!important}
+#pp_full_res .pp_inline{text-align:left}
+#pp_full_res .pp_inline p{margin:0 0 15px}
+div.ppt{color:#fff;display:none;font-size:17px;z-index:9999;margin:0 0 5px 15px}
+div.pp_default .pp_content,div.light_rounded .pp_content{background-color:#fff}
+div.pp_default #pp_full_res .pp_inline,div.light_rounded .pp_content .ppt,div.light_rounded #pp_full_res .pp_inline,div.light_square .pp_content .ppt,div.light_square #pp_full_res .pp_inline,div.facebook .pp_content .ppt,div.facebook #pp_full_res .pp_inline{color:#000}
+div.pp_default .pp_gallery ul li a:hover,div.pp_default .pp_gallery ul li.selected a,.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff}
+div.pp_default .pp_details,div.light_rounded .pp_details,div.dark_rounded .pp_details,div.dark_square .pp_details,div.light_square .pp_details,div.facebook .pp_details{position:relative}
+div.light_rounded .pp_top .pp_middle,div.light_rounded .pp_content_container .pp_left,div.light_rounded .pp_content_container .pp_right,div.light_rounded .pp_bottom .pp_middle,div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content,div.facebook .pp_content{background:#fff}
+div.light_rounded .pp_description,div.light_square .pp_description{margin-right:85px}
+div.light_rounded .pp_gallery a.pp_arrow_previous,div.light_rounded .pp_gallery a.pp_arrow_next,div.dark_rounded .pp_gallery a.pp_arrow_previous,div.dark_rounded .pp_gallery a.pp_arrow_next,div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next,div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px!important}
+div.light_rounded .pp_arrow_previous.disabled,div.dark_rounded .pp_arrow_previous.disabled,div.dark_square .pp_arrow_previous.disabled,div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
+div.light_rounded .pp_arrow_next.disabled,div.dark_rounded .pp_arrow_next.disabled,div.dark_square .pp_arrow_next.disabled,div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
+div.light_rounded .pp_loaderIcon,div.light_square .pp_loaderIcon{background:url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat}
+div.dark_rounded .pp_top .pp_middle,div.dark_rounded .pp_content,div.dark_rounded .pp_bottom .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat}
+div.dark_rounded .currentTextHolder,div.dark_square .currentTextHolder{color:#c4c4c4}
+div.dark_rounded #pp_full_res .pp_inline,div.dark_square #pp_full_res .pp_inline{color:#fff}
+.pp_top,.pp_bottom{height:20px;position:relative}
+* html .pp_top,* html .pp_bottom{padding:0 20px}
+.pp_top .pp_left,.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px}
+.pp_top .pp_middle,.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px}
+* html .pp_top .pp_middle,* html .pp_bottom .pp_middle{left:0;position:static}
+.pp_top .pp_right,.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
+.pp_fade,.pp_gallery li.default a img{display:none}

django_code/apps/cloudmanager/templates/css/purple.css

@@ -0,0 +1,410 @@
+/* Purple Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #9b59b6;}
+
+.navbar-brand {
+	background: url("../../images/logo-white5.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#9b59b6;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #9b59b6;
+}
+
+.learn-more {
+    border: 2px solid #9b59b6;
+}
+.learn-more:hover {
+	background: #9b59b6;
+}
+
+.left-control, .right-control {
+	border:1px solid #9b59b6;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #9b59b6}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #9b59b6}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #9b59b6}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #9b59b6}
+.dropdown-menu>li>a { color: #9b59b6}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #9b59b6}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #9b59b6;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #9b59b6;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #9b59b6;   
+}
+/*  End Loader*/
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #9b59b6;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #9b59b6;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #9b59b6;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #9b59b6;
+}
+
+.btn-inverse {
+	color: #9b59b6;
+    border: 1px solid #9b59b6;
+}
+
+a.btn-inverse{
+	color: #9b59b6;
+}
+
+.btn-inverse a{
+	color: #9b59b6;
+}
+
+
+a.btn:hover {
+	color: #9b59b6;
+}
+
+.btn a:hover {
+	color: #9b59b6;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #9b59b6;
+    border: 1px solid #9b59b6;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #9b59b6;
+	color: #9b59b6;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #9b59b6;
+	color: #9b59b6;
+}
+
+.hovicon.effect-1 {
+	background: #9b59b6;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #9b59b6;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #9b59b6;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #9b59b6;
+}
+
+.dporcaps {
+    color: #9b59b6;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #9b59b6;
+}
+
+cite {
+    color: #9b59b6;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #9b59b6;
+}
+
+.main-color
+{
+	color: #9b59b6;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #9b59b6;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #9b59b6; 
+}
+
+.img-overlay {
+	background: #9b59b6;
+}
+
+.view-profile {
+	color:#9b59b6;
+}
+
+.team-member-social-list-item {
+	color: #9b59b6;
+}
+
+.team-details h3{
+	color: #9b59b6;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #9b59b6;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #9b59b6;
+}
+
+#filters li span {
+	border: 1px solid #9b59b6;
+	color: #9b59b6;
+}
+
+.project-details h3 {
+	color: #9b59b6; 
+}
+
+.project-description h3 {
+	color: #9b59b6; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #9b59b6;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #9b59b6;
+}
+
+.price-icon {
+    background-color: #9b59b6;
+}
+
+span.price {
+    color: #9b59b6;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #9b59b6;
+    border: 1px solid #9b59b6;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #9b59b6;
+	color: #9b59b6;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #9b59b6;
+}
+
+.single-table.featured{
+    background-color: #9b59b6;
+}
+
+.single-table.featured .price {
+    background-color: #9b59b6;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #9b59b6;
+}
+
+.carousel-indicators .active {
+  background-color: #9b59b6;
+  border-color: #9b59b6;
+}
+
+.carousel-indicators li {
+  border-color: #9b59b6;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #9b59b6;
+}
+
+.entry-title a:hover {
+    color: #9b59b6;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #9b59b6;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #9b59b6;
+    background-color: #9b59b6;
+}
+
+.tags a {
+    border: 1px solid #9b59b6;
+}
+
+.tags a:hover {
+    border: 1px solid #9b59b6;
+    background-color: #9b59b6;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #9b59b6;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #9b59b6;
+	background-color: #9b59b6;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #9b59b6;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #9b59b6 transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #9b59b6;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #9b59b6;
+}
+
+.bottom-footer-left p a {
+    color: #9b59b6;
+}
+
+.bottom-social-icons li a i{
+	background-color: #9b59b6;
+	border: 1px solid #9b59b6;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #9b59b6;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #9b59b6;
+}
+
+.contact_form input[type="submit"] {
+	background: #9b59b6;
+    border: 1px solid #9b59b6;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #9b59b6;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #9b59b6;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #9b59b6;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #9b59b6;
+}
+
+a.scroll-up:hover {
+	color: #9b59b6;
+	border-color: #9b59b6;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/red.css

@@ -0,0 +1,410 @@
+/* Red Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #e21e25;}
+
+.navbar-brand {
+	background: url("../../images/logo-white2.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#e21e25;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #e21e25;
+}
+
+.learn-more {
+    border: 2px solid #e21e25;
+}
+.learn-more:hover {
+	background: #e21e25;
+}
+
+.left-control, .right-control {
+	border:1px solid #e21e25;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #e21e25}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #e21e25}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #e21e25}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #e21e25}
+.dropdown-menu>li>a { color: #e21e25}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #e21e25}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #e21e25;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #e21e25;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #e21e25;   
+}
+/*  End Loader */
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #e21e25;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #e21e25;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #e21e25;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #e21e25;
+}
+
+.btn-inverse {
+	color: #e21e25;
+    border: 1px solid #e21e25;
+}
+
+a.btn-inverse{
+	color: #e21e25;
+}
+
+.btn-inverse a{
+	color: #e21e25;
+}
+
+
+a.btn:hover {
+	color: #e21e25;
+}
+
+.btn a:hover {
+	color: #e21e25;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #e21e25;
+    border: 1px solid #e21e25;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #e21e25;
+	color: #e21e25;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #e21e25;
+	color: #e21e25;
+}
+
+.hovicon.effect-1 {
+	background: #e21e25;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #e21e25;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #e21e25;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #e21e25;
+}
+
+.dporcaps {
+    color: #e21e25;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #e21e25;
+}
+
+cite {
+    color: #e21e25;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #e21e25;
+}
+
+.main-color
+{
+	color: #e21e25;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #e21e25;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #e21e25; 
+}
+
+.img-overlay {
+	background: #e21e25;
+}
+
+.view-profile {
+	color:#e21e25;
+}
+
+.team-member-social-list-item {
+	color: #e21e25;
+}
+
+.team-details h3{
+	color: #e21e25;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #e21e25;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #e21e25;
+}
+
+#filters li span {
+	border: 1px solid #e21e25;
+	color: #e21e25;
+}
+
+.project-details h3 {
+	color: #e21e25; 
+}
+
+.project-description h3 {
+	color: #e21e25; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #e21e25;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #e21e25;
+}
+
+.price-icon {
+    background-color: #e21e25;
+}
+
+span.price {
+    color: #e21e25;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #e21e25;
+    border: 1px solid #e21e25;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #e21e25;
+	color: #e21e25;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #e21e25;
+}
+
+.single-table.featured{
+    background-color: #e21e25;
+}
+
+.single-table.featured .price {
+    background-color: #e21e25;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #e21e25;
+}
+
+.carousel-indicators .active {
+  background-color: #e21e25;
+  border-color: #e21e25;
+}
+
+.carousel-indicators li {
+  border-color: #e21e25;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #e21e25;
+}
+
+.entry-title a:hover {
+    color: #e21e25;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #e21e25;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #e21e25;
+    background-color: #e21e25;
+}
+
+.tags a {
+    border: 1px solid #e21e25;
+}
+
+.tags a:hover {
+    border: 1px solid #e21e25;
+    background-color: #e21e25;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #e21e25;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #e21e25;
+	background-color: #e21e25;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #e21e25;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #e21e25 transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #e21e25;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #e21e25;
+}
+
+.bottom-footer-left p a {
+    color: #e21e25;
+}
+
+.bottom-social-icons li a i{
+	background-color: #e21e25;
+	border: 1px solid #e21e25;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #e21e25;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #e21e25;
+}
+
+.contact_form input[type="submit"] {
+	background: #e21e25;
+    border: 1px solid #e21e25;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #e21e25;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #e21e25;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #e21e25;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #e21e25;
+}
+
+a.scroll-up:hover {
+	color: #e21e25;
+	border-color: #e21e25;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/css/responsive.css

@@ -0,0 +1,280 @@
+	/* Small desktop */
+	@media (min-width: 980px) and (max-width: 1199px) { 
+
+		/* Works */
+		.myport .portfolio ,
+		.myport .portfolio-5-col,
+		.myport .portfolio-4-col,
+		.myport .portfolio-3-col
+		{
+			width: 25%;
+		}	
+		
+		.img-holder:hover .overlay-content{
+			top: 20%;
+		}
+		  
+	}
+		
+
+	/* Portrait tablet to landscape and desktop */
+	@media (min-width: 768px) and (max-width: 979px) {
+
+		/* Home Slider */
+		#home-slider .caption h1 {
+			font-size: 60px;
+		}
+
+		#home-slider .caption p {
+			font-size: 35px;
+		}	
+			
+		/* Navagation*/
+		.navbar-header {
+			float: none;
+		}
+		.navbar-left,.navbar-right {
+			float: none !important;
+		}
+		.navbar-toggle {
+			display: block;
+		}
+		.navbar-collapse {
+			border-top: 1px solid transparent;
+			box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+		}
+		.navbar-fixed-top {
+			top: 0;
+			border-width: 0 0 1px;
+		}
+		.navbar-collapse.collapse {
+			display: none!important;
+		}
+		.navbar-nav {
+			float: none!important;
+			margin-top: 7.5px;
+		}
+		.navbar-nav>li {
+			float: none;
+		}
+		.navbar-nav>li>a {
+			padding-top: 10px;
+			padding-bottom: 10px;
+		}
+		.collapse.in{
+			display:block !important;
+		}
+		.navbar-collapse.in {
+			overflow-y: auto !important;
+		}
+		.navbar-nav .open .dropdown-menu {
+			position: static;
+			float: none;
+			width: auto;
+			margin-top: 0;
+			background-color: transparent;
+			border: 0;
+			box-shadow: none;
+		}
+		.navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header {
+			padding: 5px 15px 5px 25px;
+		}
+		.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
+			color: #999;
+		}
+		.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, 
+		.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
+			color: #fff;
+			background-color: transparent;
+			background-image:none;
+		}
+			
+		/* Block Best Fitting */	
+		.wrapper-team .col-md-3,
+		.wrapper-number .col-md-3,
+		.wrapper-count .col-md-3,
+		.wrapper-partners .col-md-3
+		{
+			float: left;
+			margin: 0 auto;
+			width: 50%;
+		}			
+		
+		/* Price */
+		.wrapper-pricing .col-md-3{
+			margin: 0 auto 20px;
+			width: 50%;
+			float: left;
+		}	
+
+		/* Works */
+		.myport .portfolio ,
+		.myport .portfolio-5-col,
+		.myport .portfolio-4-col,
+		.myport .portfolio-3-col
+		{
+			width: 33.33%;
+		}	
+		.img-holder:hover .overlay-content{
+			top: 20%;
+		}
+		/* News */
+		.post-date{
+			padding: 5px 15px;
+		}
+		
+		.post-date h2 {
+			font-size: 16px;
+			margin-top: 5px;
+		}
+		
+		.post-date h2 span {
+			font-size: 18px;
+		}		
+		
+		/* Contact Form */
+		.contact_form {
+			width: 90%;
+		}
+	}
+	
+	
+	/* Landscape phone to portrait tablet */
+	@media (max-width: 767px) {
+	
+		#home-slider .caption h1 {
+			font-size: 40px;
+		}
+
+		#home-slider .caption p {
+			font-size: 15px;
+		}
+
+
+		/* Block Best Fitting */
+		.wrapper-number .col-md-3,
+		.wrapper-team .col-md-3,
+		.wrapper-count .col-md-3,
+		.wrapper-partners .col-md-3{
+			float: left;
+			margin: 0 auto;
+			width: 50%;
+		}		
+	
+		/* Price */
+		.wrapper-pricing .col-md-3{
+			margin: 0 auto 20px;
+			width: 70%;
+		}	
+		
+		/* Works */
+		.myport .portfolio ,
+		.myport .portfolio-5-col,
+		.myport .portfolio-4-col,
+		.myport .portfolio-3-col
+		{
+			width: 50%;
+		}
+		.img-holder:hover .overlay-content{
+			top: 20%;
+		}
+		
+		/* News */
+		.post-date{
+			padding: 5px 15px;
+		}
+		
+		.post-date h2 {
+			font-size: 16px;
+			margin-top: 5px;
+		}
+		
+		.post-date h2 span {
+			font-size: 18px;
+		}	
+
+		/* Contact Form */
+		.contact_form {
+			width: 90%;
+		}		
+		
+	}
+
+	/* Landscape phones and down */
+	@media (max-width: 480px) {	
+		
+		/* Home Slider */
+		#home-slider .caption h1 {
+			font-size: 40px;
+		}
+		#home-slider .caption {
+			font-size: 15px;
+			padding: 0 30px;
+		}
+		.left-control, .right-control {
+			font-size: 20px;
+			height: 30px;
+			line-height: 25px;
+			width: 30px;
+		}
+		#home-slider:hover .right-control {
+			right: 15px;
+		}
+		#home-slider:hover .left-control {
+			left: 15px;
+		}
+		
+		/* Block Best Fitting */
+		.wrapper-team .col-md-3,
+		.wrapper-number .col-md-3,
+		.wrapper-count .col-md-3,
+		.wrapper-partners .col-md-3
+		{
+			margin: 0 auto;
+			width: 100%;
+		}
+		
+		/* Price */
+		.wrapper-pricing .col-md-3{
+			margin: 0 auto 20px;
+			width: 100%;
+		}
+	
+		/* Facts */	
+		.wrapper-contacts-icons .col-xs-4{
+			width: 100%;
+		}
+		
+		/* Works */
+		.myport .portfolio ,
+		.myport .portfolio-5-col,
+		.myport .portfolio-4-col,
+		.myport .portfolio-3-col
+		{
+			width: 100%;
+		}
+		
+		/* Titles */
+		.section-title h1 span{
+			padding: 0 4px;
+			font-size: 30px;
+		}
+		.element-title h1 {
+			font-size: 20px;
+		}
+		.element-title h3 {
+			font-size: 16px;
+		}
+
+		/* Contact Form */
+		.contact_form {
+			width: 90%;
+		}
+
+	}
+	
+	@media all and (-webkit-min-device-pixel-ratio: 1.5) 
+	{ 
+		/*.navbar-brand { background: url("../images/logo-white@2x.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);background-size: 151px 47px; }*/
+	}
+	

django_code/apps/cloudmanager/templates/css/yellow.css

@@ -0,0 +1,410 @@
+/* Yellow Version CSS */
+
+a:link, a:visited, a:hover, a:focus{text-decoration: none; color: #ffd600;}
+
+.navbar-brand {
+	background: url("../../images/logo-white7.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Home Slider */
+#home-slider .caption h1 strong{
+	color:#ffd600;
+}
+
+.left-control:hover, 
+.right-control:hover {
+	background-color: #ffd600;
+}
+
+.learn-more {
+    border: 2px solid #ffd600;
+}
+.learn-more:hover {
+	background: #ffd600;
+}
+
+.left-control, .right-control {
+	border:1px solid #ffd600;  
+}
+/* End Home Slider */
+
+
+/* Navbar */
+
+/* Link Color */
+.navbar-inverse { border-color: #ffd600}
+.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ffd600}
+.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #ffd600}
+.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #ffd600}
+.dropdown-menu>li>a { color: #ffd600}
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #ffd600}
+
+.navbar-toggle {
+	border: transparent;
+	background-color: #ffd600;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  	background-color: #ffd600;
+}
+
+/* End Navbar */
+
+/* Loader */
+.spinner > div
+{
+	background: #ffd600;   
+}
+/*  End Loader*/
+
+/* Titles & Color */
+.section-title h1 span{
+	background-color: #ffd600;
+}
+
+
+.btn {
+    background-image: none;
+	background-color: #ffd600;
+	color: #fff;
+}
+
+a.btn {
+	color: #fff;
+}
+
+.btn a {
+	color: #fff;
+}
+
+.btn-inverse:hover{
+	color: #fff;
+	background-color: #ffd600;
+}
+
+.btn-inverse:hover a{
+	color: #fff;
+}
+
+a.btn-inverse:hover {
+	color: #fff;
+}
+
+
+.btn:hover {
+	background-color: transparent;
+}
+
+.btn:hover a{
+	color: #ffd600;
+}
+
+.btn-inverse {
+	color: #ffd600;
+    border: 1px solid #ffd600;
+}
+
+a.btn-inverse{
+	color: #ffd600;
+}
+
+.btn-inverse a{
+	color: #ffd600;
+}
+
+
+a.btn:hover {
+	color: #ffd600;
+}
+
+.btn a:hover {
+	color: #ffd600;
+}
+
+.btn-one{
+    background: none repeat scroll 0 0 #ffd600;
+    border: 1px solid #ffd600;
+	color: #fff !important;
+}
+
+.btn-one:hover {
+    border: 1px solid #ffd600;
+	color: #ffd600;
+	background: transparent;
+}
+
+
+.btn:hover {
+	border: 1px solid #ffd600;
+	color: #ffd600;
+}
+
+.hovicon.effect-1 {
+	background: #ffd600;
+}
+
+.hovicon.effect-1:after {
+	box-shadow: 0 0 0 4px #ffd600;
+}
+
+.text-color {
+    background: none repeat scroll 0 0 #ffd600;
+}
+
+.dporcaps-negative {
+    background: none repeat scroll 0 0 #ffd600;
+}
+
+.dporcaps {
+    color: #ffd600;
+}
+
+.blockqoute-style-2 {
+    border-left: 5px solid #ffd600;
+}
+
+cite {
+    color: #ffd600;
+}
+
+
+/* Effect 1a */
+.hovicon.effect-1.sub-a:hover {
+	background: #ffd600;
+}
+
+.main-color
+{
+	color: #ffd600;
+}
+
+.white-color
+{
+	color: #fff;
+}
+
+/* End Titles & Color */
+
+
+/* Facts */
+.number p:first-letter {
+  color: #ffd600;
+}
+/* End Facts */
+
+/* Team Member */
+.team-member-holder:hover {
+	border-color: #ffd600; 
+}
+
+.img-overlay {
+	background: #ffd600;
+}
+
+.view-profile {
+	color:#ffd600;
+}
+
+.team-member-social-list-item {
+	color: #ffd600;
+}
+
+.team-details h3{
+	color: #ffd600;
+}
+/* End Team Member */
+
+/* Skills */
+.skills h4:first-letter {
+  color: #ffd600;
+}
+/* End Skills */
+
+/* Works */
+#filters li span.active,#filters li span:hover {
+	background: #ffd600;
+}
+
+#filters li span {
+	border: 1px solid #ffd600;
+	color: #ffd600;
+}
+
+.project-details h3 {
+	color: #ffd600; 
+}
+
+.project-description h3 {
+	color: #ffd600; 
+}
+
+/* End Works */
+
+/* Partners */
+.partners-img:hover img{
+	border-color: #ffd600;
+}
+/* End Partners */
+
+/* Pricing */
+.single-table h4:first-letter {
+  color: #ffd600;
+}
+
+.price-icon {
+    background-color: #ffd600;
+}
+
+span.price {
+    color: #ffd600;
+}
+
+.single-table .btn-price, .sign_form input[type="submit"] {
+    background: none repeat scroll 0 0 #ffd600;
+    border: 1px solid #ffd600;
+}
+
+.single-table .btn-price:hover {
+    border: 1px solid #ffd600;
+	color: #ffd600;
+}
+
+.single-table.featured .price-icon, .single-table.featured .btn-price {
+    color: #ffd600;
+}
+
+.single-table.featured{
+    background-color: #ffd600;
+}
+
+.single-table.featured .price {
+    background-color: #ffd600;
+}
+/* End Pricing */
+
+/* Clients */
+.clients h5 {
+	color: #ffd600;
+}
+
+.carousel-indicators .active {
+  background-color: #ffd600;
+  border-color: #ffd600;
+}
+
+.carousel-indicators li {
+  border-color: #ffd600;
+}
+/* End Clients */
+
+/* News */
+.post-date {
+    background-color: #ffd600;
+}
+
+.entry-title a:hover {
+    color: #ffd600;
+}
+/* End News */
+
+/* Blog */
+.widget.tags-cloud a {
+    border: 1px solid #ffd600;
+}
+
+.widget.tags-cloud a:hover {
+    border: 1px solid #ffd600;
+    background-color: #ffd600;
+}
+
+.tags a {
+    border: 1px solid #ffd600;
+}
+
+.tags a:hover {
+    border: 1px solid #ffd600;
+    background-color: #ffd600;
+}
+
+
+.pager li > a, .pager li > span {
+    border: 1px solid #ffd600;
+}
+.pager li > a:hover, .pager li > a:focus {
+    border: 1px solid #ffd600;
+	background-color: #ffd600;
+}
+/* End Blog */
+
+
+/* Tweet */
+#twitter-carousel .item a {
+    color: #ffd600;
+}
+
+.twitter-icon .fa-twitter:after {
+    border-color: #ffd600 transparent transparent;
+}
+
+.twitter-icon .fa-twitter, .twitter-left-control:hover, .twitter-right-control:hover {
+    background-color: #ffd600;
+}
+/* End Tweet */
+
+/* Footer */
+.bottom-footer {
+	border-top: 7px solid #ffd600;
+}
+
+.bottom-footer-left p a {
+    color: #ffd600;
+}
+
+.bottom-social-icons li a i{
+	background-color: #ffd600;
+	border: 1px solid #ffd600;
+}
+
+.bottom-social-icons li a i:hover{
+	color: #ffd600;
+}
+
+/* End Footer */
+
+/* Contacts */
+.contact_form i{
+    color: #ffd600;
+}
+
+.contact_form input[type="submit"] {
+	background: #ffd600;
+    border: 1px solid #ffd600;
+}
+
+.contact_form input[type="submit"]:hover {
+    color: #ffd600;
+}
+
+.sign_form input[type="submit"]:hover {
+	color: #ffd600;
+}
+/* End Contacts */
+
+/* To Top */
+a.scroll-up {
+    background: none repeat scroll 0 0 #ffd600;
+}
+a.scroll-up i {
+    color: #fff;
+}
+
+a.scroll-up:hover i {
+    color: #ffd600;
+}
+
+a.scroll-up:hover {
+	color: #ffd600;
+	border-color: #ffd600;
+}
+/* End To Top */

django_code/apps/cloudmanager/templates/index.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+{% load static %}
+	<html lang="en">
+	<head>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
+    <meta charset="utf-8">
+    <title>CloudManager</title>
+    <meta name="description" content="Xlight Bootstrap Responsive HTML5/CSS3 Template">
+    <meta name="author" content="Andsolutions.it">
+    <meta name="description" content="">
+    <link href="{% static 'bootstrap.min.css' %}" rel="stylesheet">
+	<link href="{% static 'bootstrap-theme.min.css' %}" rel="stylesheet">
+	<link href="{% static 'animate.min.css' %}" rel="stylesheet" >
+	<link href="{% static 'font-awesome.min.css' %}" rel="stylesheet">
+	<link href="{% static 'prettyPhoto.css' %}" rel="stylesheet">
+	<link href="{% static 'theme.css' %}" rel="stylesheet">
+	<link href="{% static 'responsive.css' %}" rel="stylesheet">
+	<link href="{% static 'blue.css' %}" rel="stylesheet" class="colors">
+
+
+
+		<!-- Google Font -->
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
+
+	<!-- Favicons -->
+    <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
+    <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
+    <link rel="apple-touch-icon" sizes="72x72" href="{% static 'apple-touch-icon-72.png' %}">
+    <link rel="apple-touch-icon" sizes="114x114" href="{% static 'apple-touch-icon-114.png' %}">
+    <link rel="apple-touch-icon" sizes="144x144" href="{% static 'apple-touch-icon-144.png' %}">
+
+</head>
+
+<body data-spy="scroll" data-target="#mynav" data-offset="85">
+
+<!-- Preloader -->
+<div id="preloader">
+	<div id="status">
+		<div class="spinner">
+			  <div class="rect1"></div>
+			  <div class="rect2"></div>
+			  <div class="rect3"></div>
+			  <div class="rect4"></div>
+			  <div class="rect5"></div>
+		</div>
+	</div>
+</div>
+<!-- End Preloader -->
+
+<header>
+
+<!-- Bootstrap Menu -->
+<div id="navigation">
+	<div class="navbar-wrapper">
+		<nav class="navbar-inverse navbar-static-top" role="navigation">
+			<div class="container">
+				<div class="row">
+					<div class="navbar-header">
+						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						<span class="icon-bar"></span>
+						</button>
+						<a class="navbar-brand" href="#"></a>
+					</div>
+					<div id="mynav" class="navbar-collapse collapse">
+						<ul class="nav navbar-nav main-nav-list">
+							<li><a href="#home">Home</a></li>
+							<li><a href="#about">About</a></li>
+							<li><a href="#team">Team</a></li>
+							<li><a href="#works">Works</a></li>
+							<li><a href="#pricing">Price</a></li>
+							<li><a href="#news">News</a></li>
+							<li><a href="#contacts">Contact</a></li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</nav>
+	</div>
+</div>
+<!-- End Bootstrap Menu -->
+
+<!-- Slider -->
+<section id="home">
+    <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
+        <div class="carousel-inner">
+			<div class="item active" style="background-image: url({% static 'bg-1.jpg' %})"> <!-- Change Image -->
+				<div class="caption">
+					<h1 class="animated fadeInLeftBig">Welcome to <strong>CloudManager {{ variable }}</strong></h1>
+				</div>
+			</div>
+        </div>
+    </div>
+</section>
+<!-- End Slider -->
+
+</header>
+
+<!-- About Xlight -->
+<section class="section-wrapper" id="about">
+	<div class="about-us">
+		<div class="why-us">
+			<div class="container">
+				<div class="row">
+					<!-- Block Title -->
+					<div class="section-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">
+						<h1><span>ABOUT XLIGHT</span></h1>
+					</div>
+					<div class="element-title wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
+						<h1>Why Choose Us ?</h1>
+						<h3>We Are Crazy <span class="main-color">Web Agency</span> Who Thinks To Change The <span class="main-color">Future</span></h3>
+					</div>
+					<!-- End Block Title -->
+					<!-- About Us Icons -->
+					<div class="wrapper-why-us">
+						<div class="col-lg-4 col-sm-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
+							<i class="hovicon effect-1 sub-a"><b class="fa fa-flask"></b></i>
+							<h2>CREATIVE TEAM</h2>
+							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+						</div>
+						<div class="col-lg-4 col-sm-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="450ms">
+							<i class="hovicon effect-1 sub-a"><b class="fa fa-heart-o"></b></i>
+							<h2>MODERN DESIGN</h2>
+							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+						</div>
+						<div class="col-lg-4 col-sm-4 wow fadeInDown" data-wow-duration="1s" data-wow-delay="600ms">
+							<i class="hovicon effect-1 sub-a"><b class="fa fa-tablet"></b></i>
+							<h2>RESPONSIVE THEME</h2>
+							<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
+						</div>
+					</div>
+					<!-- End About Us Icons -->
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- End About Xlight -->
+
+
+</section>
+<!-- End About Section -->
+
+	<!-- Skills -->
+	<div class="skills parallax">
+		<div class="overlay">
+			<div class="wrapper-block-skills">
+				<!-- Block Title -->
+				<div class="element-title">
+					<div class="row">
+						<div class="container">
+							<h1 class="main-color wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">OUR CRAZY SKILLS</h1>
+							<h3 class="white-color wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">Lorem Ipsum is simply dummy text of the printing and typesetting</h3>
+						</div>
+					</div>
+				</div>
+				<!-- End Block Title -->
+				<div class="row">
+					<div class="container">
+						<div class="wrapper-count">
+							<div class="col-lg-3 col-md-3">
+								<!-- SKILL ONE -->
+								<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="300ms">
+									<input type="text" class="knob" value="86">
+									<h4>Web Design</h4>
+								</div>
+							</div>
+							<div class="col-lg-3 col-md-3">
+								<!-- SKILL TWO -->
+								<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="500ms">
+									<input type="text" class="knob" value="93">
+									<h4>Html5</h4>
+								</div>
+							</div>
+							<div class="col-lg-3 col-md-3">
+								<!-- SKILL THREE -->
+								<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="800ms">
+									<input type="text" class="knob" value="88">
+									<h4>JQuery</h4>
+								</div>
+							</div>
+							<div class="col-lg-3 col-md-3">
+								<!-- SKILL Four -->
+								<div class="skill wow fadeInRight" data-wow-duration="1s" data-wow-delay="1100ms">
+									<input type="text" class="knob" value="95">
+									<h4>CSS3</h4>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- End Skills -->
+
+</section>
+<!-- End Team Section -->
+
+<!-- Price Section -->
+<section class="section-wrapper" id="pricing">
+	<div class="pricing">
+		<!-- Block Title -->
+		<div class="element-title">
+			<div class="row">
+				<div class="container">
+					<div class="section-title wow fadeInDown" data-wow-duration="1s" data-wow-delay="300ms">
+						<h1><span>OUR Pricing</span></h1>
+					</div>
+					<h1 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">Our Price Plan</h1>
+					<h3 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="300ms">Check Out <span class="main-color">Latest</span> Rates</h3>
+				</div>
+			</div>
+		</div>
+		<!-- End Block Title -->
+		<div class="row">
+			<div class="container">
+				<div class="wrapper-pricing">
+					{% block contentX %}
+					{% for server in list_servers_up %}
+					<!-- Plan 2 -->
+					<div class="col-lg-3 col-md-3">
+						<div class="single-table wow fadeInRight" data-wow-duration="1s" data-wow-delay="500ms">
+							<h4>{{ server.1 }}</h4>
+							<div class="price-icon">
+								<i class="fa fa-rocket"></i>
+							</div>
+							<span class="price">{{ server.2 }}</span>
+							<ul>
+								<li>Up to 5 Users</li>
+								<li>Max 50 items</li>
+								<li>Unlimited QueriesFull </li>
+								<li>Statistics</li>
+								<li>Great Support</li>
+							</ul>
+							<a class="btn-price" href="#">Get This Plan</a>
+							
+							<!-- Triggers a POST request to '/run-my-module/' without reloading -->
+							<!-- When clicked, 'Run Module' changes to 'Done!' -->
+							<button hx-post="{% url 'run_my_action_url' %}"
+									hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+								Run Module
+							</button>
+							<script>
+								function vote(kind) {
+									$.getJSON("/vote/", { pk:{ { object.pk }}, vote: kind }, function(json){
+										alert("Was successful?: " + json['success']);
+									});
+								}
+								function addClickHandlers() {
+									$("#upvote").click( function() { vote("up") });
+									$("#downvote").click( function() { vote("down") });
+								}
+								$(document).ready(addClickHandlers);
+							</script>
+
+							<div id="resultarea"></div>
+							<div id="status-message"></div>
+							<select class="btn-price" name="cars" id="cars">
+
+								{% for schedule in list_schedule %}
+								<tr>
+									<option value="{{ schedule }}">{{ schedule }}</option>
+								</tr>
+								{% endfor %}
+							</select>
+							<label for="schedule-{{ forloop.counter }}" style="display:block; font-size: 12px; margin-bottom: 5px;">Select Schedule:</label>
+
+							<select class="form-control" name="schedule_id" id="schedule-{{ forloop.counter }}">
+								{% for schedule in list_schedule %}
+								<option value="{{ schedule }}">{{ schedule }}</option>
+								{% endfor %}
+							</select>
+							<button class="btn-price" style="margin-top: 10px; width: 100%;"
+									hx-post="{% url 'change_schedule' %}"
+									hx-include="#schedule-{{ forloop.counter }}"
+									hx-vals='{"server_name": "{{ server.1 }}"}'
+									hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+									hx-target="#status-{{ forloop.counter }}"
+									hx-swap="innerHTML">
+								Update Schedule
+							</button>
+						</div>
+						<div id="status-{{ forloop.counter }}" style="margin-top: 10px; font-size: 13px; font-weight: bold;"></div>
+					</div>
+					{% endfor %}
+					{% endblock %}
+					<!-- Plan 2 -->
+					
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+<!-- Scroll to Top  -->
+<a href="#" class="scroll-up"><i class="fa fa-arrow-up"></i></a>
+<!-- End Scroll To Top  -->
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+
+	<script src="{% static 'jquery.min.js' %}"></script>
+	<script src="{% static 'bootstrap.min.js' %}"></script>
+	<script src="{% static 'retina.min.js' %}"></script>
+	<script src="{% static 'jquery.easing.min.js' %}"></script>
+	<script src="{% static 'wow.min.js' %}"></script>
+	<script src="{% static 'waypoints.min.js' %}"></script>
+	<script src="{% static 'jquery.countTo.js' %}"></script>
+	<script src="{% static 'jquery.mixitup.min.js' %}"></script>
+	<script src="{% static 'jquery.prettyPhoto.js' %}"></script>
+	<script src="{% static 'jquery.knob.min.js' %}"></script>
+	<script src="{% static 'jquery.validate.min.js' %}"></script>
+	<script src="{% static 'custom.js' %}"></script>
+
+
+</body>
+</html>

django_code/apps/cloudmanager/templates/js/custom.js

@@ -0,0 +1,301 @@
+/* Preloader */
+// makes sure the whole site is loaded
+jQuery(window).load(function() {
+	$('#status').delay(100).fadeOut('slow');
+	$('#preloader').delay(500).fadeOut('slow');
+	$('body').delay(500).css({'overflow':'visible'});
+});	
+
+
+
+jQuery(document).ready(function() {
+
+	//Function to prevent Default Events
+	function pde(e){
+		if(e.preventDefault)
+			e.preventDefault();
+		else
+			e.returnValue = false;
+	}
+	
+	/* WOW */
+	var wow = new WOW(
+	  {
+		boxClass:     'wow',      // animated element css class (default is wow)
+		animateClass: 'animated', // animation css class (default is animated)
+		offset:       0,          // distance to the element when triggering the animation (default is 0)
+		mobile:       false       // trigger animations on mobile devices (true is default)
+	  }
+	);
+	wow.init();
+	
+	/* Pretty Photo */
+	$("a[data-rel^='prettyPhoto']").prettyPhoto();
+
+	/* main-slider */
+	var slideHeight = $(window).height();
+	$('#home-slider .item').css('height',slideHeight);
+
+	$(window).resize(function(){'use strict',
+		$('#home-slider .item').css('height',slideHeight);
+	});
+	
+	//Collapse navigation on click (Bootstrap 3 is missing it)
+	$('.nav a').on('click', function () {
+		$('#my-nav').removeClass('in').addClass('collapse');
+	});
+	
+	// Nice scroll Navbar
+	$('.navbar-nav li a').click(function(evt){
+		var place = $(this).attr('href');
+		$('html, body').animate({
+			scrollTop: $(place).offset().top
+			}, 1200, 'easeInOutCubic');
+		pde(evt);
+	});
+	
+	// Nice scroll Learn More
+	$('.learn-more').click(function(evt){
+		var place = $(this).attr('href');
+		$('html, body').animate({
+			scrollTop: $(place).offset().top
+			}, 1200, 'easeInOutCubic');
+		pde(evt);
+	});
+	
+	/* Nav Bar Effect */
+	$(window).scroll(function(){	
+		"use strict";	
+		var scroll = $(window).scrollTop();
+		if( scroll > 60 ){		
+			$(".navbar-wrapper").addClass("scroll-fixed-navbar");				
+		} else {
+			$(".navbar-wrapper").removeClass("scroll-fixed-navbar");
+		}
+	});	
+	
+	/* Count */
+	$(".timer").waypoint(function(){
+		$(this).countTo()
+		},{triggerOnce:!0,offset:"bottom-in-view"});
+	
+		
+	/* Portfolio */
+	$(function(){
+	  $('.myport').mixItUp();
+	});	
+	
+	
+/* ================================
+===  KNOB                      ====
+================================= */
+$('.skills').waypoint(function() {
+	$('.knob').each(function () {
+          var element = $(this);
+          var perc = element.attr("value");  
+          element.knob({ 
+                'value': 0,
+				'width': 200,			   
+                'min':0,
+                'max':100,
+				'lineCap': 'butt',
+                "readOnly":true,
+                'inputColor':' #ffffff',
+                'bgColor':' #f7f7f7 ',
+				'fgColor':' #00cfef ',
+                "thickness":.2,// Thickness of Skill Knobs
+				'dynamicDraw': true,
+				'draw' : function () { $(this.i).val(this.cv); }
+          });
+
+		$({value: 0}).animate({ value: perc }, {
+			duration: 3000,
+			easing: 'swing',
+			progress: function () {
+			element.val(Math.ceil(this.value)).trigger('change')}
+		});
+	});
+ }, { offset: '50%', triggerOnce: true });
+ 
+
+/* Validate Form */
+  $(function() {
+    // Setup form validation on the #register-form element
+    $('#contact-form').validate({
+    
+        // Specify the validation rules
+        rules: {
+            name: {
+                required: true,
+                minlength: 2
+            },
+            email: {
+                required: true,
+                email: true
+            },
+            message: {
+                required: true,
+                minlength: 2
+            }
+        },
+        
+        // Specify the validation error messages
+        messages: {
+            name: "Please enter your name",
+            email: "Please enter a valid email address",
+            message: "Please enter your message",
+        },
+        
+        submitHandler: function(form) 
+		{
+			var name = $("#name").val();
+			var email = $("#email").val();
+			var datastr ='name=' + name + '&email=' + email;
+			$("#output").html('<i class="icon-send fa fa-spinner fa-spin"></i> Email is sending...</p>');	
+			$.ajax({	
+				type: "POST",
+				url: "php/mail.php",
+				data: $(form).serialize(),
+				cache: false,
+				success: function(data)
+				{
+					if(data == "ok")
+					{
+						$("#output").css("background-color","#27AE61");
+						$("#output").html('<p>Thank you for contact us. As early as possible we will contact you</p>');	
+					}
+					else
+					{
+						$("#output").css("background-color","#DE654E");
+						$("#output").html('<p>Email NOT sent !!</p>');	
+					}
+					setTimeout('$("#output").fadeOut("slow")',5000);
+				}
+			});		
+		
+        }
+    });
+  });
+	 
+
+/* Validate Sign */
+  $(function() {
+    // Setup form validation on the #register-form element
+    $('#sign-form').validate({
+
+		errorPlacement : function(error, element) {
+				$('#signup-error').append(error)
+			},    
+			
+        // Specify the validation rules
+        rules: {
+            email: {
+                required: true,
+                email: true
+            }
+        },
+        
+        // Specify the validation error messages
+        messages: {
+            email: "Please enter a valid email address",
+        },
+        
+        submitHandler: function(form) 
+		{	
+			form.submit();
+        }
+		
+    });
+  });	 
+	
+	/* Closes the Responsive Menu on Menu Item Click */
+	$(document).on('click','.navbar-collapse.in',function(e) {
+		if( $(e.target).is('a') ) {
+			$(this).collapse('hide');
+		}
+	});	
+
+	
+	
+
+	// Team Profile
+	$('#team').on('click','.profile-read-more',function(event){
+		event.preventDefault();
+		var link = $(this).data('single_url');
+		var full_url = '#team-single-wrap',
+		parts = full_url.split("#"),
+		trgt = parts[1],
+		target_top = $("#"+trgt).offset().top - 85;
+
+		$('html, body').animate({scrollTop:target_top}, 600);
+		$('#team-single').slideUp(500, function(){
+			$(this).load(link,function(){
+				$(this).slideDown(500);
+			});
+		});
+	});
+
+	// Close Team Profile
+	$('#team-single-wrap').on('click', '.close-folio-item',function(event) {
+		event.preventDefault();
+		var full_url = '#team',
+		parts = full_url.split("#"),
+		trgt = parts[1],
+		target_offset = $("#"+trgt).offset(),
+		target_top = target_offset.top;
+		$('html, body').animate({scrollTop:target_top}, 600);
+		$("#team-single").slideUp(500);
+	});
+
+	
+	// Work Single View
+	$('#works').on('click','.folio-read-more',function(event){
+		event.preventDefault();
+		var link = $(this).data('single_url');
+		var full_url = '#works-single-wrap',
+		parts = full_url.split("#"),
+		trgt = parts[1],
+		target_top = $("#"+trgt).offset().top - 85;
+
+		$('html, body').animate({scrollTop:target_top}, 600);
+		$('#works-single').slideUp(500, function(){
+			$(this).load(link,function(){
+				$(this).slideDown(500);
+			});
+		});
+	});
+
+	// Close Portfolio Single View
+	$('#works-single-wrap').on('click', '.close-folio-item',function(event) {
+		event.preventDefault();
+		var full_url = '#works',
+		parts = full_url.split("#"),
+		trgt = parts[1],
+		target_offset = $("#"+trgt).offset(),
+		target_top = target_offset.top;
+		$('html, body').animate({scrollTop:target_top}, 600);
+		$("#works-single").slideUp(500);
+	});
+	
+});
+
+
+/* Scroll Up */
+$(window).scroll(function() {
+	if ($(this).scrollTop() > 100) {
+		$('.scroll-up').fadeIn();
+	} else {
+		$('.scroll-up').fadeOut();
+	}
+});
+
+$('.scroll-up').click(function() {
+	$("html, body").animate({
+		scrollTop: 0
+	}, 600);
+	return false;
+}); 
+
+
+
+