Старт

site/Новая папка/css3-mediaqueries.js

@@ -0,0 +1,779 @@
+if(typeof Object.create!=="function"){
+Object.create=function(o){
+function F(){
+};
+F.prototype=o;
+return new F();
+};
+}
+var ua={toString:function(){
+return navigator.userAgent;
+},test:function(s){
+return this.toString().toLowerCase().indexOf(s.toLowerCase())>-1;
+}};
+ua.version=(ua.toString().toLowerCase().match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[])[1];
+ua.webkit=ua.test("webkit");
+ua.gecko=ua.test("gecko")&&!ua.webkit;
+ua.opera=ua.test("opera");
+ua.ie=ua.test("msie")&&!ua.opera;
+ua.ie6=ua.ie&&document.compatMode&&typeof document.documentElement.style.maxHeight==="undefined";
+ua.ie7=ua.ie&&document.documentElement&&typeof document.documentElement.style.maxHeight!=="undefined"&&typeof XDomainRequest==="undefined";
+ua.ie8=ua.ie&&typeof XDomainRequest!=="undefined";
+var domReady=function(){
+var _1=[];
+var _2=function(){
+if(!arguments.callee.done){
+arguments.callee.done=true;
+for(var i=0;i<_1.length;i++){
+_1[i]();
+}
+}
+};
+if(document.addEventListener){
+document.addEventListener("DOMContentLoaded",_2,false);
+}
+if(ua.ie){
+(function(){
+try{
+document.documentElement.doScroll("left");
+}
+catch(e){
+setTimeout(arguments.callee,50);
+return;
+}
+_2();
+})();
+document.onreadystatechange=function(){
+if(document.readyState==="complete"){
+document.onreadystatechange=null;
+_2();
+}
+};
+}
+if(ua.webkit&&document.readyState){
+(function(){
+if(document.readyState!=="loading"){
+_2();
+}else{
+setTimeout(arguments.callee,10);
+}
+})();
+}
+window.onload=_2;
+return function(fn){
+if(typeof fn==="function"){
+_1[_1.length]=fn;
+}
+return fn;
+};
+}();
+var cssHelper=function(){
+var _3={BLOCKS:/[^\s{][^{]*\{(?:[^{}]*\{[^{}]*\}[^{}]*|[^{}]*)*\}/g,BLOCKS_INSIDE:/[^\s{][^{]*\{[^{}]*\}/g,DECLARATIONS:/[a-zA-Z\-]+[^;]*:[^;]+;/g,RELATIVE_URLS:/url\(['"]?([^\/\)'"][^:\)'"]+)['"]?\)/g,REDUNDANT_COMPONENTS:/(?:\/\*([^*\\\\]|\*(?!\/))+\*\/|@import[^;]+;)/g,REDUNDANT_WHITESPACE:/\s*(,|:|;|\{|\})\s*/g,MORE_WHITESPACE:/\s{2,}/g,FINAL_SEMICOLONS:/;\}/g,NOT_WHITESPACE:/\S+/g};
+var _4,_5=false;
+var _6=[];
+var _7=function(fn){
+if(typeof fn==="function"){
+_6[_6.length]=fn;
+}
+};
+var _8=function(){
+for(var i=0;i<_6.length;i++){
+_6[i](_4);
+}
+};
+var _9={};
+var _a=function(n,v){
+if(_9[n]){
+var _b=_9[n].listeners;
+if(_b){
+for(var i=0;i<_b.length;i++){
+_b[i](v);
+}
+}
+}
+};
+var _c=function(_d,_e,_f){
+if(ua.ie&&!window.XMLHttpRequest){
+window.XMLHttpRequest=function(){
+return new ActiveXObject("Microsoft.XMLHTTP");
+};
+}
+if(!XMLHttpRequest){
+return "";
+}
+var r=new XMLHttpRequest();
+try{
+r.open("get",_d,true);
+r.setRequestHeader("X_REQUESTED_WITH","XMLHttpRequest");
+}
+catch(e){
+_f();
+return;
+}
+var _10=false;
+setTimeout(function(){
+_10=true;
+},5000);
+document.documentElement.style.cursor="progress";
+r.onreadystatechange=function(){
+if(r.readyState===4&&!_10){
+if(!r.status&&location.protocol==="file:"||(r.status>=200&&r.status<300)||r.status===304||navigator.userAgent.indexOf("Safari")>-1&&typeof r.status==="undefined"){
+_e(r.responseText);
+}else{
+_f();
+}
+document.documentElement.style.cursor="";
+r=null;
+}
+};
+r.send("");
+};
+var _11=function(_12){
+_12=_12.replace(_3.REDUNDANT_COMPONENTS,"");
+_12=_12.replace(_3.REDUNDANT_WHITESPACE,"$1");
+_12=_12.replace(_3.MORE_WHITESPACE," ");
+_12=_12.replace(_3.FINAL_SEMICOLONS,"}");
+return _12;
+};
+var _13={mediaQueryList:function(s){
+var o={};
+var idx=s.indexOf("{");
+var lt=s.substring(0,idx);
+s=s.substring(idx+1,s.length-1);
+var mqs=[],rs=[];
+var qts=lt.toLowerCase().substring(7).split(",");
+for(var i=0;i<qts.length;i++){
+mqs[mqs.length]=_13.mediaQuery(qts[i],o);
+}
+var rts=s.match(_3.BLOCKS_INSIDE);
+if(rts!==null){
+for(i=0;i<rts.length;i++){
+rs[rs.length]=_13.rule(rts[i],o);
+}
+}
+o.getMediaQueries=function(){
+return mqs;
+};
+o.getRules=function(){
+return rs;
+};
+o.getListText=function(){
+return lt;
+};
+o.getCssText=function(){
+return s;
+};
+return o;
+},mediaQuery:function(s,mql){
+s=s||"";
+var not=false,_14;
+var exp=[];
+var _15=true;
+var _16=s.match(_3.NOT_WHITESPACE);
+for(var i=0;i<_16.length;i++){
+var _17=_16[i];
+if(!_14&&(_17==="not"||_17==="only")){
+if(_17==="not"){
+not=true;
+}
+}else{
+if(!_14){
+_14=_17;
+}else{
+if(_17.charAt(0)==="("){
+var _18=_17.substring(1,_17.length-1).split(":");
+exp[exp.length]={mediaFeature:_18[0],value:_18[1]||null};
+}
+}
+}
+}
+return {getList:function(){
+return mql||null;
+},getValid:function(){
+return _15;
+},getNot:function(){
+return not;
+},getMediaType:function(){
+return _14;
+},getExpressions:function(){
+return exp;
+}};
+},rule:function(s,mql){
+var o={};
+var idx=s.indexOf("{");
+var st=s.substring(0,idx);
+var ss=st.split(",");
+var ds=[];
+var dts=s.substring(idx+1,s.length-1).split(";");
+for(var i=0;i<dts.length;i++){
+ds[ds.length]=_13.declaration(dts[i],o);
+}
+o.getMediaQueryList=function(){
+return mql||null;
+};
+o.getSelectors=function(){
+return ss;
+};
+o.getSelectorText=function(){
+return st;
+};
+o.getDeclarations=function(){
+return ds;
+};
+o.getPropertyValue=function(n){
+for(var i=0;i<ds.length;i++){
+if(ds[i].getProperty()===n){
+return ds[i].getValue();
+}
+}
+return null;
+};
+return o;
+},declaration:function(s,r){
+var idx=s.indexOf(":");
+var p=s.substring(0,idx);
+var v=s.substring(idx+1);
+return {getRule:function(){
+return r||null;
+},getProperty:function(){
+return p;
+},getValue:function(){
+return v;
+}};
+}};
+var _19=function(el){
+if(typeof el.cssHelperText!=="string"){
+return;
+}
+var o={mediaQueryLists:[],rules:[],selectors:{},declarations:[],properties:{}};
+var _1a=o.mediaQueryLists;
+var ors=o.rules;
+var _1b=el.cssHelperText.match(_3.BLOCKS);
+if(_1b!==null){
+for(var i=0;i<_1b.length;i++){
+if(_1b[i].substring(0,7)==="@media "){
+_1a[_1a.length]=_13.mediaQueryList(_1b[i]);
+ors=o.rules=ors.concat(_1a[_1a.length-1].getRules());
+}else{
+ors[ors.length]=_13.rule(_1b[i]);
+}
+}
+}
+var oss=o.selectors;
+var _1c=function(r){
+var ss=r.getSelectors();
+for(var i=0;i<ss.length;i++){
+var n=ss[i];
+if(!oss[n]){
+oss[n]=[];
+}
+oss[n][oss[n].length]=r;
+}
+};
+for(i=0;i<ors.length;i++){
+_1c(ors[i]);
+}
+var ods=o.declarations;
+for(i=0;i<ors.length;i++){
+ods=o.declarations=ods.concat(ors[i].getDeclarations());
+}
+var ops=o.properties;
+for(i=0;i<ods.length;i++){
+var n=ods[i].getProperty();
+if(!ops[n]){
+ops[n]=[];
+}
+ops[n][ops[n].length]=ods[i];
+}
+el.cssHelperParsed=o;
+_4[_4.length]=el;
+return o;
+};
+var _1d=function(el,s){
+el.cssHelperText=_11(s||el.innerHTML);
+return _19(el);
+};
+var _1e=function(){
+_5=true;
+_4=[];
+var _1f=[];
+var _20=function(){
+for(var i=0;i<_1f.length;i++){
+_19(_1f[i]);
+}
+var _21=document.getElementsByTagName("style");
+for(i=0;i<_21.length;i++){
+_1d(_21[i]);
+}
+_5=false;
+_8();
+};
+var _22=document.getElementsByTagName("link");
+for(var i=0;i<_22.length;i++){
+var _23=_22[i];
+if(_23.getAttribute("rel").indexOf("style")>-1&&_23.href&&_23.href.length!==0&&!_23.disabled){
+_1f[_1f.length]=_23;
+}
+}
+if(_1f.length>0){
+var c=0;
+var _24=function(){
+c++;
+if(c===_1f.length){
+_20();
+}
+};
+var _25=function(_26){
+var _27=_26.href;
+_c(_27,function(_28){
+_28=_11(_28).replace(_3.RELATIVE_URLS,"url("+_27.substring(0,_27.lastIndexOf("/"))+"/$1)");
+_26.cssHelperText=_28;
+_24();
+},_24);
+};
+for(i=0;i<_1f.length;i++){
+_25(_1f[i]);
+}
+}else{
+_20();
+}
+};
+var _29={mediaQueryLists:"array",rules:"array",selectors:"object",declarations:"array",properties:"object"};
+var _2a={mediaQueryLists:null,rules:null,selectors:null,declarations:null,properties:null};
+var _2b=function(_2c,v){
+if(_2a[_2c]!==null){
+if(_29[_2c]==="array"){
+return (_2a[_2c]=_2a[_2c].concat(v));
+}else{
+var c=_2a[_2c];
+for(var n in v){
+if(v.hasOwnProperty(n)){
+if(!c[n]){
+c[n]=v[n];
+}else{
+c[n]=c[n].concat(v[n]);
+}
+}
+}
+return c;
+}
+}
+};
+var _2d=function(_2e){
+_2a[_2e]=(_29[_2e]==="array")?[]:{};
+for(var i=0;i<_4.length;i++){
+_2b(_2e,_4[i].cssHelperParsed[_2e]);
+}
+return _2a[_2e];
+};
+domReady(function(){
+var els=document.body.getElementsByTagName("*");
+for(var i=0;i<els.length;i++){
+els[i].checkedByCssHelper=true;
+}
+if(document.implementation.hasFeature("MutationEvents","2.0")||window.MutationEvent){
+document.body.addEventListener("DOMNodeInserted",function(e){
+var el=e.target;
+if(el.nodeType===1){
+_a("DOMElementInserted",el);
+el.checkedByCssHelper=true;
+}
+},false);
+}else{
+setInterval(function(){
+var els=document.body.getElementsByTagName("*");
+for(var i=0;i<els.length;i++){
+if(!els[i].checkedByCssHelper){
+_a("DOMElementInserted",els[i]);
+els[i].checkedByCssHelper=true;
+}
+}
+},1000);
+}
+});
+var _2f=function(d){
+if(typeof window.innerWidth!="undefined"){
+return window["inner"+d];
+}else{
+if(typeof document.documentElement!="undefined"&&typeof document.documentElement.clientWidth!="undefined"&&document.documentElement.clientWidth!=0){
+return document.documentElement["client"+d];
+}
+}
+};
+return {addStyle:function(s,_30){
+var el=document.createElement("style");
+el.setAttribute("type","text/css");
+document.getElementsByTagName("head")[0].appendChild(el);
+if(el.styleSheet){
+el.styleSheet.cssText=s;
+}else{
+el.appendChild(document.createTextNode(s));
+}
+el.addedWithCssHelper=true;
+if(typeof _30==="undefined"||_30===true){
+cssHelper.parsed(function(_31){
+var o=_1d(el,s);
+for(var n in o){
+if(o.hasOwnProperty(n)){
+_2b(n,o[n]);
+}
+}
+_a("newStyleParsed",el);
+});
+}else{
+el.parsingDisallowed=true;
+}
+return el;
+},removeStyle:function(el){
+return el.parentNode.removeChild(el);
+},parsed:function(fn){
+if(_5){
+_7(fn);
+}else{
+if(typeof _4!=="undefined"){
+if(typeof fn==="function"){
+fn(_4);
+}
+}else{
+_7(fn);
+_1e();
+}
+}
+},mediaQueryLists:function(fn){
+cssHelper.parsed(function(_32){
+fn(_2a.mediaQueryLists||_2d("mediaQueryLists"));
+});
+},rules:function(fn){
+cssHelper.parsed(function(_33){
+fn(_2a.rules||_2d("rules"));
+});
+},selectors:function(fn){
+cssHelper.parsed(function(_34){
+fn(_2a.selectors||_2d("selectors"));
+});
+},declarations:function(fn){
+cssHelper.parsed(function(_35){
+fn(_2a.declarations||_2d("declarations"));
+});
+},properties:function(fn){
+cssHelper.parsed(function(_36){
+fn(_2a.properties||_2d("properties"));
+});
+},broadcast:_a,addListener:function(n,fn){
+if(typeof fn==="function"){
+if(!_9[n]){
+_9[n]={listeners:[]};
+}
+_9[n].listeners[_9[n].listeners.length]=fn;
+}
+},removeListener:function(n,fn){
+if(typeof fn==="function"&&_9[n]){
+var ls=_9[n].listeners;
+for(var i=0;i<ls.length;i++){
+if(ls[i]===fn){
+ls.splice(i,1);
+i-=1;
+}
+}
+}
+},getViewportWidth:function(){
+return _2f("Width");
+},getViewportHeight:function(){
+return _2f("Height");
+}};
+}();
+domReady(function enableCssMediaQueries(){
+var _37;
+var _38={LENGTH_UNIT:/[0-9]+(em|ex|px|in|cm|mm|pt|pc)$/,RESOLUTION_UNIT:/[0-9]+(dpi|dpcm)$/,ASPECT_RATIO:/^[0-9]+\/[0-9]+$/,ABSOLUTE_VALUE:/^[0-9]*(\.[0-9]+)*$/};
+var _39=[];
+var _3a=function(){
+var id="css3-mediaqueries-test";
+var el=document.createElement("div");
+el.id=id;
+var _3b=cssHelper.addStyle("@media all and (width) { #"+id+" { width: 1px !important; } }",false);
+document.body.appendChild(el);
+var ret=el.offsetWidth===1;
+_3b.parentNode.removeChild(_3b);
+el.parentNode.removeChild(el);
+_3a=function(){
+return ret;
+};
+return ret;
+};
+var _3c=function(){
+_37=document.createElement("div");
+_37.style.cssText="position:absolute;top:-9999em;left:-9999em;"+"margin:0;border:none;padding:0;width:1em;font-size:1em;";
+document.body.appendChild(_37);
+if(_37.offsetWidth!==16){
+_37.style.fontSize=16/_37.offsetWidth+"em";
+}
+_37.style.width="";
+};
+var _3d=function(_3e){
+_37.style.width=_3e;
+var _3f=_37.offsetWidth;
+_37.style.width="";
+return _3f;
+};
+var _40=function(_41,_42){
+var l=_41.length;
+var min=(_41.substring(0,4)==="min-");
+var max=(!min&&_41.substring(0,4)==="max-");
+if(_42!==null){
+var _43;
+var _44;
+if(_38.LENGTH_UNIT.exec(_42)){
+_43="length";
+_44=_3d(_42);
+}else{
+if(_38.RESOLUTION_UNIT.exec(_42)){
+_43="resolution";
+_44=parseInt(_42,10);
+var _45=_42.substring((_44+"").length);
+}else{
+if(_38.ASPECT_RATIO.exec(_42)){
+_43="aspect-ratio";
+_44=_42.split("/");
+}else{
+if(_38.ABSOLUTE_VALUE){
+_43="absolute";
+_44=_42;
+}else{
+_43="unknown";
+}
+}
+}
+}
+}
+var _46,_47;
+if("device-width"===_41.substring(l-12,l)){
+_46=screen.width;
+if(_42!==null){
+if(_43==="length"){
+return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44));
+}else{
+return false;
+}
+}else{
+return _46>0;
+}
+}else{
+if("device-height"===_41.substring(l-13,l)){
+_47=screen.height;
+if(_42!==null){
+if(_43==="length"){
+return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44));
+}else{
+return false;
+}
+}else{
+return _47>0;
+}
+}else{
+if("width"===_41.substring(l-5,l)){
+_46=document.documentElement.clientWidth||document.body.clientWidth;
+if(_42!==null){
+if(_43==="length"){
+return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44));
+}else{
+return false;
+}
+}else{
+return _46>0;
+}
+}else{
+if("height"===_41.substring(l-6,l)){
+_47=document.documentElement.clientHeight||document.body.clientHeight;
+if(_42!==null){
+if(_43==="length"){
+return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44));
+}else{
+return false;
+}
+}else{
+return _47>0;
+}
+}else{
+if("device-aspect-ratio"===_41.substring(l-19,l)){
+return _43==="aspect-ratio"&&screen.width*_44[1]===screen.height*_44[0];
+}else{
+if("color-index"===_41.substring(l-11,l)){
+var _48=Math.pow(2,screen.colorDepth);
+if(_42!==null){
+if(_43==="absolute"){
+return ((min&&_48>=_44)||(max&&_48<_44)||(!min&&!max&&_48===_44));
+}else{
+return false;
+}
+}else{
+return _48>0;
+}
+}else{
+if("color"===_41.substring(l-5,l)){
+var _49=screen.colorDepth;
+if(_42!==null){
+if(_43==="absolute"){
+return ((min&&_49>=_44)||(max&&_49<_44)||(!min&&!max&&_49===_44));
+}else{
+return false;
+}
+}else{
+return _49>0;
+}
+}else{
+if("resolution"===_41.substring(l-10,l)){
+var res;
+if(_45==="dpcm"){
+res=_3d("1cm");
+}else{
+res=_3d("1in");
+}
+if(_42!==null){
+if(_43==="resolution"){
+return ((min&&res>=_44)||(max&&res<_44)||(!min&&!max&&res===_44));
+}else{
+return false;
+}
+}else{
+return res>0;
+}
+}else{
+return false;
+}
+}
+}
+}
+}
+}
+}
+}
+};
+var _4a=function(mq){
+var _4b=mq.getValid();
+var _4c=mq.getExpressions();
+var l=_4c.length;
+if(l>0){
+for(var i=0;i<l&&_4b;i++){
+_4b=_40(_4c[i].mediaFeature,_4c[i].value);
+}
+var not=mq.getNot();
+return (_4b&&!not||not&&!_4b);
+}
+};
+var _4d=function(mql){
+var mqs=mql.getMediaQueries();
+var t={};
+for(var i=0;i<mqs.length;i++){
+if(_4a(mqs[i])){
+t[mqs[i].getMediaType()]=true;
+}
+}
+var s=[],c=0;
+for(var n in t){
+if(t.hasOwnProperty(n)){
+if(c>0){
+s[c++]=",";
+}
+s[c++]=n;
+}
+}
+if(s.length>0){
+_39[_39.length]=cssHelper.addStyle("@media "+s.join("")+"{"+mql.getCssText()+"}",false);
+}
+};
+var _4e=function(_4f){
+for(var i=0;i<_4f.length;i++){
+_4d(_4f[i]);
+}
+if(ua.ie){
+document.documentElement.style.display="block";
+setTimeout(function(){
+document.documentElement.style.display="";
+},0);
+setTimeout(function(){
+cssHelper.broadcast("cssMediaQueriesTested");
+},100);
+}else{
+cssHelper.broadcast("cssMediaQueriesTested");
+}
+};
+var _50=function(){
+for(var i=0;i<_39.length;i++){
+cssHelper.removeStyle(_39[i]);
+}
+_39=[];
+cssHelper.mediaQueryLists(_4e);
+};
+var _51=0;
+var _52=function(){
+var _53=cssHelper.getViewportWidth();
+var _54=cssHelper.getViewportHeight();
+if(ua.ie){
+var el=document.createElement("div");
+el.style.position="absolute";
+el.style.top="-9999em";
+el.style.overflow="scroll";
+document.body.appendChild(el);
+_51=el.offsetWidth-el.clientWidth;
+document.body.removeChild(el);
+}
+var _55;
+var _56=function(){
+var vpw=cssHelper.getViewportWidth();
+var vph=cssHelper.getViewportHeight();
+if(Math.abs(vpw-_53)>_51||Math.abs(vph-_54)>_51){
+_53=vpw;
+_54=vph;
+clearTimeout(_55);
+_55=setTimeout(function(){
+if(!_3a()){
+_50();
+}else{
+cssHelper.broadcast("cssMediaQueriesTested");
+}
+},500);
+}
+};
+window.onresize=function(){
+var x=window.onresize||function(){
+};
+return function(){
+x();
+_56();
+};
+}();
+};
+var _57=document.documentElement;
+_57.style.marginLeft="-32767px";
+setTimeout(function(){
+_57.style.marginTop="";
+},20000);
+return function(){
+if(!_3a()){
+cssHelper.addListener("newStyleParsed",function(el){
+_4e(el.cssHelperParsed.mediaQueryLists);
+});
+cssHelper.addListener("cssMediaQueriesTested",function(){
+if(ua.ie){
+_57.style.width="1px";
+}
+setTimeout(function(){
+_57.style.width="";
+_57.style.marginLeft="";
+},0);
+cssHelper.removeListener("cssMediaQueriesTested",arguments.callee);
+});
+_3c();
+_50();
+}else{
+_57.style.marginLeft="";
+}
+_52();
+};
+}());
+try{
+document.execCommand("BackgroundImageCache",false,true);
+}
+catch(e){
+}
+

site/Новая папка/index.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width; initial-scale=1.0">
+		<link rel="stylesheet" type="text/css" href="style.css">
+		<link rel="stylesheet" type="text/css" href="media-queries.css">
+		<title>Шаблон сайта BradPitt | Адаптивный дизайн</title>
+	</head>
+	<body>
+		<div class="wrapper">
+			<div class="header">
+				<div class="headerContent">
+					<div class="logo"><a href="">Blue<span class="pink">Pink</span><span class="gray">.com</span></a></div>
+					<ul class="nav">
+						<li><a href="#" class="active">Home</a></li>
+						<li><a href="#">About</a></li>
+						<li><a href="#">Blogs</a></li>
+						<li><a href="#">Work</a></li>
+						<li><a href="#">News</a></li>
+						<li><a href="#">Contacts</a></li>
+					</ul>
+				</div>
+			</div>
+			<div class="content">
+				<div class="leftCol">
+					<ul class="leftNav">
+						<li><a href="#">Natus error sit voluptatem</a></li>
+						<li><a href="#">Et veritatis quasi</a></li>
+						<li><a href="#">Vitae dicta sunt explicabo</a></li>
+						<li><a href="#">Nectun sed quia conseq</a></li>
+						<li><a href="#">Natus error sit voluptatem</a></li>
+						<li><a href="#">Vitae dicta sunt explicabo</a></li>
+						<li><a href="#">Et veritatis quasi</a></li>
+						<li><a href="#">Nectun sed quia conseq</a></li>
+						<li><a href="#">Natus error sit voluptatem</a></li>
+						<li><a href="#">Vitae dicta sunt explicabo</a></li>
+					</ul>
+					<div class="block">
+						<h3>Left Block</h3>
+						<p><i>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</i></p>
+						<p><a href="#" class="more">Read more »</a></p>
+					</div>
+				</div>
+				<div class="main">
+					<h1>Lorem ipsum dolor sit amet</h1>
+					<p>Lorem ipsum dolor sit amet, <a href="#" title="link">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <b title="bold">reprehenderit in voluptate velit</b> esse cillum dolore eu fugiat nulla pariatur. <i title="italic">Excepteur sint occaecat</i> cupidatat non proident, sunt in culpa qui officia deserunt.</p>
+					<!--Изображения-->
+					<h2>Images</h2>
+					<p><img src="images/img.jpg"><img src="images/img.jpg"><img src="images/img.jpg"></p>
+					<!--Списки и определения-->
+					<h2>Lists and Descriptions</h2>
+					<div class="row">
+						<div class="col">
+							<ul>
+								<li>Sed ut perspiciatis unde omnis iste</li>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>At vero eos et accusamus et iusto</li>
+								<li>Et harum quidem rerum facilis</li>
+							</ul>
+						</div>
+						<div class="col">
+							<ol>
+								<li>Sed ut perspiciatis unde omnis iste</li>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>At vero eos et accusamus et iusto</li>
+								<li>Et harum quidem rerum facilis</li>						
+							</ol>
+						</div>
+						<div class="col">
+							<dl>
+								<dt>Sed ut perspiciatis unde omnis iste</dt>
+								<dd>Lorem ipsum dolor sit amet</dd>
+								<dt>At vero eos et accusamus et iusto</dt>
+								<dd>Et harum quidem rerum facilis</dd>
+							</dl>
+						</div>
+					</div>
+					<!--Таблица-->
+					<h2>Table</h2>	
+					<div class="mobile">
+						<table class="bordered">
+							<thead>
+								<tr>
+									<th>Purcus</th>
+									<th>Hantis</th>
+									<th>Mastron</th>
+									<th>Jevicon</th>
+									<th>Language</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>Gitsome</td>
+									<td>Some one</td>
+									<td>Take mose</td>
+									<td>Likbes</td>
+									<td>Racounter</td>
+								</tr>
+								<tr>
+									<td>Linkage</td>
+									<td>Fordor</td>
+									<td>Miad ron me</td>
+									<td>Diablo core</td>
+									<td>Tidbade</td>
+								</tr>
+								<tr>
+									<td>Hicura</td>
+									<td>Warecom</td>
+									<td>Xamicon</td>
+									<td>Yamama</td>
+									<td>Udoricano</td>
+								</tr>
+								<tr>
+									<td>Lavistaro</td>
+									<td>Micanorta</td>
+									<td>Ebloconte ma</td>
+									<td>Quad ri port</td>
+									<td>Timesquer</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<!--Формы-->
+					<h2>Forms</h2>
+					<form>
+						<div class="row">
+							<label>Text:</label>
+							<input type="text" placeholder="Input type text">
+						</div>
+						<div class="row">
+							<label>Select:</label>
+							<select>
+								<option>Option</option>
+								<option>Option 1</option>
+								<option>Option 2</option>
+								<option>Option 3</option>
+							</select>
+						</div>
+						<div class="row">
+							<label><input type="checkbox">Sed ut perspiciatis unde omnis iste natus</label>
+							<label><input type="radio" name="radiobutton" value="radiobutton">Lorem ipsum dolor sit amet, consectetur</label>
+						</div>
+						<div class="row">
+							<label>Textarea:</label>
+							<textarea></textarea>
+						</div>
+						<div class="row">
+							<button type="submit">Button</button>
+						</div>
+					</form>
+				</div>
+			</div>
+			<div class="footer">
+				<p>&copy; Footer content <a href="#">Link footer</a></p>
+			</div>
+		</div>
+		<script src="css3-mediaqueries.js"></script>
+	</body>
+</html>

site/Новая папка/main.php

@@ -0,0 +1,3 @@
+<?php
+
+index-2-box.html

site/Новая папка/media-queries.css

@@ -0,0 +1,72 @@
+/*Размер экрана меньше 980px*/
+@media screen and (max-width: 980px) {
+	.wrapper {
+		width: 100%;
+		padding: 0;
+	}
+	
+	ul.nav li a {
+		padding: 0 20px;
+	}
+	
+	.headerContent,.content {
+		border-radius: 0;
+		-webkit-border-radius: 0;
+		-moz-border-radius: 0;
+	}
+}
+/*Размер экрана меньше 650px*/
+@media screen and (max-width: 650px) {
+	.leftCol {
+		float: none;
+		width: 100%;
+	}
+	
+	.headerContent {
+		height: auto;
+		padding-bottom: 10px; 
+	}
+	
+	.logo {
+		display: block;
+		text-align: center;
+		float: none;
+	}
+	
+	ul.nav {
+		float: none;
+	}
+}
+/*Размер экрана меньше 480px*/
+@media screen and (max-width: 480px) {
+	html {
+		-webkit-text-size-adjust: none; /*Отключение регулировки размера шрифта*/
+	}
+	
+}
+/*Размер экрана меньше 320px*/
+@media screen and (max-width: 320px) {	
+	.mobile {
+		overflow-x: auto;
+		margin: 0;
+		padding: 0;
+	}
+	
+	textarea {
+		width: 200px;
+	}
+}
+/*Эластичные изображения*/
+img {
+	max-width: 100%;
+	height: auto;
+	width: auto\9;/*For ie8*/
+}
+
+/*Эластичные встраиваемые видео*/
+.video embed,
+.video object,
+.video iframe {
+	width: 100%;
+	height: auto;
+}

site/Новая папка/style.css

@@ -0,0 +1,467 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+html,body {
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	background: #373e47 url("images/bg.jpg") repeat;
+	font-family: Arial;
+	font-size: 12px;
+	color: #e4e4e4;
+	line-height: 18px;
+	text-shadow: 0 1px 0 rgba(0,0,0,0.75);
+}
+
+::selection {
+	background-color: #a45f93;
+	color: white;
+	text-shadow: none;
+}
+
+::-moz-selection {
+	background-color: #a45f93;
+	color: white;
+	text-shadow: none;
+}
+
+a {
+	color: #ff8de3;
+	text-decoration: underline;
+}
+
+p {
+	margin-bottom: 10px;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	color: white;
+	line-height: normal;
+}
+
+h1 {
+	font-size: 18px;
+}
+
+h2 {
+	font-size: 16px;
+	margin-top: 15px;
+}
+
+h3 {
+	font-size: 14px;
+}
+
+h1+p,h2+p,h3+p {
+	margin-top: 3px;
+}
+
+a img {
+	border: none;
+	outline: none;
+}
+
+ul,ol,dl {
+	margin: 0 0 0 30px;
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	font-style: italic;
+}
+
+input,button,textarea {
+	display: inline-block;
+}
+
+input[type=text],textarea,select {
+	padding: 5px;
+	height: auto;
+	border: 1px solid white;
+	background-color: #f0f0f0;
+	box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
+	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
+	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
+}
+
+input[type=text],textarea,button {
+	-webkit-transition: all linear 0.2s;
+	-moz-transition: all linear 0.2s;
+	-ms-transition: all linear 0.2s;
+	-o-transition: all linear 0.2s;
+	transition: all linear 0.2s;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+}
+
+input[type=checkbox],input[type=radio] {
+	margin: 3px 5px 0 0;
+	float: left;
+}
+
+input[type=text] {
+	width: 200px;
+}
+
+select {
+	width: 210px;
+}
+
+textarea {
+	width: 300px;
+	height: 100px;
+}
+
+label {
+	display: block;
+	vertical-align: middle;
+	color: #ebd4e5;
+}
+
+input:focus,textarea:focus,select:focus {
+	outline: none;
+	box-shadow: none;
+	background-color: white;
+}
+
+input:-moz-placeholder {
+  color: #9c9c9c;
+}
+
+input::-webkit-input-placeholder {
+  color: #9c9c9c;
+}
+
+button {
+	cursor: pointer;
+	color: white;
+	font-size: 12px;
+	background-color: #a45f93;
+	background-repeat: no-repeat;
+    background-image: -ms-linear-gradient(top, #b76da5, #a45f93);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b76da5), to(#a45f93));
+    background-image: -webkit-linear-gradient(top, #b76da5, #a45f93);
+    background-image: -o-linear-gradient(top, #b76da5, #a45f93);
+    background-image: linear-gradient(top, #b76da5, #a45f93);
+    background-image: -moz-linear-gradient(top, #b76da5, #a45f93);
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#b76da5', endColorstr='#a45f93', GradientType=0);
+	border: none;
+	padding: 8px 20px 9px;
+	box-shadow: 0 2px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
+	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
+	-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
+	text-shadow: none;
+	height: auto;
+}
+
+button:hover {
+	background-position: 0 -15px;
+}
+
+*:first-child+html button {
+	width: 90px;
+	height: 35px;
+}
+
+.row {
+	overflow: hidden;
+	margin: 10px 0;
+	padding: 3px 0;
+}
+
+.col {
+	float: left;
+	margin-right: 15px;
+	overflow: hidden;
+}
+
+table.bordered {
+	margin: 10px 0;
+	padding: 0;
+	border-collapse: separate;
+	*border-collapse: collapse;
+	border: 1px solid #292e35;
+	width: 100%;
+	background-color: #373e47;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-spacing: 0;
+}
+
+table.bordered th, table.bordered td {
+	padding: 5px;
+	vertical-align: top;
+	border-left: 1px solid #4c545e;
+}
+
+table.bordered td {
+	border-top: 1px solid #4c545e;
+}
+
+table.bordered thead tr th:first-child,
+table.bordered tbody tr td:first-child {
+	border-left: none;
+}
+
+table.bordered th {
+	background-color: #292e35;
+	text-align: left;
+	font-weight: bold;
+	color: white;
+}
+
+table.bordered tbody tr:hover {
+	background-color: #2e333b;
+}
+
+table.bordered thead tr:first-child th:first-child {
+	border-radius: 3px 0 0 0;
+	-webkit-border-radius: 3px 0 0 0;
+	-moz-border-radius: 3px 0 0 0;
+}
+
+table.bordered thead:first-child th:last-child {
+	border-radius: 0 3px 0 0;
+	-webkit-border-radius: 0 3px 0 0;
+	-moz-border-radius: 0 3px 0 0;
+}
+
+table.bordered tbody tr:last-child td:first-child {
+	border-radius: 0 0 0 3px;
+	-webkit-border-radius: 0 0 0 3px;
+	-moz-border-radius: 0 0 0 3px;
+}
+
+table.bordered tbody tr:last-child td:last-child {
+	border-radius: 0 0 3px 0;
+	-webkit-border-radius: 0 0 3px 0;
+	-moz-border-radius: 0 0 3px 0;
+}
+
+.wrapper {
+	width: 980px;
+	padding: 0 10px;
+	margin: 0 auto;
+	min-height: 100%;
+	position: relative;
+	
+}
+/*Шапка*/
+.header {
+	padding-top: 20px;
+	margin-bottom: 20px;
+}
+
+.headerContent {
+	box-shadow: 0 3px 2px rgba(0,0,0,0.3);
+	-webkit-box-shadow: 0 3px 2px rgba(0,0,0,0.3);
+	-moz-box-shadow: 0 3px 2px rgba(0,0,0,0.3);
+	background-color: #f2f2f2;
+	background-repeat: no-repeat;
+    background-image: -ms-linear-gradient(top, #f2f2f2, #e4e4e4);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e4e4e4));
+    background-image: -webkit-linear-gradient(top, #f2f2f2, #e4e4e4);
+    background-image: -o-linear-gradient(top, #f2f2f2, #e4e4e4);
+    background-image: linear-gradient(top, #f2f2f2, #e4e4e4);
+    background-image: -moz-linear-gradient(top, #f2f2f2, #e4e4e4);
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e4e4e4', GradientType=0);
+	height: 33px;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	padding-top: 10px;
+}
+
+.logo {
+	display: inline-block;
+	float: left;
+	font-weight: bold;
+}
+
+.logo a {
+	text-decoration: none;
+	font-size: 24px;
+	text-shadow: 0 1px 0 white;
+	color: #373e47;
+	padding-left: 10px;
+}
+
+.logo a:hover {
+	color: #a45f93;
+}
+
+*:first-child+html .logo a {
+	line-height: normal;
+}
+
+.pink {
+	color: #a45f93;
+}
+
+.logo a:hover .pink {
+	color: #373e47;
+}
+
+.gray {
+	color: #8b95a4;
+	font-size: 18px;
+}
+
+/*Навигация*/
+ul.nav {
+	margin: 0;
+	padding: 3px 0 0 0;
+	overflow: hidden;
+	float: right;
+}
+
+ul.nav li {
+	float: left;
+	list-style: none;
+	padding: 0;
+}
+
+ul.nav li a {
+	font-size: 14px;
+	font-weight: bold;
+	color: white;
+	text-decoration: none;
+	padding: 0 30px;
+	display: block;
+	color: #143567;
+	text-shadow: 0 1px 0 white;
+}
+
+ul.nav li a.active {
+	color: #a45f93;
+}
+
+ul.nav li a:hover {
+	color: #a45f93;
+}
+/*Контент*/
+.content {
+	padding: 10px;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border: 1px solid #67707d;
+	background-color: #475363;
+	background-color: rgba(87,103,127,0.5);
+	overflow: hidden;
+}
+
+*:first-child+html .content {
+	background-color: #475363;
+}
+/*Левая колонка*/
+.leftCol {
+	float: left;
+	margin-right: 10px;
+	width: 220px;
+}
+
+ul.leftNav {
+	margin: 0 0 20px 0;
+	padding: 0;
+	background-color: #373e47;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 2px 1px rgba(0,0,0,0.3);
+	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 2px 1px rgba(0,0,0,0.3);
+	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 2px 1px rgba(0,0,0,0.3);
+}
+
+ul.leftNav li {
+	list-style: none;
+}
+
+ul.leftNav li a {
+	color: #e4e4e4;
+	text-decoration: none;
+	padding: 8px 10px 8px 30px;
+	display: block;
+	border-top: 1px solid #4c545e;
+	background: url("images/arrow-right.png") 13px 50% no-repeat;
+}
+
+ul.leftNav li:first-child a {
+	border-top: none;
+}
+
+ul.leftNav li a:hover {
+	background-color: #292e35;
+}
+
+ul.leftNav li:first-child a {
+	border-radius: 3px 3px 0 0;
+	-webkit-border-radius: 3px 3px 0 0;
+	-moz-border-radius: 3px 3px 0 0;
+}
+
+ul.leftNav li:last-child a {
+	border-radius: 0 0 3px 3px;
+	-webkit-border-radius: 0 0 3px 3px;
+	-moz-border-radius: 0 0 3px 3px;
+}
+
+.block {
+	margin: 0 0 20px 0;
+	background-color: #373e47;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 2px 1px rgba(0,0,0,0.3);
+	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 2px 1px rgba(0,0,0,0.3);
+	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3), inset 0 2px 1px rgba(0,0,0,0.3);
+}
+
+.block>h3 {
+	padding: 8px 10px 0;
+}
+
+.block p {
+	margin: 0;
+	padding: 10px 10px 0;
+}
+
+.block a.more {
+	padding-bottom: 10px;
+	display: block;
+}
+
+.main {
+	overflow: hidden;
+}
+
+.main img {
+	margin-right: 15px;
+	border: 10px solid #697689;
+	-webkit-transition: all linear 0.2s;
+	-moz-transition: all linear 0.2s;
+	-ms-transition: all linear 0.2s;
+	-o-transition: all linear 0.2s;
+	transition: all linear 0.2s;
+}
+
+.main img:hover {
+	border: 10px solid #a45f93;
+}
+/*Подвал*/
+.footer {
+
+}
+
+.footer p {
+	text-align: center;
+}

site/Новая папка/Ссылки/HTML+CSS шаблон Cherry.URL

@@ -0,0 +1,6 @@
+[InternetShortcut]
+URL=http://psd-html-css.ru/templates/htmlcss-shablon-cherry
+IDList=
+HotKey=0
+IconFile=C:\Users\igor\AppData\Local\Mozilla\Firefox\Profiles\xdvdepx0.default\shortcutCache\fmdfXa4d5K3mbqA6r6Y1mg==.ico
+IconIndex=0

site/Новая папка/Ссылки/cherry/index.htm

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Шаблоны сайтов</title>
+		<meta name="description" content="">
+		<meta name="keywords" content="">
+		<link rel="stylesheet" type="text/css" href="style.css" media="all">
+	</head>
+	<body>
+		<div class="wrapper">
+			<div class="header">
+				<div class="headerContent">
+					<div class="left"><h1><a href="#">Cherry</a></h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div>
+					<div class="right">
+						<form class="search">
+							<input type="text" placeholder="Search...">
+							<input type="image" src="images/search.png" title="Search">
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="slider">
+				<div class="itemSlider">
+					<div class="bgSlide"><img src="images/bg-slide.jpg"></div>
+					<div class="descSlide">
+						<h1>Eaten berry</h1>
+						<p>and go for a walk</p>
+						<span>Duis aute irure dolor...</span>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					</div>
+				</div>
+			</div>
+			<div class="nav">
+				<ul class="menu">
+					<li><a href="#">Home</a></li>
+					<li><a href="#">Sliders</a></li>
+					<li><a href="#">Portfolio</a></li>
+					<li><a href="#">Styles</a></li>
+					<li><a href="#">Blog</a></li>
+					<li><a href="#">Cherry</a></li>
+					<li><a href="#">Contact</a></li>
+				</ul>
+			</div>
+			<div class="breadcrumbs"><a href="#">Home</a> / <a href="#">Another Page</a> / This page</div>
+			<div class="main">
+				<div class="leftCol">
+					<form>
+						<h2>Contact us</h2>
+						<input type="text" placeholder="Lorem ipsum">
+						<input type="text" placeholder="Dolor sit">
+						<input type="text" disabled="disabled" placeholder="Disabled">
+						<input type="text" placeholder="Consectetur">
+						<select>
+							<option>1</option>
+							<option>2</option>
+							<option>3</option>
+						</select>
+						<div class="row">
+							<h4>Radio</h4>
+							<input type="radio">
+							<label>Lorem ipsum dolor sit amet</label>
+							<div class="clear"></div>
+							<input type="radio">
+							<label>Duis aute irure dolor</label>
+							<div class="clear"></div>
+							<input type="radio">
+							<label>Excepteur sint occaecat</label>
+							<div class="clear"></div>
+						</div>
+						<div class="row">
+							<h4>Checkbox</h4>
+							<input type="checkbox" />
+							<label>Duis aute irure dolor</label>
+							<div class="clear"></div>
+							<input type="checkbox" />
+							<label>Excepteur sint occaecat</label>
+							<div class="clear"></div>
+						</div>
+						<button type="submit" class="minWidth">Lorem ipsum</button>
+						<button type="reset" class="minWidth">Reset</button>
+					</form>
+					<div class="row">
+						<h2>Headline</h2>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+						<p><a href="#">More about</a></p>
+					</div>
+				</div>
+				<div class="rightCol">
+					<h1>What We Do…</h1>
+					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate velit esse cillum dolore</a> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					<ul class="img">
+						<li><a href="#"><img src="images/img1.png"></a></li>
+						<li><a href="#"><img src="images/img2.png"></a></li>
+						<li><a href="#"><img src="images/img3.png"></a></li>
+					</ul>
+					<h1>Lists</h1>
+					<div class="row">
+						<div class="span">
+							<h4>List style type circle <code>&lt;ul&gt;</code></h4>
+							<ul>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Sed ut perspiciatis unde</li>
+								<li>At vero eos et accusamus
+									<ul>
+										<li>Lorem ipsum dolor sit amet</li>
+										<li>Sed ut perspiciatis unde</li>
+										<li>At vero eos et accusamus</li>
+									</ul>
+								</li>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Sed ut perspiciatis unde</li>
+								<li>At vero eos et accusamus</li>
+							</ul>
+						</div>
+						<div class="span">
+							<h4>Unstyled <code>&lt;ul class="unstyled"&gt;</code></h4>
+							<ul class="unstyled">
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Sed ut perspiciatis unde</li>
+								<li>At vero eos et accusamus
+									<ul>
+										<li>Lorem ipsum dolor sit amet</li>
+										<li>Sed ut perspiciatis unde</li>
+										<li>At vero eos et accusamus</li>
+									</ul>
+								</li>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Sed ut perspiciatis unde</li>
+								<li>At vero eos et accusamus</li>
+							</ul>
+						</div>
+						<div class="span">
+							<h4>Ordered <code>&lt;ol&gt;</code></h4>
+							<ol>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Sed ut perspiciatis unde</li>
+								<li>At vero eos et accusamus</li>
+								<li>Lorem ipsum dolor sit amet</li>
+								<li>Sed ut perspiciatis unde</li>
+								<li>At vero eos et accusamus</li>
+							</ol>
+						</div>
+					</div>
+					<h1>Tables</h1>
+					<table>
+						<thead>
+							<tr>
+								<th>#</th>
+								<th>Lorem</th>
+								<th>Ipsum</th>
+								<th>Dolor</th>
+								<th>Sit</th>
+								<th>Amet</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>1</td>
+								<td>Lorem ipsum</td>
+								<td>At vero eos</td>
+								<td>Sed ut</td>
+								<td>Dolor sit amet</td>
+								<td><a href="#">Epd.</a></td>
+							</tr>
+							<tr>
+								<td>2</td>
+								<td>Sed ut</td>
+								<td>Dolor sit amet</td>
+								<td>Lorem ipsum</td>
+								<td>At vero eos</td>
+								<td><a href="#">Epd.</a></td>
+							</tr>
+							<tr>
+								<td>3</td>
+								<td>At vero eos</td>
+								<td>Lorem ipsum</td>
+								<td>Sed ut</td>
+								<td>Dolor sit amet</td>
+								<td><a href="#">Epd.</a></td>
+							</tr>
+							<tr>
+								<td>4</td>
+								<td>Dolor sit amet</td>
+								<td>At vero eos</td>
+								<td>Lorem ipsum</td>
+								<td>Sed ut</td>
+								<td><a href="#">Epd.</a></td>
+							</tr>
+							<tr>
+								<td>5</td>
+								<td>At vero eos</td>
+								<td>Lorem ipsum</td>
+								<td>Sed ut</td>
+								<td>Dolor sit amet</td>
+								<td><a href="#">Epd.</a></td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+			<div class="footer">
+				<div class="footerContent">
+					<div class="span1">
+						<h1>Sed ut</h1>
+						<div class="borderBottom"></div>
+						<p>Lorem ipsum dolor sit</p>
+						<ul class="clock">
+							<li>Nights! Absolutely No Extra Charge</li>
+							<li>Weekends! Absolutely No Extra Charge</li>
+							<li>Holidays! Absolutely No Extra Charge</li>
+						</ul>
+						<div class="social">
+							<div>Мы в социальных сетях: </div><ul><li><a target="newtab" href="http://www.facebook.com/?sk=app_2309869772"><img src="images/facebook.png"></a></li><li><a target="newtab" href="https://twitter.com/psdhtmlcss"><img src="images/twitter.png" /></a></li><li><img src="images/vk.png" /></li></ul>
+						</div>
+					</div>
+					<div class="span1">
+						<h1>At vero eos</h1>
+						<div class="borderBottom"></div>
+						<p>Lorem ipsum dolor sit</p>
+						<ul>
+							<li>West Hollywood (323) 221-1107</li>
+							<li>Beverly Hills (310) 202-5428</li>
+							<li>Pasadena (626) 296-2664</li>
+							<li>West Hollywood (323) 221-1107</li>
+							<li>Beverly Hills (310) 202-5428</li>
+						</ul>
+						<p><strong>Lorem ipsum dolor sit amet</strong></p>
+					</div>
+					<div class="span1">
+						<h1>Lorem ipsum dolor</h1>
+						<div class="borderBottom"></div>
+						<p>Lorem ipsum dolor sit</p>
+						<ul class="unstyled">
+							<li>Hi-Tech Cherry Company</li>
+							<li><a href="mailto:psdhtmlcss@mail.ru">infocherry@gmail.com</a></li>
+							<li>5104 W. Washington Blvd</li>
+							<li>Los Angeles , CA , 90016 United States</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

site/Новая папка/Ссылки/cherry/style.css

@@ -0,0 +1,714 @@
+html,body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+body {
+	font-family: Arial,Microsoft Sans Serif;
+	font-size: 14px;
+	background: #e7e4e4 url("images/bg.png") repeat;
+	color: #5c646e;
+}
+
+::selection {
+	background-color: #9f385b;
+	color: white;
+}
+
+::-moz-selection {
+	background-color: #9f385b;
+	color: white;
+}
+
+*{
+	margin: 0;
+	padding: 0;
+}
+
+p {
+	margin: 15px 0;
+	line-height: 20px;
+}
+
+a {
+	color: #95161f;
+	text-decoration: underline;
+}
+
+a:hover {
+
+}
+
+a img {
+	border: none;
+	outline: none;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	margin: 0;
+	line-height: normal;
+}
+
+h1 {
+	font-size: 24px;
+	color: #a5adb8;
+	text-transform: capitalize;
+}
+
+h1::first-letter {
+	color: #ae4b5d;
+}
+
+h2 {
+	font-size: 16px;
+	color: #282d33;
+}
+
+h3 {
+	font-size: 16px;
+	color: #9f24f6;
+	margin: 7px 0;
+}
+
+h4 {
+	font-size: 14px;
+	margin: 7px 0;
+}
+
+h5 {
+	
+}
+
+h6 {
+
+}
+
+/*Lists*/
+ul {
+	list-style-type: disc;
+	padding-left: 20px;
+	margin: 0;
+}
+
+ul li, ol li {
+	line-height: 22px;
+}
+
+ul li ul {
+	padding-left: 20px;
+	margin: 0;
+}
+
+ul.unstyled {
+	list-style-type: none;
+	padding-left: 0;
+}
+
+ul.unstyled ul li {
+	list-style-type: disc;
+}
+
+ol {
+	list-style-type: decimal;
+	padding-left: 25px;
+}
+
+code {
+	padding: 1px 3px;
+	background-color: #dedede;
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	font-weight: normal;
+	font-size: 11px;
+}
+
+/*Tables*/
+table {
+    width: 100%;
+    margin: 15px 0;
+    padding: 0;
+    font-size: 12px;
+    border-spacing: 0;
+    border-collapse: separate;
+	-webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+	background-color: #282d33;
+	color: #9da4af;
+}
+
+table th, table td {
+    padding: 7px 12px 6px;
+    line-height: 18px;
+    text-align: left;
+}
+
+table th {
+    color: white;
+	font-weight: bold;
+    vertical-align: middle;
+	background-color: #9c4757;
+}
+
+table td {
+    vertical-align: top;
+    border-top: 1px solid #d8dbde;
+}
+
+table td a {
+	color: #d08b98;
+}
+
+table tbody th {
+    vertical-align: top;
+    border-top: 1px solid #d8dbde;
+}
+
+table th+th,table td+td,table th+td {
+    border-left: 1px solid #d8dbde;
+}
+
+table thead tr:first-child th:first-child, table tbody tr:first-child td:first-child {
+    -webkit-border-radius: 5px 0 0 0;
+    -moz-border-radius: 5px 0 0 0;
+    border-radius: 5px 0 0 0;
+}
+
+table thead tr:first-child th:last-child, table tbody tr:first-child td:last-child {
+    -webkit-border-radius: 0 5px 0 0;
+    -moz-border-radius: 0 5px 0 0;
+    border-radius: 0 5px 0 0;
+}
+
+table tbody tr:last-child td:first-child {
+    -webkit-border-radius: 0 0 0 5px;
+    -moz-border-radius: 0 0 0 5px;
+    border-radius: 0 0 0 5px;
+}
+
+table tbody tr:last-child td:last-child {
+    -webkit-border-radius: 0 0 5px 0;
+    -moz-border-radius: 0 0 5px 0;
+    border-radius: 0 0 5px 0;
+}
+
+table tr:hover {
+    background-color: #622833;
+	color: #d8dbde;
+}
+
+/*Forms*/
+form {
+    display: inline-block;
+}
+
+label {
+    line-height: 24px;
+	margin-left: 3px;
+	float: none;
+}
+
+input,select,textarea {
+    display: inline-block;
+	width: auto;
+    height: 20px;
+    padding: 7px 5px;
+    line-height: 18px;
+    border: 1px solid white;
+	background-color: #e3e4e5;
+	-webkit-transition: background linear 0.2s;
+	-moz-transition: background linear 0.2s;
+	-ms-transition: background linear 0.2s;
+	-o-transition: background linear 0.2s;
+	transition: background linear 0.2s;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	-webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
+	box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
+	margin: 5px 0;
+	font-size: 14px;
+}
+
+input:-moz-placeholder {
+  color: #757575;
+}
+
+input::-webkit-input-placeholder {
+  color: #757575;
+}
+
+input:focus,textarea:focus {
+    background-color: #d6d6d6;
+	outline: none;
+}
+
+select {
+    width: auto;
+    height: auto;
+	border: 1px solid #a2a2a2;
+}
+
+textarea {
+    height: auto;
+}
+
+button {
+    cursor: pointer;
+	display: inline-block;
+	background-color: #95161f;
+	background-repeat: no-repeat;
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0252e), color-stop(25%, #b0252e), to(#95161f));
+	background-image: -webkit-linear-gradient(#b0252e, #b0252e 25%, #95161f);
+	background-image: -moz-linear-gradient(top, #b0252e, #b0252e 25%, #95161f);
+	background-image: -ms-linear-gradient(#b0252e, #b0252e 25%, #95161f);
+	background-image: -o-linear-gradient(#b0252e, #b0252e 25%, #95161f);
+	background-image: linear-gradient(#b0252e, #b0252e 25%, #95161f);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0252e', endColorstr='#95161f', GradientType=0);
+	padding: 10px 18px 11px;	
+	color: white;
+	font-size: 15px;
+	line-height: normal;
+	font-weight: bold;
+	border: 5px solid white;
+	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
+	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+	-webkit-transition: 0.1s linear all;
+	-moz-transition: 0.1s linear all;
+	-ms-transition: 0.1s linear all;
+	-o-transition: 0.1s linear all;
+	transition: 0.1s linear all;
+	margin-bottom: 10px;
+}
+
+button[type=reset] {
+	background-color: #e6e6e6;
+	background-repeat: no-repeat;
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), color-stop(25%, #f5f5f5), to(#e6e6e6));
+	background-image: -webkit-linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
+	background-image: -moz-linear-gradient(top, #f5f5f5, #f5f5f5 25%, #e6e6e6);
+	background-image: -ms-linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
+	background-image: -o-linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
+	background-image: linear-gradient(#f5f5f5, #f5f5f5 25%, #e6e6e6);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e6e6e6', GradientType=0);
+	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
+	color: #666;
+}
+
+button:hover,button[type=reset]:hover {
+    background-position: 0 -15px;
+}
+
+button.minWidth {
+	width: 187px;
+}
+
+input[type=checkbox],input[type=radio] {
+    width: auto;
+    height: auto;
+    margin-left: 0;
+    padding: 0;
+    line-height: normal;
+    float: left;
+    border: none;
+}
+
+input[type=file] {
+    height: 27px;
+    border: none;
+}
+
+input[type=file]:focus, input[type=checkbox]:focus, select:focus {
+    outline: 1px dotted #666;
+}
+
+input[disabled] {
+    cursor: not-allowed;
+	background-color: #d1d1d1;
+	border: 1px solid white;
+	color: #bdbdbd;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+.row {
+	display: block;
+	clear: both;
+	overflow: hidden;
+	margin: 15px 0;
+}
+
+.span,.span1 {
+	float: left;
+	display: inline;
+	
+}
+
+.span {
+	width: 220px;
+	margin-right: 10px;
+}
+
+.span1 {
+	width: 270px;
+	margin: 0 25px;
+}
+
+.left {
+	float: left;
+}
+
+.right {
+	float: right;
+}
+
+.clear {
+	clear: both;
+}
+
+.wrapper {
+	width: 100%;
+	min-height: 100%;
+	position: relative;
+}
+/*Header*/
+.header {
+	width: 100%;
+	height: 72px;
+	background: #2f3441 url("images/bg-header.png") repeat-x;
+}
+
+.header .headerContent {
+	width: 960px;
+	padding: 20px 10px 0;
+	height: 52px;
+	margin: 0 auto;
+}
+
+.headerContent h1 {
+	font-size: 30px;
+	margin: 0;
+	text-transform: uppercase;
+	line-height: 24px;
+}
+
+.headerContent h1 a {
+	text-decoration: none;
+	color: #a5adb8;
+}
+
+.headerContent p {
+	margin: 0;
+	line-height: 18px;
+}
+
+form.search {
+	display: inline-block;
+	float: right;
+}
+
+form.search > input[type=text] {
+	width: 205px;
+	height: 22px;
+	padding: 5px;
+	color: #a5adb8;
+	background-color: #24272d;
+	border: 1px solid #875f66;
+	font-size: 14px;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	float: left;
+	margin: 0 5px 0 0;
+	box-shadow: inset 0 5px 5px rgba(0,0,0, 0.3);
+	-webkit-box-shadow: inset 0 5px 5px rgba(0,0,0, 0.3);
+	-moz-box-shadow: inset 0 5px 5px rgba(0,0,0, 0.3);
+}
+
+form.search > input[type=image] {
+	width: 36px;
+	height: 34px;
+	padding: 0;
+	margin: 0;
+	outline: none;
+	border: none;
+	background: transparent;
+}
+
+form.search > input:-moz-placeholder {
+  color: #5b636e;
+}
+form.search > input::-webkit-input-placeholder {
+  color: #5b636e;
+}	
+
+form.search > input[type=text]:focus {
+	border: 1px solid #a5adb8;
+}
+/*Slider*/
+.slider {
+	width: 980px;
+	height: 240px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+
+.itemSlider {
+	width: 980px;
+	height: 240px;
+}
+
+.itemSlider .bgSlide {
+	width: 980px;
+	height: 240px;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.itemSlider .descSlide {
+	position: absolute;
+	top: 40px;
+	left: 30px;
+	width: 500px;
+	overflow: hidden;
+}
+
+.descSlide>h1 {
+	font-size: 30px;
+}
+
+.descSlide h1+p {
+	color: #282D33;
+	font-size: 18px;
+	font-weight: bold;
+	margin: 0;
+}
+
+.descSlide>span {
+	display: inline-block;
+	font-size: 16px;
+	font-weight: bold;
+	color: #a5adb8;
+	margin: 20px 0 6px;
+}
+
+.descSlide>p {
+	color: #d9dcdf;
+	margin-top: 0;
+}
+/*Navigation*/
+.nav {
+	width: 980px;
+	height: 29px;
+	background-color: #95161f;
+	margin: 0 auto;
+	padding-top: 7px;
+}
+
+ul.menu {
+	display: inline-block;
+	float: right;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+ul.menu li {
+	float: left;
+}
+
+ul.menu li a {
+	color: white;
+	font-weight: bold;
+	text-decoration: none;
+	padding: 0 20px;
+	-webkit-transition: text-shadow linear 0.2s;
+	-moz-transition: text-shadow linear 0.2s;
+	-ms-transition: text-shadow linear 0.2s;
+	-o-transition: text-shadow linear 0.2s;
+	transition: text-shadow linear 0.2s;
+}
+
+ul.menu li a:hover {
+	text-shadow: 0 0 15px rgba(255,255,255, 0.8);
+}
+.breadcrumbs {
+	width: 940px;
+	padding: 4px 20px 6px;
+	font-size: 11px;
+	margin: 0 auto;
+	background-color: #f3f3f3;
+}
+/*Main*/
+.main {
+	width: 940px;
+	padding: 20px 20px 270px;
+	overflow: hidden;
+	background-color: white;
+	margin: 0 auto;
+}
+/*Left Column*/
+.leftCol {
+	width: 223px;
+	float: left;
+	margin-right: 20px;
+	color: #757575;
+}
+
+.leftCol form {
+	width: 193px;
+	background-color: #f3f3f3;
+	border: 1px solid #d8dbde;
+	padding: 10px;
+	color: #757575;
+}
+
+.leftCol input,.leftCol textarea {
+	width: 183px;
+}
+
+.leftCol select {
+	width: 193px;
+}
+
+.leftCol select:focus {
+	outline: none;
+}
+
+.leftCol input[type=radio],.leftCol input[type=checkbox] {
+	width: auto;
+}
+
+.leftCol p {
+	font-size: 12px;
+	margin: 8px 0;
+}
+
+/*Social button*/
+.tw,.vk,.google {
+	margin-bottom: 5px;
+	height: 20px;
+}
+/*Right Column*/
+.rightCol {
+	overflow: hidden;
+}
+
+ul.img {
+	display: inline-block;
+	list-style: none;
+	margin: 0;
+	padding: 0 7px 15px;
+}
+
+ul.img li {
+	float: left;
+	box-shadow: 0 5px 5px rgba(0,0,0, 0.3);
+	-webkit-box-shadow: 0 5px 5px rgba(0,0,0, 0.3);
+	-moz-box-shadow: 0 5px 5px rgba(0,0,0, 0.3);
+	-webkit-transition: border linear 0.2s;
+	-moz-transition: border linear 0.2s;
+	-ms-transition: border linear 0.2s;
+	-o-transition: border linear 0.2s;
+	transition: border linear 0.2s;
+	margin-right: 15px;
+	border: 1px solid white;
+}
+
+ul.img li a {
+	width: 194px;
+	height: 140px;
+	display: block;
+	overflow: hidden;
+}
+
+ul.img li:hover {
+	border: 1px solid #95161f;
+}
+/*Footer*/
+.footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	background: #e7e4e4 url("images/bg-footer.png") repeat;
+	border-top: 10px solid #9c4757;
+	height: 230px;
+	overflow: hidden;
+}
+
+.footerContent {
+	padding: 10px;
+	color: white;
+	width: 960px;
+	margin: 0 auto;
+	font-size: 12px;
+	color: #85898f;
+	overflow: hidden;
+}
+
+.footerContent p {
+	margin: 7px 0;
+}
+
+.footerContent p strong {
+	font-size: 14px;
+	color: #a5adb8;
+}
+
+.footerContent a {
+	color: #d08b98;
+}
+
+.footerContent .borderBottom {
+	width: 270px;
+	height: 1px;
+	background-color: #191c20;
+	border-bottom: 1px solid #40474f;
+	margin-top: 5px;
+}
+
+.footerContent ul.clock {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+ul.clock li {
+	background: url("images/clock.png") left center no-repeat;
+	padding-left: 20px;
+	margin-top: 7px;
+}
+/*Social*/
+.social {
+	font-size: 12px;
+	margin-right: 20px;
+}
+
+.social>div {
+	display: block;
+	float: left;
+	margin: 18px 5px 0 0;
+}
+
+.social ul {
+	display: inline-block;
+	margin: 15px 0 0 0;
+	padding: 0;
+	list-style: none;
+	float: left;
+}
+
+.social ul li {
+	float: left;
+	margin-right: 5px;
+}