Synnefo

.info-block h3 .badge { float: right; font-size: 0.8em; padding: 5px 8px; background-color:#659CEF;}

.object-details h5 { float: right; margin-top: 10px; margin-right: 10px; font-size: 1em; color: #D9397E }

/* new styles olga */

.search-query 	{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }

a				{ color:#659CEF; }

a:hover			{ color:#2956B2 }

h3				{ color:#D61153; font-size:21px;}

h4				{ font-size:18px; margin-bottom:1em; color:#F46906; }

input:focus,

textarea:focus {

  border-color: #659CEF;

  outline: 0;

  outline: thin dotted \9;

  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #659CEF;

     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #659CEF;

          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #659CEF;

}

.object-details-content 		{ margin:1em 0; }

.nav-tabs						{ margin:0; border:0 none; }

.tab-content .dl-horizontal		{ margin:0; }

.nav-tabs > .active > a, 

.nav-tabs > .active > a:hover	{ background-color:#F5F5F5; color:#2956B2; font-weight:bold;}

.nav-tabs > li					{ margin-bottom:-2px; }

.badge							{ border-radius:4px; -moz-border-radius:4px;  -webkit-border-radius:5px; }

.object-details .badge			{ margin-right:8px; }

.label-success, 

.badge-success					{ background-color:#8BBA00 }

.badge-important				{ background-color: #F81A23; }

.badge-info						{ background-color:#659CEF }

            	 <ul class="nav nav-tabs">

				    <li class="active"><a href="#details{{ account }}" data-toggle="tab">Details</a></li>

			    </ul>	

                 <div class="tab-content">

					<div class="tab-pane active" id="details{{ account }}">

		                <dl class="dl-horizontal well">

		                    <dt>Username</dt><dd>{{ account }}</dd>

		                    <dt>Virtual machines</dt><dd>{{ vms|length }}</dd>

		                    <dt>Networks</dt><dd>{{ networks|length }}</dd>

		                </dl>

		           </div>

		        </div>

        <ul class="nav nav-tabs">

		    <li class="active"><a href="#details{{ network.pk }}" data-toggle="tab">Details</a></li>

	    </ul>	

         <div class="tab-content">

			<div class="tab-pane active" id="details{{ network.pk }}">

				<dl class="dl-horizontal well">

		            <dt>ID</dt><dd>{{ network.pk }}</dd>

		            <dt>Name</dt><dd>{{ network.name }}</dd>

		            <dt>Public</dt><dd>{{ network.public }}</dd>

		            <dt>User ID</dt><dd>{{ network.userid }}</dd>

		            <dt>Created</dt><dd>{{ network.created }}</dd>

		            <dt>Updated</dt><dd>{{ network.updated }}</dd>

		            <dt>State</dt><dd>{{ network.get_state_display }} ({{ network.state }})</dd>

		        </dl>

			</div>

		</div>

        <ul class="nav nav-tabs">

		    <li class="active"><a href="#details{{ vm.pk }}" data-toggle="tab">Details</a></li>

		    <li><a href="#metadata{{ vm.pk }}" data-toggle="tab">Metadata</a></li>

		    <li><a href="#backend{{ vm.pk }}" data-toggle="tab">Backend info</a></li>

		    <li><a href="#network{{ vm.pk }}" data-toggle="tab">Network interfaces</a></li>

	    </ul>

	    <div class="tab-content">

			<div class="tab-pane active" id="details{{ vm.pk }}">

				<dl class="dl-horizontal well">

		            <dt>ID</dt><dd>{{ vm.pk }}</dd>

		            <dt>Name</dt><dd>{{ vm.name }}</dd>

		            <dt>User id</dt><dd>{{ vm.userid }}</dd>

		            <dt>Created</dt><dd>{{ vm.created }}</dd>

		            <dt>Updated</dt><dd>{{ vm.updated }}</dd>

		            <dt>Suspended</dt><dd>{{ vm.suspended }}</dd>

		            <dt>Deleted</dt><dd>{{ vm.deleted }}</dd>

		            <dt>Image id</dt><dd>{{ vm.imageid }}</dd>

		            <dt>Flavor</dt><dd>{{ vm.flavor.cpu }},

		                        {{ vm.flavor.disk }},

		                        {{ vm.flavor.ram }},

		                        {{ vm.flavor.disk_template }}</dd>

		        </dl>

			</div>

			<div class="tab-pane" id="metadata{{ vm.pk }}">

				<dl class="dl-horizontal well">

		            {% for meta in vm.metadata.all %}

		            <dt>{{ meta.meta_key }}</dt><dd>{{ meta.meta_value }}</dd>

		            {% empty %}

		            <dt>No metadata</dt>

		            {% endfor %}

		        </dl>

			</div>

			<div class="tab-pane" id="backend{{ vm.pk }}">

				<dl class="dl-horizontal well">

		            <dt>Action</dt><dd>{{ vm.get_action_display }} ({{ vm.action }})</dd>

		            <dt>Operstate</dt><dd>{{ vm.get_operstate_display }} ({{ vm.operstate }})</dd>

		            <dt>Backend job id</dt><dd>{{ vm.backendjobid }}</dd>

		            <dt>Backend op code</dt><dd>{{ vm.get_backendopcode_display }} ({{ vm.backendopcode }})</dd>

		            <dt>Backend log msg</dt><dd>{{ vm.backendlogmsg }}</dd>

		            <dt>Build percentage</dt><dd>{{ vm.buildpercentage }}</dd>

		        </dl>

			</div>

			<div class="tab-pane" id="network{{ vm.pk }}">

				<table class="table well">

		            <thead>

		                <td>ID</td>

		                <td>Network (ID)</td>

		                <td>Created</td>

		                <td>Updated</td>

		                <td>Index</td>

		                <td>MAC</td>

		                <td>IPv4</td>

		                <td>IPv6</td>

		                <td>Firewall</td>

		            </thead>

		            <tbody>

		                {% for nic in vm.nics.all %}

		                <tr>

		                    <td>{{ nic.pk }}</td>

		                    <td>{{ nic.network }} ({{ nic.network.pk }})</td>

		                    <td>{{ nic.created }}</td>

		                    <td>{{ nic.updated }}</td>

		                    <td>{{ nic.index }}</td>

		                    <td>{{ nic.mac }}</td>

		                    <td>{{ nic.ipv4 }}</td>

		                    <td>{{ nic.ipv6 }}</td>

		                    <td>{{ nic.get_firewall_profile_display }} ({{nic.firewall_profile}})</td>

		                </tr>

		                {% empty %}

		                <tr>

		                    <td colspan=9>No network interface available</td>

		                </tr>

		                {% endfor %}

		            </tbody>

		        </table>

			</div>

		</div>