Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<head>
<meta charset="utf-8">

<title>Minecraft</title>

<!-- стили -->
<link rel="stylesheet" href="style/layout.css">
<link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'> <!-- Google Font (Replace with own if needed) -->

<!-- JS -->
<script src="js/jquery00.js"></script>
<script src="js/ticker00.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#items').list_ticker({
			speed:3000,
			effect:'slide'
		});	
	})
</script>
</head>
<body>

<!-- Сайтбар -->
<div id="header">
	<div id="logo">
	<a href="#"><h1>- </h1></a> <!-- находится на 36 42 в цсс    -->
	</div>
</div>

	<!-- Нав бар -->
	
	<div id="nav">
		<div id="nav_holder">

			<ul>
				<li class="first"><a href="#"> Главная </a> </li>
				<li><a href="#"> Правила </a> </li>
				<li><a href="#"> Помощь </a> </li>
				<li><a href="#"> Форум </a> </li>
			</ul>
			
			<ul class="right">
				<li class="first"><a href="#"> Регистрация </a> </li>
			</ul>
		
		</div>
	</div>
		
	
		<!-- гланвый контент -->
		
		<div class="sub_header">
		
		
		<!-- Лента -->
		
		<div class="announcement">
				<ul id="items">
				
				<!-- Сообщения в ленте. -->
				
				<li>Ура, реконструкция С-Factory</li>
				<li>Это вам не всякие PolitMine и псевдо ЦФ</li>
				<li>Регестрируйся, приключения уже ждут</li>
				<li>IP сервера: 000.000.000:0000</li>
				
			</ul>
		
		</div>
		 <!-- Лента -->
		<div class="triangle-l"></div>
		<div class="triangle-r"></div>
		</div>
		
		<!-- Конец заголовка и подзаголовка -->
		
		<img class="torch1" src="img/torch.gif">
		<img class="torch2" src="img/torch.gif">

		<!--
		====================================
				   Основной контент
		====================================
		-->
		
		
		<!-- Глаынй контейнер -->
		
	<div id="content_container">
		
				
		<!-- Контент справа -->
		<div class="right_content">
			<h1> Добро пожаловать! </h1> 
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium repudiandae adipisci culpa consequuntur expedita natus nostrum dolorem, inventore in sequi dolore dicta voluptas, fuga cumque minus sint minima nisi aperiam?
			Aliquid, inventore consequatur nulla veritatis ab recusandae deleniti nobis. Aspernatur id temporibus perspiciatis asperiores et esse amet nostrum? Ipsum aut labore maxime consectetur nostrum, blanditiis dolorum harum sapiente ut veritatis?
			Voluptate animi error perspiciatis quisquam est. Incidunt autem rerum sint aliquam temporibus repellendus atque suscipit illum, aperiam, quo molestiae! Ratione cupiditate suscipit nisi laboriosam ut possimus praesentium consectetur numquam animi!
			Rem obcaecati ipsum eius modi sit magnam nihil impedit similique optio itaque, temporibus illum. Minima quod exercitationem expedita, dicta numquam voluptatem adipisci facilis, natus nemo similique quam repellendus perferendis ullam?
			Dolore soluta obcaecati beatae sequi, tempora rerum adipisci exercitationem delectus laudantium dolorum distinctio neque esse harum illo! Error, dicta aliquid, rerum quidem delectus cum ratione atque porro blanditiis repellendus nihil.
			Ut nisi libero nihil veniam doloremque dolorem, dolorum pariatur ullam enim officiis at quod recusandae blanditiis suscipit obcaecati odio doloribus neque impedit ex deleniti. Ex magni sint aliquam rerum rem?
			Quam earum corrupti harum blanditiis aperiam, quod est ratione facere voluptatibus eius ab iure non consequuntur vero illo maiores. A molestiae amet nulla voluptates repudiandae facere necessitatibus, reprehenderit dolorem esse?
			Necessitatibus, aperiam, eius tenetur labore eos rerum pariatur ea, dolor omnis autem a corrupti soluta consequuntur dolorem earum ipsum amet ab! Labore nemo numquam adipisci quisquam repellat vero quae iure.
			Facilis doloremque tempore, provident repudiandae porro deserunt, eaque illum nam tempora aliquid voluptas iure accusamus odit quasi temporibus nobis velit perferendis sunt obcaecati error. Aliquid voluptatum voluptatem molestias suscipit esse!
			Dolorum atque reprehenderit laboriosam esse blanditiis neque amet unde, iusto adipisci nulla minima expedita delectus, quae aperiam assumenda doloremque nesciunt quo quas modi. Non laborum quidem provident, pariatur sunt deleniti.
			Obcaecati cupiditate ipsum asperiores optio minus! Odio soluta dolorum alias tenetur ut pariatur, sunt perferendis commodi ipsum eos officiis rem? Corporis iure hic similique rerum quos accusantium fuga maiores porro!
			Porro animi aut velit facere repellat, quod optio reprehenderit numquam ut, quam id quibusdam cum qui a vel omnis illum consequuntur harum amet? Ad placeat ex nisi quia repellat dolore?
			Earum, fugit non id consequuntur sint perspiciatis, recusandae est facere repellendus, nobis quia. Velit hic eaque et impedit quos! Expedita ea enim atque suscipit voluptas numquam, delectus deserunt nemo nihil?
			Dignissimos quo ratione sapiente quod optio voluptatem deleniti voluptatum aut, cum neque architecto illum dolores labore temporibus expedita perferendis officiis, autem consequatur molestias veniam dolor. Velit aperiam sint recusandae ipsa.
			Temporibus consequuntur tempore laboriosam quaerat quae facilis porro excepturi officiis, cum molestias, error ab. Ut, quos officiis, dolorum accusantium eligendi sapiente culpa omnis atque quis nihil, dolor blanditiis. Numquam, vitae.
		</div>
		
		<div class="right_content">
			<h1>Пост№ 2</h1>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente temporibus pariatur perspiciatis facilis, possimus fugit quas ipsa recusandae maxime accusantium qui minus quia odio nostrum? Optio tempore voluptates incidunt. Dolore.
			Neque nostrum inventore sapiente rerum sit deserunt dolor corrupti ut ullam id possimus sequi nam, doloremque soluta, sint officia tempora architecto? Magni, enim! Adipisci cupiditate est possimus impedit magnam reiciendis!
			Omnis quidem deleniti incidunt perferendis maxime! Mollitia, ducimus omnis debitis sed soluta doloremque ab saepe distinctio in quam maxime est non, dignissimos eveniet? Ab perspiciatis neque exercitationem corporis deserunt ipsum!
			Qui voluptatem reprehenderit ex sapiente perspiciatis, consectetur in, dignissimos eaque exercitationem esse hic alias eveniet velit natus sunt, provident fuga accusantium est ab? Itaque, facere? Quos eum nam porro nisi!
			Dolores ad nesciunt minima reprehenderit quo? In consequatur est doloribus expedita sint, ratione atque corporis et distinctio ad amet beatae a nostrum provident, fuga animi eos dolore fugit incidunt alias.
			Error, eos fugit. Rerum sapiente quisquam quod! Fugit sed dignissimos quam consequuntur laudantium, neque tempora et alias quas eaque? Sint dicta optio aspernatur accusamus! Nesciunt blanditiis in nihil id odio?
			Sequi est illum sapiente, perspiciatis harum possimus beatae doloribus quo! Consectetur unde qui, voluptate aspernatur voluptatem ad earum iure inventore ipsa molestias necessitatibus dolores? Iure dolor quis ratione laboriosam possimus.
			Nobis, reiciendis. Repellendus aspernatur fuga dolore consequatur eligendi aliquam nesciunt, recusandae minima eius voluptatibus exercitationem, qui quia consectetur quas quam praesentium sint neque molestias dicta quae iusto earum! Dignissimos, modi.
			Ipsam fugit vel autem voluptatibus error cupiditate, eos cum magnam asperiores atque molestiae ipsa rerum a et dolor, suscipit sunt! Dolorum inventore nemo quibusdam voluptatibus consequatur dolorem harum dignissimos doloremque.
			Ut adipisci nostrum eaque laboriosam aliquid, ipsam omnis quaerat dolorum, error eligendi voluptatum porro. Sit cupiditate ipsam libero sapiente voluptatem voluptates, laboriosam recusandae. Nihil, quas mollitia fugit deleniti pariatur corrupti!
			Rem, at? Consequuntur voluptatibus officia quasi facere maxime laboriosam sunt ullam corrupti nesciunt dicta. Vitae quae id laboriosam officia perferendis nam, nisi dicta reiciendis voluptatibus iste, molestiae provident qui tempora.
			Iure nesciunt non temporibus asperiores in impedit ea voluptatibus illum reiciendis molestias ullam atque dicta, maiores, possimus vero ut at aliquid vel nobis expedita. Alias maiores mollitia vitae ullam labore.
			Repudiandae ex vel voluptas incidunt debitis culpa, iste explicabo suscipit qui accusamus, provident, nostrum dicta fugit esse saepe aperiam veritatis natus id quis architecto totam illo ab temporibus ad. Ut.
			Recusandae ullam harum sit, unde et quas, enim eaque laborum amet dicta laudantium. Vero repellendus hic ut ullam sed deserunt exercitationem nihil, id porro voluptates error? Molestiae officia fugiat rem!
			Cumque, quis placeat facilis rem minima provident! Placeat ipsam recusandae ea! Recusandae quasi blanditiis minus, ducimus labore facere, ad perspiciatis corrupti tempore aut omnis reprehenderit praesentium accusantium? Ex, in odit?
		</div>
		
		<div class="right_content">
			<h1>Пост№ 3</h1>
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae labore at, aut odio voluptatem iusto error? Nostrum blanditiis magnam ab praesentium minima, quae excepturi dolor officia pariatur tempora est non?
			Sunt perferendis eaque culpa ipsa officia labore animi autem consectetur cupiditate! Repudiandae, quia necessitatibus quibusdam officiis fugit nulla dolores, enim quae, asperiores autem harum repellendus modi corporis est quod excepturi.
			Omnis sed minima molestiae non id iusto harum perferendis aut in reprehenderit nemo suscipit ex, dolores ducimus voluptate officiis quod reiciendis doloribus quasi magni cum. Dolor officiis sit recusandae dolores.
			Quam est minima earum beatae dolores, harum ratione! Mollitia velit porro quo impedit, ea corporis tenetur natus neque doloremque laborum eius veritatis consequuntur praesentium labore, accusantium quos molestiae totam cumque.
			Aperiam, libero praesentium veniam, sint, nam quibusdam rerum fugiat obcaecati reiciendis voluptatibus accusamus. Autem mollitia, ad voluptas corrupti cum eius quo, esse dolores, vel minus voluptate. Adipisci eligendi expedita aliquam.
			Sapiente rem, aliquid cumque reiciendis beatae qui eius adipisci tempora soluta, optio quisquam corporis perspiciatis ipsum, dolorum architecto odit maxime hic repellat minima. Delectus vel esse praesentium ex dolor officiis.
			Corporis eum officiis ea rerum id harum, tenetur officia omnis doloremque aperiam cum repellendus eveniet provident a magnam maxime facere optio iure accusantium dolorem quo et aspernatur error pariatur? Iste!
			Exercitationem hic maiores soluta, non omnis dolorem accusantium dignissimos dolor pariatur. Dolorem pariatur sunt ex, qui labore incidunt perferendis provident possimus ipsa, dolore alias quia modi vitae, quam soluta perspiciatis.
			Commodi error, nihil officia suscipit modi inventore qui reprehenderit quibusdam delectus autem accusantium vitae iste tempore, rerum perspiciatis repellat eveniet ratione sint quos, cumque doloribus! Cupiditate fuga aliquam amet officiis.
			Quos, ullam molestias placeat at molestiae animi, maiores possimus nemo consectetur, corrupti qui dicta quo porro laboriosam. Harum natus nihil debitis ullam dignissimos ratione ducimus, voluptatibus nemo quos recusandae ipsam?
			Recusandae rem, quam voluptatum beatae ratione fugit, nesciunt, facilis exercitationem doloribus ad unde possimus ex! Labore esse iste quidem qui, aut assumenda sequi provident, quas eligendi doloribus voluptas eius. Hic.
			Dolorem ipsa, maiores minima adipisci ullam id numquam maxime saepe illo velit sit amet fugiat rem natus nesciunt illum? Assumenda adipisci neque excepturi, enim ipsa rerum ratione magnam eligendi reprehenderit?
			Consequatur et temporibus, error alias voluptatum officiis explicabo itaque similique odio molestias fuga facere iste ipsum perspiciatis eligendi eveniet non totam. Neque repellendus, distinctio voluptates ex vel labore nostrum aliquam!
			Incidunt beatae, officia aliquid a unde nihil, minima consequuntur blanditiis eum eveniet doloribus sunt consequatur dolorum deleniti omnis quisquam. Optio sunt minima, molestias debitis libero maiores sequi consectetur dolor consequatur.
			Quasi, similique eius! Saepe repellendus iste ullam accusamus tenetur error, est inventore quibusdam, fuga blanditiis ratione reiciendis autem aliquid, porro sapiente illo placeat perferendis natus rem modi cumque! Et, deserunt.
		</div>

		<div class="right_content">
			<h1>Пост№ 4</h1>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem facilis corporis minus sint? Architecto assumenda, sunt perferendis quia maiores distinctio sequi illo est deserunt minus corporis nobis labore, saepe molestiae!
			Minima eum voluptatem iusto voluptate ut optio voluptas corporis pariatur odio ducimus, odit error provident praesentium, ab veritatis expedita? Officiis fugit esse molestiae perspiciatis nobis iusto officia molestias tenetur quam!
			Molestias fugit deleniti expedita officia, at placeat eligendi esse error culpa maxime eum a aliquam alias iure dolorem. Aut voluptas ullam doloribus id aliquam eaque hic harum laboriosam! Perferendis, vel?
			Laboriosam ipsam libero, laborum sed odio sunt. Laboriosam ducimus inventore commodi culpa earum excepturi possimus veritatis ipsa, tenetur assumenda aspernatur libero atque totam quod nesciunt, nobis explicabo corporis velit iusto!
			Tempora deserunt quidem sint perferendis laudantium voluptas eius quo, exercitationem inventore, aut aliquam id? Quo accusamus, id dolor iusto, odit veritatis cumque nobis eligendi quas iste fugiat perspiciatis explicabo vero.
			Sint quaerat nam blanditiis quidem tempore, recusandae veritatis quae, delectus modi cupiditate eos autem, et facilis similique ad voluptas minima numquam perspiciatis? Consequatur quod odit accusantium ratione voluptatum, impedit totam?
			Perferendis fugit quod, sequi ad ipsum sit incidunt voluptatibus quasi nisi! Aspernatur explicabo porro, alias, itaque perferendis dolorum ea quo laboriosam architecto unde corrupti, atque aperiam deleniti perspiciatis odio recusandae!
			Laboriosam dolore, inventore iste nesciunt, consequuntur facere accusamus, quasi doloremque ipsam molestiae distinctio soluta. Saepe sint magnam accusantium quisquam quasi sit, tenetur ullam libero obcaecati aspernatur unde fuga maiores quibusdam?
			Ipsum harum facere, quo consequatur iure a sint dignissimos quasi nemo, modi magni eum dolorum earum doloremque ex dolores tempora? Animi quidem totam adipisci fugiat maiores odio cumque repudiandae temporibus?
			Eligendi possimus veritatis aliquam fuga voluptate? Commodi expedita similique voluptate error dolor eos voluptatibus animi velit voluptatum, nisi, mollitia sint soluta reiciendis eligendi maxime aliquam laudantium et atque dignissimos molestiae.
			Aspernatur facere, aperiam quam, quidem asperiores dolorum vel fugiat labore, consectetur quis voluptas. Cupiditate vel adipisci aperiam nobis, reprehenderit rem eos animi tempora. Saepe velit fuga cum nemo neque in!
			Sapiente facilis tempora consectetur praesentium voluptatem laboriosam voluptas reprehenderit in dolore, minus obcaecati veniam voluptate cum recusandae tenetur nostrum laudantium, fugit cupiditate dolores labore vitae at fugiat iste quaerat! Corrupti.
			Provident culpa nam corporis totam dolores repellendus quod tempore obcaecati cumque, expedita quae possimus consequuntur qui impedit ipsam tempora cum ducimus, hic explicabo illum, tenetur quam rerum animi recusandae? Nulla.
			Asperiores quibusdam eum atque quas esse similique. Nam accusantium numquam, dolores dignissimos obcaecati labore provident nobis repellendus, sapiente aut ut vel beatae explicabo doloribus. Impedit aliquid nulla pariatur adipisci. Eveniet.
			Sit iusto autem nihil? Similique iusto explicabo ducimus consequatur hic laudantium voluptates obcaecati blanditiis voluptas commodi fuga est perferendis corrupti sequi dolor, minus rem labore dolores amet, laborum id deserunt.
			Voluptas, repudiandae vero! Provident deleniti aperiam tenetur assumenda cumque rem corrupti mollitia, tempore beatae molestias nihil, autem quas perferendis, dolorum amet nemo? Voluptatem maiores dolorem veritatis minus molestiae obcaecati voluptate.
			Numquam non dignissimos totam! Dignissimos neque, nemo facere vero alias, modi mollitia natus ad hic voluptas aliquam quas! Amet ab tenetur possimus eveniet et veritatis sunt corporis a est sit!
			Dignissimos id veniam molestiae tempora eligendi impedit assumenda amet temporibus non rerum, dolores sapiente at inventore saepe, optio molestias laborum delectus consectetur repellendus quibusdam nesciunt blanditiis nobis cumque! Quaerat, nemo!
			Libero adipisci veniam harum culpa aliquam unde error voluptatum earum labore perspiciatis eaque est ut enim quibusdam iste quo quidem, nam, tempora molestiae maiores, quasi ipsam consequatur aperiam? Harum, excepturi.
			Hic, praesentium illum aliquam obcaecati, accusamus voluptatum, aliquid maxime doloribus perferendis dolore numquam deleniti ipsam! Sed quam quos similique expedita tempore officia adipisci unde reiciendis magnam consequuntur. Voluptatum, quos dignissimos!
		</div>

		<div class="right_content">
			<h1>Пост№ 4</h1>
		</div>

		<div class="right_content">
			<h1>Пост№ 4</h1>
		</div>

		<div class="right_content">
			<h1>Пост№ 4</h1>
		</div>

		<div class="right_content">
			<h1>Пост№ 4</h1>
		</div>
		
		

		<!-- сайтбар слева  -->
		<div class="sidebar">
		
		<h3 class="address">Сервер</h3>
		<p class="address">000.000.000:0000</p>
		
		</div>
		
		<div class="sidebar">
		
		<!-- Состояние сервера -->
		<h3 >Статус сервера: </h3>
		<div class="online"></div>
		</div>
		
		<div class="sidebar">
		
		<h3> Заголовок	 </h3>
		<p>Здесь будет описание или краткая информация.</p>
		</div>	
	</div>
<!-- футр -->
<footer class="footer">
	<p>Copyright &copy; 2019 C-Factory</p>
</footer>	
</body>
</html>

              
            
!

CSS

              
                body {
	margin: 0px;
	height: 100%;
	background-image: url(../img/bg_main.png);
}
a {
	text-decoration: none
}
@font-face {
    font-family: Logo;
    src: url(font/minecraft_font_by_pwnage_block-d37t6nb.ttf);
}

#header {
	background:#8cbeff;
	background-image: url(../img/180px-Sun.png), url(../img/bg-outside-clouds.png);
	background-position: center right, top;
	background-repeat: no-repeat;
	width: 100%;
	padding: 50px 0;
	margin:0;
	overflow: hidden;
}

#logo {
	margin: 0px auto;
	margin-bottom: 0px;
	text-align: center;
	font-size: 40px;
}

#logo h1 {
	color: #fbff00;
	text-shadow:0 0 30px #333;
	font-family: Logo;
}

#logo h1:before {
	content:"C";   /* цвет первой буквы */
	color: #ffffff;
	font-family: Logo;
}

#logo h1:after {
	content: "Factory";  /* цвет второй буквы */
	color: #ffffff;
	font-family: Logo;
}

#nav {
	margin-top: -20px;
	margin-bottom: -5px;
	background-color:#2b2b2b;
	border-bottom:4px solid #444442;
	font-size:15px;
	height:36px;
	-webkit-box-shadow:0 0 5px #666; 
	-moz-box-shadow: 0 0 5px #666; 
	box-shadow:0 0 5px #666;
	border-top: 10px solid #009514;
	position: relative;
	z-index: 9999;
	}

#nav_holder {
	width: 50%;
	margin: 0px auto;
	margin-top: -15px;
}

#nav_holder ul.right {
	float: right;
	margin-top: 0px;
	margin-right: 10px;
}

#nav_holder li.first {
	margin-left: -30px;
	border-left: 1px solid #333;
    box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
    -moz-box-shadow: 1px 0 #000 inset, -1px 0 #000 inset;
    -webkit-box-shadow: 1px 0 #000 inset, -1px 0 #000 inset; 
    text-shadow:0 0 1px #000;
}


#nav_holder li {
	list-style: none;
	float: left;
	border-right: 1px solid #333;
    box-shadow: -1px 0 #000 inset;
    -moz-box-shadow: -1px 0 #000 inset;
    -webkit-box-shadow: -1px 0 #000 inset;  
    text-shadow:0 0 1px #000;
}

#nav_holder li a {
	line-height: 3em;
	text-decoration: none;
	color: #FFF;
	opacity: 0.7;
	margin-right: 20px;
	margin-left: 20px;
	transition: color .2s linear;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	font-size: 12px;
	color: yellow;
	font-family: Logo;
}
#nav_holder li a:hover {
	opacity: 0.9;
	color: #00a5f0;	
	transition: color .2s linear;
	-webkit-transition: color .1s linear;
	-moz-transition: grow .1s linear;
}

#nav_holder li a:active {
	opacity: 1;
	color: #000;
	width: 300px;
}

/* Заголовок готов */

.torch1 {
	float: right;
}
.torch2 {
	float: left;
}

/* Главный контент */

.sub_header {
	width: 50%;
	min-height: 105px;
	margin: 0px auto;
	padding: 10px;
	background: url(../img/planks.jpg);
	border: 4px solid #56472A; 
	-moz-box-shadow: -2px 2px 3px #333; 
	-webkit-box-shadow: -2px -2px 3px #333; 
	box-shadow: -2px -2px 3px #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 14px;
	z-index: 9;
	position: relative;
}

.announcement {
	background: #7f9db9;
	margin: 0px ;
	height: 50px;
	width: 52vw;
	min-width: 45vw;
	position: relative;
	left: -29px;
	top: 20px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 1;
}

.announcement ul#items {
	list-style: none;
	margin-top: 8px;
	color: #ffffff;
	font-size: 30px;
	text-align: center;
	text-shadow: 1px 1px 2px #000;
}

.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:20px;
	height:0px;
	width:0px;
	position: relative;
	left: -50px;
	top: 50px;
	z-index: -1;
}
 /* ТУПОЙ триугольник, позже починю */
/*.triangle-r { 
	border-color: transparent  transparent transparent #7d90a3 ;
	border-style:solid;
	border-width:19px;
	height:0px;
	width: 0px;
	position: relative;
	left: 101%;
	top: 20px;
	z-index: -1; 
} */

#content_container {
	width: 950px;
	margin: 10px auto;
	margin-top: 1%;
}

.sidebar {
	padding: 10px;
	display: block;
	position: relative;
	margin-bottom: 0px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border-top: 3.5px inset black;
	border-bottom: 3px outset black;
	background-image:url(../img/sidebar.png);
	width: 249px;
	z-index: -1;
	
}

.sidebar h1,h2,h3,h4,h5,h6,p{
	padding-left: 20px;
	font-family: 'Sanchez', serif;
}

.sidebar h3.address {
	margin-bottom: -10px;
}

.sidebar div.online {
	float: right;
	z-index: 1;
	display: block;
	position: absolute;
	top: 40%;
	right: 20%;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	background-color: green;
	box-shadow: 0px 0px 2px 2px #008000;
}

.sidebar div.offline {
	float: right;
	z-index: 1;
	display: block;
	position: absolute;
	top: 40%;
	right: 20%;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	background-color: red;
	box-shadow: 0px 0px 2px 2px red;
}

.sidebar p.address {
	color: green;
}

.right_content {
	display: block;
	position: relative;
	background-image:url(../img/right_content.png);
	float: right;
	margin-top: 3px;
	margin-bottom: 30px;
	min-height: 200px;
	border: 4px solid #222;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 10px rgba(000, 0, 0, 1);
	-moz-box-shadow:    0px 0px 10px rgba(000, 0, 0, 1);
	box-shadow:         0px 0px 10px rgba(000, 0, 0, 1);
	width: 660px;
	color: #999;
}

.right_content h1,h2,h3,h4,h5,h6,p {
	padding-left: 30px;
	margin-right: 30px;
}

.right_content h1 {
	color: #999;
	text-shadow: 1px 1px 1px #000;
	width: 300px;
	margin-top: 0px;
	background-color: #222;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
}

.footer {
	background-color: rgb(141, 141, 141, 0.5);
	display: block;
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
}
              
            
!

JS

              
                
              
            
!
999px

Console